Solved

Onchange Split text appendTo text and join back together

Posted on 2010-11-10
4
388 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

632 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