HTML форма ввода

Question

У меня есть форма, которую я хочу отправить по 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>

Answer 1

что я бы порекомендовал мне на самом деле использовать кнопку «отправить» в этом случае, так как у вас есть так много фрагментов данных, которые необходимо установить ДО того, как запрос отправится на сервер.(Кроме того, лучше отформатируйте свой код, чтобы он был более читабельным. Одно это сделает больше, чтобы вам было легче разрабатывать ваш код.

процесс выглядит так: «установите несколько выпадающих меню и запустите эти настройки на сервере»так что делайте именно так. Я бы избавился от событий onChange в ваших списках выбора и просто включил одну функцию JavaScript из кнопки «Отправить», которая просто считывает, какие настройки выбраны, выбрасывает их в HTTPRequest иотправляет его на любой PHP-скрипт, работающий на сервере.

bing, bang, boom, все готово. Если сервер отправляет ответ, то разберитесь с этим отдельно.

WR!

Answer 2

Если вы хотите отправить свой <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>