Html form input

Question

I have a form that I want to submit to a url. I am not sure what is the best way to build it. I want to pass dates to and from. I have 3 select boxes, one for date, month and year.

Would I use javascript, php or will the form be built automatically from the intput boxes I have the date in.

Example URL, it is only the date_start & date_end that will change: 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

If you want to submit your <form> in such a way that targets to a request like this

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

I'd suggest putting all those fields you have outside the <form> tag, and include only <input type="hidden"> fields in it, so that they are the ones posted when you submit it. All attributes in the form (in this case the three hidden ones) will be automatically appended to the requested URL (the one in the action attribute in the <form>).

You can make up the start_date and end_date fields with javascript in an onclick event handler in the <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

what i would recommend i to actually use a 'submit' button in this instance, since you have so many pieces of data that need to be set BEFORE the request goes to the server. (also, format your code better so it's more readable. this alone will do more to help you develop your code more easily.

the process appears to be 'set a bunch of dropdowns and fire those settings off to server'. so do exactly that. i'd get rid of the onChange events in your select lists and just drive a single JavaScript function from the 'submit' button that just reads what the select dropdowns are set to, dumps them into and HTTPRequest and sends it to whatever PHP script is running on the server.

bing, bang, boom, you're done. if the server sends a response, then deal with that separately.

WR!