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處理！