Question

我的第一篇文章，所以如果我弄错了，请原谅。另外，这是我第一次广泛使用jquery，所以再一次......不要打扰我。

好的，继续原地......

我有一个非常重要的WP模板（不是我的），我不想尝试处理代码中的任何冲突，所以我创建了WP外部的表单，包括我需要的一些jquery客户，我正在考虑他们。

一切顺利，直到我想添加一个几乎与我的另一种形式相似的形式，但所需的逻辑是不同的。我把这些表单称为不同的名称和ID，以便不相互冲突，并且将它们用于其中。两种表单上的提交都可以正常工作，并且不会与表单中的元素或其他iframed形式的内部元素发生冲突（即使它们也是如此）具有相同的名称和ID）。然而，我写的jquery（noob写的是）只为加载的FIRST表单触发（加载其他表单，因为他们没有查询）。所以我可以翻转我的jquery表单，瞧，第二个表单，现在是第一个表单，它会触发。然而，WAS第一次，现在第二次的形式并没有激发。我尝试更改表单内部的元素名称，同时更改表单ID。

请记住这一点......表单在各自的页面上，然后将这些页面iframed到父页面中，因此据我所知，表单中的表单可以具有相同的元素名称（我需要为了匹配远程提供商）。然而，我打电话给每个表格，一个不同的名称和身份。每个表单页面都有自己的jquery代码调用。

我不确定你需要多少代码，我现在意识到我的代码可能很乱，但我只关心功能，我会稍后研究它的形式和速度。 ;）

我从EACH表单页面调用的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来帮助将数据加载到表单中，并允许表单处理提交。我希望我不必将表单放在单独的页面上，这有助于为我的客户整合内容。我认为iframing就是这里的答案。

我正在寻找一些新观点。感谢。

Answer 1

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

同一页面中的两个元素不能具有相同的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');

这是你应该做的第一件事

jquery，iframes和表格OH MY！

2 个答案: