jquery、iframe 和表单 天哪！

Question

本人第一次发帖，如果有什么不对的地方还请多多包涵。 另外，这是我第一次广泛使用 jquery，所以再一次......不要打败我。

好吧，情况如下...

我有一个 WP 模板，它的 jquery 非常多（不是我的），我不想尝试处理代码中的任何冲突，所以我在 WP 外部创建了表单，包括一些 jquery这是我的客户所需要的，并且正在将它们嵌入到框架中。

一切都很顺利，直到我想添加一个与我拥有的另一个表单几乎相似的表单，但所需的逻辑不同。我将表单命名为不同的名称和 ID，以免彼此冲突，并将它们放入 iframe 中。两种表单上的提交都工作正常，并且与表单内的元素或其他 iframe 表单内部元素没有冲突（即使它们具有相同的名称和 ID）。然而，我写的jquery（菜鸟写的是）仅在加载的第一个表单时触发（加载其他表单很好，因为它们没有查询）。所以我可以翻转我的 jquery 表单，瞧，第二个表单（现在是第一个表单）被触发。然而，以前是第一个、现在是第二个的形式不会触发。我尝试过更改表单内部的元素名称，也更改表单 id 本身。

请记住这一点...表单位于自己的单独页面上，然后将其嵌入到父页面中，因此据我了解，表单中可以具有相同的元素名称（我需要以匹配远程提供商）。然而，我为每个表单调用了不同的名称和 ID。每个表单页面都有自己的 jquery 代码调用。

我不确定这里需要多少代码，我意识到我的代码现在可能很混乱，但我只关心功能，我会继续努力其形式和速度稍后再说。 ;)

我从每个表单页面调用的 jquery 的一部分（看到它们是单独的页面）（减去调用的函数）

    $(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);

现在我有两个表单在某种程度上利用了这种逻辑。

    <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

下一个表格...

<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

目前，对于这两种形式，都是通过db调用查询出发地，然后根据出发地查询目的地，然后根据目的地查询酒店，根据目的地查询持续时间......非常迷惑了，让我脑痛了好几个星期，哈哈。但我希望这有助于看到我的 delima...

我只使用 jquery 来帮助将数据加载到表单中，并允许表单处理提交。我希望我不必将表格放在单独的页面上，这有助于为我的客户整合事情。我认为 iframe 就是答案。

我正在寻找对此的一些新观点。谢谢。

Answer 1

停止阅读“（即使他们有相同的名字和 ID）。”

同一页面中的两个元素不能具有相同的 id。

Answer 2

你一遍又一遍地编写相同的代码。这很糟糕。

你应该做这样的事情：

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');

这只是你应该做的第一件事