CODEWITHSUNDEEP
javascriptphpjqueryforms
oren shbiro
oren shbiro

Reputation: 33

collecting separate values in a form and posting them as one string

I am working with this form

<form onsubmit="return validate();" method="get" action="http://marriott.com/reservation/availabilitySearch.mi" name="fullRatesCalloutForm" target="_blank">
    <h3>Reservations</h3>
          <input type="hidden" value="false" name="clusterSell">
          <input type="hidden" value="YYJMC" name="propertyCode">
          <input type="hidden" value="false" name="isSearch">
          <input type="hidden" value="SrchMod_P" name="WT_Ref">
          <input type="hidden" value="1" name="numberOfNights">
          <input type="hidden" value="" name="groupCode">
          <input type="hidden" value="" name="marriottRewardsNumber">
          <input type="hidden" value="" name="corporateCode">
          <label for="fromDate">Check-in date:</label>
          <br>
          <input value="mm/dd/yyyy" name="fromDate" tabindex="2" onchange="SetFormDate('checkInDate')" id="start-date" class="date-pick dp-applied hasDatepicker" gtbfieldid="1">
          <img class="ui-datepicker-trigger" src="http://www.marriottvictoria.com/images/calendar.gif" alt="Choose date" title="Choose date">
          <br class="clear">
          <label for="toDate">Check-out date:</label>
          <br>
          <input value="mm/dd/yyyy" name="toDate" tabindex="2" onchange="SetFormDate('checkOutDate')" id="end-date" class="date-pick dp-applied hasDatepicker" gtbfieldid="2">
          <img class="ui-datepicker-trigger" src="http://www.marriottvictoria.com/images/calendar.gif" alt="Choose date" title="Choose date">
          <br class="clear">
          <div class="sel">
            <label for="numberOfRooms" class="room">Rooms:</label>
            <br>
            <select name="numberOfRooms" tabindex="7" id="roomNum" gtbfieldid="3">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>
          <div class="sel">
            <label>Guests per room:</label>
            <br>
            <select name="numberOfGuests" tabindex="8" id="guestNum" gtbfieldid="4">
              <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>
            </select>
          </div>
          <input type="submit" value="Check Availability" onmousedown="ga('send', 'pageview', '/ReservationsWidget/Marriott_com');" href="javascript:document.fullRatesCalloutForm.submit();">
        </form>

I have redesigned it to look like this -

new form

I managed to have the value from the date picker separate into different inputs using this code

$(function() {
  $(".trigger").click(function(){
  $( "#datepicker" ).datepicker({});
  $("#datepicker").datepicker("show"); }); 
 });
 $("#datepicker").datepicker({

 onSelect: function(dateText, inst) {
    //dateText comes in as MM/DD/YY
    var datePieces = dateText.split('/');
    var month = datePieces[0];
    var day = datePieces[1];
    var year = datePieces[2];
    //define select option values for
    //corresponding element
    $('select#month').val(month);
    $('select#day').val(day);
    $('select#year').val(year); }});

My problem now is that I must send the arrival and departure dates as mm/dd/yy and not as separate values. I'm not sure how to change the query string on submit

Upvotes: 2

Views: 66

Answers (1)

Fergal Andrews
Fergal Andrews

Reputation: 314

If I understand what you are trying to do correctly you could create the string like this: 

 var datePieces = dateText.split('/');
var month = datePieces[0];
var day = datePieces[1];
var year = datePieces[2];
//define select option values for
//corresponding element
$('select#month').val(month);
$('select#day').val(day);
$('select#year').val(year); }});

return month + '/' + day + '/' + year;

Upvotes: 1

Related Questions