Solved

append dropdown value to hyperlink with jquery

Posted on 2013-05-21
8
386 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

739 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