Solved

append dropdown value to hyperlink with jquery

Posted on 2013-05-21
8
384 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
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress Security 29 48
Javascript 2 23
Visual Studio npm 1 12
Local HTML file to display local Access MDB data in browser 4 27
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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)

837 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