Html表单输入

Question

我有一个表单，我想提交到一个URL。我不确定构建它的最佳方式是什么。我想通过日期往返。我有3个选择框，一个用于日期，月份和年份。

我会使用JavaScript，PHP或将形式从intput箱我在日期自动生成

实例URL，它只是DATE_START & DATE_END，这将改变： https://www.mysite.com/availability/?from=facebook&date_start=2011-08-10&date_end=2011-08-11“

<div class="searchbox-wrapper"> 
      <p>Date of Arrival:</p> 
    <p><select onchange="bke_update_dropdown(form, form.bke_arrival_day.value, 
        form.bke_arrival_month.value, 
        form.bke_arrival_year.value, '1')" class="bke_drop" name="bke_arrival_day" gtbfieldid="8"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15" selected="selected">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 

    <select onchange="bke_update_dropdown(form, form.bke_arrival_day.value, 
        form.bke_arrival_month.value, 
        form.bke_arrival_year.value, '1')" class="bke_drop" name="bke_arrival_month" gtbfieldid="9"><option value="1">Jan</option><option value="2" selected="selected">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select> 

    <select onchange="bke_update_dropdown(form, form.bke_arrival_day.value, 
        form.bke_arrival_month.value, 
        form.bke_arrival_year.value, '1')" class="bke_drop" name="bke_arrival_year" gtbfieldid="10"><option value="2011" selected="selected">2011</option><option value="2012">2012</option><option value="2013">2013</option></select> 


     </p> 
      <p>Date of Departure:</p> 
     <p><select class="bke_drop" name="bke_departure_day" gtbfieldid="11"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16" selected="selected">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 

    <select class="bke_drop" name="bke_departure_month" gtbfieldid="12"><option value="1">Jan</option><option value="2" selected="selected">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select> 

    <select class="bke_drop" name="bke_departure_year" gtbfieldid="13"><option value="2011" selected="selected">2011</option><option value="2012">2012</option><option value="2013">2013</option></select> 


     </p> 
      <p>Rate Code:&nbsp; 
    <input type="text" value="(optional)" onclick="if (this.value == '(optional)') this.value = '';" style="text-align: center;" class="bke_drop" maxlength="10" size="8" name="bke_ratecode" gtbfieldid="14"> 
    </p> 
      <p class="submit-wrapper"><input type="submit" class="date_input" value="Check Rates"></p> 
    </div> 

    </form>  
</div> 

Answer 1

如果你想提交您的<form>在针对像这样

https://www.mysite.com/availability/?from=facebook&date_start=2011-08-10&date_end=2011-08-11" 

的请求这样的方式

我建议将所有这些字段放在<form>标记之外，并且只包含<input type="hidden">字段，以便它们在您提交时发布。 表单中的所有属性（本例中为三个隐藏属性）将自动附加到请求的URL（<form>中的action属性中的一个）。

可以弥补使用JavaScript start_date和end_date中的字段onclick事件处理程序在<input type="submit">

<!-- All the current fields here --> 

<form action="https://www.mysite.com/availability/" method="GET"> 
    <input type="hidden" name="from" value="facebook"> 
    <input type="hidden" name="date_start" id="date_start"> 
    <input type="hidden" name="date_end" id="date_end"> 
    <input type="submit" onclick="makeUpDates()"> 
</form> 

<script> 
    function makeUpDates(){ 
     // concantenate values to date_start and date_end hidden inputs 
     document.getElementById('date_start').value = 
         form.bke_arrival_year.value + '-' + 
         form.bke_arrival_month.value + '-' + 
         form.bke_arrival_day.value ; 
     document.getElementById('date_end').value = 
         form.bke_departure_year.value + '-' + 
         form.bke_departure_month.value + '-' + 
         form.bke_adeparture_day.value ; 
    } 
</script> 

Answer 2

什么，我会建议我实际使用在这种情况下一个“提交”按钮，既然你有如此多的数据片段需要在请求之前设置到服务器。 （也可以更好地对代码进行格式化，以便更易读，仅凭这些就可以帮助您更轻松地开发代码。

该过程似乎是'设置了一堆下拉列表并将这些设置关闭到服务器'。我会摆脱选择列表中的onChange事件，并从'submit'按钮驱动一个JavaScript函数，该按钮只读取选择下拉列表的设置，将它们转储到HTTPRequest中并发送给它到任何PHP脚本在服务器上运行。

冰，砰，咚，就大功告成了。如果服务器发送一个响应，然后与分别。

WR处理！