How to extract values from HTML <input type=“date”> using jQuery to a specific website

can you help me out with this problem? What i want is to transfer the value the date of "checkin" and "checkout" to a specific URL. But it doesn't work with my codes.

$('#submitBooking').on('click', function() {

  var checkin = new Date($('#checkinbooking').val());
  inDay = checkin.getDate();
  inMonth = checkin.getMonth() + 1;
  inYear = checkin.getFullYear();
  checkin = ([inYear, inMonth, inDay].join('-'));

  var checkout = new Date($('#checkoutbooking').val());
  outDay = checkout.getDate();
  outMonth = checkout.getMonth() + 1;
  outYear = checkout.getFullYear();
  checkout = ([outYear, outMonth, outDay].join('-'));

  window.location.href =
    'https://hotels.cloudbeds.com/reservation/oL7RdR?checkin=' + checkin + '&checkout=' + checkout;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://hotels.cloudbeds.com/reservation/oL7RdR#/post" method="post">
  <label for="checkin" class="VP"><span class="VC">From</span></label>
  <input type="date" name="checkin" id="checkinbooking">

  <label for="checkout" class="VP"><span class="VC">To</span></label>
  <input type="date" name="checkout" id="checkoutbooking">

  <input type="submit" value="Check Availability" id="submitBooking">
</form>

1 answer

  • answered 2018-07-11 04:08 Noli Java

    I have successfully work with it. What I did is change the method to get and used the preventDefault() and some changes in my href

    $('#submitBooking').on('click', 
    function(event){
        event.preventDefault()
    
        var checkin = new Date($('#checkinbooking').val());
        inDay = checkin.getDate();
        inMonth = checkin.getMonth()+1;
        inYear = checkin.getFullYear();
        checkin = ([inYear, inMonth, inDay].join('-'));
    
        var checkout = new Date($('#checkoutbooking').val());
        outDay = checkout.getDate();
        outMonth = checkout.getMonth()+1;
        outYear = checkout.getFullYear();
        checkout = ([outYear, outMonth, outDay].join('-'));
    
        window.location.href = 'https://hotels.cloudbeds.com/reservation/oL7RdR#checkin='+checkin+'&checkout='+checkout;
    });
    <form action="https://hotels.cloudbeds.com/reservation/oL7RdR#" method="get">
    						<label for="checkin" class="VP"><span class="VC">From</span></label>
    						<input type="date" name="checkin" id="checkinbooking">
    
    						<label for="checkout" class="VP"><span class="VC">To</span></label>
    						<input type="date" name="checkout" id="checkoutbooking">
    
    						<input type="submit" value="Check Availability" id="submitBooking">
    					</form>