Question

我有一个表单，我想提交给网址。我不确定构建它的最佳方法是什么。我想传递日期往返。我有3个选择框，一个用于日期，月份和年份。

我会使用javascript，php还是自动从我输入日期的输入框中构建表单。

示例网址，它只是date_start＆amp; 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（action中<form>属性中的属性）。

您可以在start_date

中的end_date事件处理程序中使用javascript组成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事件，只需从“提交”按钮驱动一个JavaScript函数，该按钮只读取选择下拉列表的设置，将它们转储到HTTPRequest并将其发送到任何PHP脚本在服务器上运行。

bing，bang，boom，你已经完成了。如果服务器发送响应，则单独处理。

WR！

Html表单输入

2 个答案: