html表单输入答案

【问题标题】：Html form inputhtml表单输入
【发布时间】：2011-12-10 06:15:33
【问题描述】：

我有一个要提交到 url 的表单。我不确定构建它的最佳方法是什么。我想来回传递日期。我有 3 个选择框，一个用于日期、月份和年份。

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

示例 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>

【问题讨论】：

问题是：我会使用 javascript、php 还是会从我输入日期的输入框中自动构建表单。
如果使用https://www.mysite.com/availability/?from=facebook&date_start=2011-08-10&date_end=2011-08-11" 之类的 URL 访问您的页面，您是否询问如何使用请求参数中的值填充表单组件？也许您想使用表单中提供的日期提交到该 URL？
对不起，如果我不清楚这一点，我想将表格提交到上述网址。对于 date_start，我输入了日期、月份和年份。如何将此输入输入到 date_start 的提交 url 中。什么是最好的 javascript、php 或其他东西。谢谢

标签： html forms

【解决方案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 属性中的那个）。

您可以在<input type="submit"> 中的onclick 事件处理程序中使用javascript 组成start_date 和end_date 字段

<!-- 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>

【讨论】：

谢谢，我在想这样的事情，但不确定这是不是最好的方法。
很高兴它有帮助 :-) 您还可以检查 makeUpDates 函数中的日期字段，以确保它们不为空，如果其中任何一个为空，则扔一个 alert 并制作函数返回假。然后使用onclick="return makeUpDates();" 将阻止表单提交，如果makeUpDates() 返回false。

【解决方案2】：

我建议我在这种情况下实际使用“提交”按钮，因为在请求到达服务器之前需要设置很多数据。（另外，更好地格式化您的代码，使其更具可读性。仅此一项就可以帮助您更轻松地开发代码。

该过程似乎是“设置一堆下拉菜单并将这些设置触发到服务器”。所以就这样做。我会摆脱选择列表中的 onChange 事件，只需从“提交”按钮驱动一个 JavaScript 函数，该函数只读取选择下拉列表设置的内容，将它们转储到 HTTPRequest 并将其发送到任何 PHP 脚本在服务器上运行。

bing，砰，砰，大功告成。如果服务器发送响应，则单独处理。

写！

【讨论】：