jquery, iframes and forms OH MY!

Question

My first post, so if I get something wrong, please forgive. Also, this is my first time using jquery extensively, so once again... dont beat me to hard.

Alright, heres the situ...

I have a WP template that is pretty heavily jqueried (not mine), and I dont want to try and deal with any conflicts within the code, so I created my forms external to WP, included some jquery that is required for my client, and am iframing them in.

Everything went well, until I wanted to add a form that is almost similar to another form I have, yet the required logic is different. I called the forms different names and ids so as to not conflict with one another, and iframed them in. The submits on both forms work fine, and there is no conflict with elements within the forms or other iframed forms inner elements (even tho they have the same name and id). However the jquery I wrote (noob writing yes) only fires for the FIRST form loaded (loads other forms fine as they dont have query in them). So I can flip my jquery forms, and voila, the form that was second, that is now first, fires. However the form that WAS first, now second, doesnt fire. I have tried changing element names for inside the forms, changing the form id themselves as well.

Please keep this in mind... the forms are on their own individual pages, which are then iframed into the parent page, so therefore as I understand it, the forms can have the same element names in them (which I need in order to match to the remote provider). I call each form however, a different name and id. Each form page has its own call to the jquery codes.

I am unsure how much code you need here, and I realize my code may be a mess right now, but I am just concerned about function, I will work on the form and speed of it later. ;)

Part of jquery that I call from EACH form page (seeing they are separate pages) (minus functions called)

    $(document).ready(function(){ // jquery equivilant of the onload
    var departure = $("#departure").val(); //this pulls the value from the hidden departure field.
  //var destin = $("#destination").val();
  getDeparture(departure); //runs the get departure function
  getDestination(departure); //runs the get destination function

  $("#gateway_dep").live("change",function(){ //when the destination drop down is changed do the following code
    var departure = $(this).val(); // get the current value of the departure dropbox. Because we explicitly ran this function on the departure drop down, we can use $(this).val() to get the current selection
    getDestination(departure); // when the departure drop down is changed, reload the destinations for that drop down.
     //getDuration(departure, destination);
     //reset duration dropdown if they change the gateway
     //disable the dropdown
     //getRated();
     $("#duration").attr('disabled', 'disabled');
     //set text in dropdown back to original
     $("#duration").clearOptions({placeholderText:'Select Destination First......'});
     //sets the width of the dropdown back to original
     var min_width = 195;
     $('#duration').css('min-width', min_width + 'px');
     //reset the hotel dropdown if they change the gateway
    $("#hotel_no").attr('disabled', 'disabled');
     $("#hotel_no").clearOptions({placeholderText:'Select Destination First......'});
     $('#hotel_no').css('min-width', min_width + 'px');
     //reset ratings
     $("#star").attr('disabled', 'disabled');
     $("#star").clearOptions({placeholderText:'Select Destination First......'});
     $('#star').css('min-width', min_width + 'px');
     //reset prices
     $("#price_max").attr('disabled', 'disabled');
     $("#price_max").clearOptions({placeholderText:'Select Destination First......'});
     $('#price_max').css('min-width', min_width + 'px');
  });

  $("#dest_dep").live("change",function(){ //when the destination drop down is changed do the following code
    var departure = $("#gateway_dep").val();
    var destination = $(this).val(); // get the current value of the destination dropbox. Because we explicitly ran this function on the departure drop down, we can use $(this).val() to get the current selection
    //window.alert(departure);
    //window.alert( $(this).val() );
    getDuration(departure, destination); // when the departure drop down is changed, reload the destinations for that drop down.
    getHotels(departure, destination);
    getRated();
    getPrices();
  });
});

(function($) {

    //plugin definition
    $.fn.clearOptions = function(options) 
    {
        var opts = $.extend({}, $.fn.clearOptions.defaults, options);

        return this.each(function() {
            //Retain the existing placeholder for the dropdown
            if(opts.retainExistingPlaceholder) {
                $(this).children('option:not(:first)').remove();
            }
            else {
                $(this).children('option').remove();
                if(opts.placeholderText != null) {
                    $(this).append('<option value="' + opts.placeholderValue + '">' + opts.placeholderText + '</option>');
                }
            }
        });
    }

    $.fn.clearOptions.defaults = 
    {
        placeholderText: 'Select...',
        placeholderValue: '',
        retainExistingPlaceholder: false
    }; 

})(jQuery);

Now I have two forms that utilize this logic somewhat.

    <form name="lastminute" id="lastminute" method="post" action="http://vas.sax.softvoyage.com/cgi-bin/handler.cgi" target="_blank" onSubmit="return checkform()">
<!--<form name="packages" id="packages" method="post" action="http://function42.biz/custom/postvars.php">-->
<input type="hidden" name="searchtype" value="PA" />
<input type="hidden" name="alias" value="xxx" />
<input type="hidden" name="code_ag" value="xxx" />

<input type="hidden" name="departure" id="departure" value="Toronto" /> <!-- This sets a hidden field up with a default departure city. You can use a PHP var here if you want different ones throughout your site -->
<input type="hidden" name="destination" id="destination" value="All%20Countries" />
<table class="inside_call" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td class="b2clabeltext">Departure from
:</td>
  <td id="departurediv" ><select name="gateway_dep" id="gateway_dep" disabled="disabled">
    <option>Loading...</option>
  </select></td>
<td class="b2clabeltext">Destination
:</td>
  <td id="destinationdiv"><select name="dest_dep" id="dest_dep" disabled="disabled">
    <option>Select Departure First...</option>
  </select></td></tr><tr>
<td class="b2clabeltext" style="float:left; padding-right:10px;">Date:</td><td id="datediv" class="inside_call" style="padding-bottom:10px;"><?php
$nextweekend = date( 'Ymd', strtotime("next Saturday +7 day")); ?>
<select name="date_dep"><option value="<?php echo $nextweekend; ?>"><?php echo $nextweekend; ?></option> <?php
for($i=0;$i<2;$i++) {
$nextweekend = date( 'Ymd', strtotime($nextweekend . "+7 day"));
?><option value="<?php echo $nextweekend; ?>"><?php echo $nextweekend; ?></option><?php
}
?></select></td>
<td class="b2clabeltext">Duration
:</td>
  <td id="durationdiv"><select name="duration" id="duration" style="width: 195px;" disabled="disabled">
    <option>Select Destination First...</option>
  </select></td></tr><tr>
<td class="b2clabeltext">Hotels:</td>
<td id="hoteldiv"><select name="hotel_no" id="hotel_no" style="width: 195px;" disabled="disabled">
 <option>Select Destination First...</option>
</select></td>
<td class="b2clabeltext">Ratings:</td><td id = "ratediv"><select name="star" id="star" style="width: 195px" disabled="disabled">
    <option>Select Destination First...</option>
  </select></td></tr>
<tr><td class="b2clabeltext">Prices:</td><td id = "pricesdiv"><select name="price_max" id="price_max" style="width: 195px" disabled="disabled">
  <option>Select Destination First...</option>
</select></td>.............yadda yadda yadda down to the submit button

And the next form...

<form name="packages" id="packages"
> method="post"
> action="http://vas.sax.softvoyage.com/cgi-bin/handler.cgi"
> target="_blank" onSubmit="return
> checkform()"> 
> <input type="hidden" name="searchtype"
> value="PA" /> <input type="hidden"
> name="alias" value="xxx" /> <input
> type="hidden" name="code_ag"
> value="xxx" />
> 
> <input type="hidden" name="departure"
> id="departure" value="Toronto" /> <!--
> This sets a hidden field up with a
> default departure city. You can use a
> PHP var here if you want different
> ones throughout your site --> <input
> type="hidden" name="destination"
> id="destination"
> value="All%20Countries" /> <table
> class="inside_call" width="100%"
> cellspacing="0" cellpadding="5"
> border="0"><tr><td
> class="b2clabeltext">Departure from
> :</td>   <td id="departurediv"
> ><select name="gateway_dep" id="gateway_dep" disabled="disabled">
>     <option>Loading...</option>   </select></td> <td
> class="b2clabeltext">Destination
> :</td>   <td
> id="destinationdiv"><select
> name="dest_dep" id="dest_dep"
> disabled="disabled">
>     <option>Select Departure First...</option>  
> </select></td></tr><tr> <td
> class="b2clabeltext"
> style="float:left;
> padding-right:10px;">Date:</td><td
> id="datediv" class="inside_call"
> style="padding-bottom:10px;"><script>DateInput('date_dep',
> true, 'YYYYMMDD')</script></td> <td
> class="b2clabeltext">Duration :</td>  
> <td id="durationdiv"><select
> name="duration" id="duration"
> style="width: 195px;"
> disabled="disabled">
>     <option>Select Destination First...</option>  
> </select></td></tr><tr> <td
> class="b2clabeltext">Hotels:</td> <td
> id="hoteldiv"><select name="hotel_no"
> id="hotel_no" style="width: 195px;"
> disabled="disabled">  <option>Select
> Destination First...</option>
> </select></td> <td
> class="b2clabeltext">Ratings:</td><td
> id = "ratediv"><select name="star"
> id="star" style="width: 195px"
> disabled="disabled">
>     <option>Select Destination First...</option>  
> </select></td></tr> <tr><td
> class="b2clabeltext">Prices:</td><td
> id = "pricesdiv"><select
> name="price_max" id="price_max"
> style="width: 195px"
> disabled="disabled">   <option>Select
> Destination First...</option>
> </select></td>...yadda yadda yadda
> down to the submit button

Currently, for both forms, the departures are queried in via db call, then the destinations are queried in based on the departure, then the hotels are queried in based on the destination, and durations are queried in based on the desitination... very convelouted and gave my brain aches for weeks LOL. But I hope this helps see my delima...

I am ONLY using jquery to help load the data into the forms, and am allowing the forms to process the submitting. I am hoping that i dont have to put the forms on separate pages, and this helps consolidate things for my client. I thought iframing would be the answer here.

I am looking for some fresh perspective on this. Thanks.

Answer 1

You are making the same code over and over. And that's pretty bad.

You should do something like:

array = ["hotel_no","start","price_max"];
for each element of array do
     $("#"+element).attr('disabled', 'disabled')
           .clearOptions({placeholderText:'Select Destination First......'})
           .css('min-width', min_width + 'px');

This is just the first thing you should have done

Answer 2

Stopped reading at "(even tho they have the same name and id)."

Two elements within the same page cannot have the same id.