Question

I have two forms that both have select/options in it (example below). My purpose is so that when a user selects one of the options, the value is passed through the function and inserted into a hyperlink string. First form works fine but its when doing the second form and using the same functions that it doesn’t work, seems to clash with the first form. Is there a way to reuse this function without copy, pasting and renaming it just to work for the second as this will make the script massive?

<form>
  <select id="event_date_01" class="add_event_url">
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option>
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option>
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option>
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option>
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option>
    <option value="915593210">29th Oct 2012, 3pm-4pm GMT</option>
  </select>
</form>
<span class="webinarLink2">
  <a href="" target="_blank" class="desturl webinarLink">
    Register now &raquo;
  </a>
</span>

<form>
 <select id="event_date_02" class="add_event_url">
  <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option>
  <option value="175324970">27th Sept 2012, 3pm-4pm BST</option>
 </select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink">Register now &raquo;</a></span>
</form>

And the javascript I am using is below

$(document).ready(function() {  
  if ($("select.add_event_url").length) {
    $("select.add_event_url").change(displayVals);
    displayVals();
  }
});

function displayVals() {
  var event_date = $("#event_date").val();
  $("a.desturl").attr('href', 'https://www2.gotomeeting.com/register/' + event_date);
}

Thanks in advance guys

Answer 1

You seem to be using select elements with identical IDs. This won’t work; IDs need to be unique.

Give both <select>s different IDs but keep the same class, and try something like this:

$(document).ready(function() {
    $("select.add_event_url").change(function(e) {
        var $select = $(this),
            event_date = $select.val(),
            baseurl = 'https://www2.gotomeeting.com/register/';
        $("a.desturl").attr('href', baseurl + event_date);
    });
});​

http://jsfiddle.net/74Lfg/1/

UPDATE

In order to traverse from your select to the correct a.desturl, you need to put them in the same relative locations so they can be traversed to from this.
http://jsfiddle.net/74Lfg/4/

$(document).ready(function() {
    $("select.add_event_url").change(function(e) {
        var $select = $(this),
            event_date = $select.val(),
            baseurl = 'https://www2.gotomeeting.com/register/';
        $select.closest('form').find('.webinarLink2 a.desturl').attr('href', baseurl + event_date);
    });
    $('select.add_event_url').trigger('change');
});​

HTML (note the first link has been moved inside of the form):

<form>
  <select id="event_date_01" class="add_event_url">
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option>
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option>
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option>
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option>
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option>
    <option value="915593210">29th Oct 2012, 3pm-4pm GMT</option>
  </select>
<span class="webinarLink2">
  <a href="" target="_blank" class="desturl webinarLink">
    Register now &raquo;
  </a>
</span>
</form>

<form>
 <select id="event_date_02" class="add_event_url">
  <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option>
  <option value="175324970">27th Sept 2012, 3pm-4pm BST</option>
 </select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink">Register now &raquo;</a></span>
</form>​

Alternatively, you can assign each link a unique ID (so you can place it anywhere in the page) and add that ID as a data- attribute to the select element. http://jsfiddle.net/74Lfg/5/

$(document).ready(function() {
    $("select.add_event_url").change(function(e) {
        var $select = $(this),
            event_date = $select.val(),
            baseurl = 'https://www2.gotomeeting.com/register/';
        $('#'+$select.data('targetlink')).attr('href', baseurl + event_date);
    });
    $('select.add_event_url').trigger('change');
});​

HTML:

<form>
  <select id="event_date_01" class="add_event_url" data-targetlink="targetlink1">
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option>
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option>
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option>
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option>
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option>
    <option value="915593210">29th Oct 2012, 3pm-4pm GMT</option>
  </select>
<span class="webinarLink2">
  <a href="" target="_blank" id="targetlink1" class="desturl webinarLink">
    Register now &raquo;
  </a>
</span>
</form>

<form>
 <select id="event_date_02" class="add_event_url" data-targetlink="targetlink2">
  <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option>
  <option value="175324970">27th Sept 2012, 3pm-4pm BST</option>
 </select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink" id="targetlink2">Register now &raquo;</a></span>
</form>​​​​​​​​​​​​​​