Solved

append dropdown value to hyperlink with jquery

Posted on 2013-05-21
8
385 Views
Last Modified: 2013-05-22
say i have a drop down and hyperlink

<select id="attribute_input_27" name="oa_attributes[27]" onchange="calcAttrPrice()">
<option value="p1">p1</option>
<option value="p2">p2</option>
<option value="p3">p3</option>
</select>

<a href="contact/?attribute=xxx">click here</a>

want people click the hyper link the link will goto attribute=p1 / p2 or p3 base on value, how? please help expert!
0
Comment
Question by:john80988
[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
  • 4
  • 2
  • 2
8 Comments
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 39186527
<select id="attribute_input_27" name="oa_attributes[27]" onchange="calcAttrPrice()">
<option value="p1">p1</option>
<option value="p2">p2</option>
<option value="p3">p3</option>
</select>

<a id="someid" href="contact/?attribute=xxx">click here</a>

var parameter=$("#attribute_input_27").value;
$("#someid").attr("href", "contact/?attribute="+parameter);

Refer

 http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery

http://stackoverflow.com/questions/1334083/how-to-change-href-attribute-of-a-link-using-jquery
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39186560
I think you are looking for this:
<select id="attribute_input_27" name="oa_attributes[27]">
<option value="" selected disabled>Select</option>
<option value="p1">p1</option>
<option value="p2">p2</option>
<option value="p3">p3</option>
</select>
<script>
    $(function(){
      // bind change event to select
      $('#attribute_input_27').bind('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
             $('#someid').attr('href','contact/?attribute='+ url);
          }
          return false;
      });
    });
</script>
<a id="someid" href="#">click here</a>

Open in new window


Add jquery source
0
 

Author Comment

by:john80988
ID: 39186643
Yes this is want i need, can it also initial select the first time loaded value? Please help master expert. TQ
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:john80988
ID: 39186652
I mean when page loaded before i click the dropdown, can it initial append the selected value for the first time.
0
 
LVL 12

Accepted Solution

by:
sivagnanam chandrakanth earned 500 total points
ID: 39186666
Yes, you can just put below lines

 $(function(){

//for default value
var parameter=$("#attribute_input_27").value;
$("#someid").attr("href", "contact/?attribute="+parameter);

//onchange code has to go here
0
 

Author Comment

by:john80988
ID: 39186726
it should work, but it give me http://someurl.com/contact/?attribute=undefined

i think when teh time it get the value , the dropdown still haven't fill in the dropdown value from db

it it possible to initial the value after all the thing load?
0
 

Author Closing Comment

by:john80988
ID: 39186825
yea add selectedindex=0;
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39186882
Find the selected element using:
$("#elementid option").index($("#elementid option:selected")))

Open in new window


And now add selected attribute:
$("#elementid").val("value").attr("selected","selected")

Open in new window

0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

756 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