Solved

Onchange Split text appendTo text and join back together

Posted on 2010-11-10
4
372 Views
Last Modified: 2012-05-10
Hi guys!
I would like to append a value to href element of an achor from select box, after selecting one of its elements.

I would like to append it to the &B=two
So after selecting one of elements value of href is
"A=one&B=two&(selectedOptionValue)&path=somePath"

I am using jquery library, but don't mind using regular javascript with this task.

I will be very greatfull for any help!

Thanks!
<select onchange="appendToAnchor">

<option value="c=three">option1</option>

<option value="c=four">option2</option>

<option value="c=five">option3</option>

</select>

<a href="?A=one&b=two&path=somePath">go</a>

Open in new window

0
Comment
Question by:vidda22
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
jmatix earned 400 total points
ID: 34102240
1. Add an ids to <select> and <a>

<select id="sel1" onchange="appendToAnchor()">
<option value="c=three">option1</option>
<option value="c=four">option2</option>
<option value="c=five">option3</option>
</select>
<a href="?A=one&b=two&path=somePath">go</a>
 
<a id="anchor1" href="?A=one&b=two&path=somePath">go</a>

2. Define JS function appendToAnchor()

function appendToAnchor()
{
    var op = document.getElementById('sel1').value;
    document.getElementById('anchor1').href = document.getElementById('anchor1').href.replace(/&b=two/i, "&b=two&"+op);

}
0
 
LVL 3

Assisted Solution

by:kolakanuru1
kolakanuru1 earned 100 total points
ID: 34102354
mark up

        <select onchange="appendToAnchor(this.value)">
<option value="c=three">option1</option>
<option value="c=four">option2</option>
<option value="c=five">option3</option>
</select>
<a href="?A=one&b=two&#path=somePath" id="aTag" >go</a>

javascript
    function appendToAnchor(e)
    {
      var lnk = document.getElementById("aTag").href;
      lnk = lnk.replace("#path",e);
      document.getElementById("aTag").href = lnk

    }


just created an ID for anchor tag to easily identify the anchor tag and used #path instead of path to easily identify the string.
0
 
LVL 3

Expert Comment

by:kolakanuru1
ID: 34102392
I guess you need to replace somepath with selected value...little change

        <select onchange="appendToAnchor(this.value)">
<option value="c=three">option1</option>
<option value="c=four">option2</option>
<option value="c=five">option3</option>
</select>
<a href="?A=one&b=two&path=#somePath" id="aTag" >go</a>

javascript
    function appendToAnchor(e)
    {
      var lnk = document.getElementById("aTag").href;
      lnk = lnk.replace("#somepath",e);
      document.getElementById("aTag").href = lnk

    }
0
 

Author Closing Comment

by:vidda22
ID: 34102762
That was what I was looking for many thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now