I'm working on a website that includes a reservation widget, but I need to convert it into a GET form that opens an url with the information. I don't know much about coding, so I'm having trouble trying to do it. The code is the following:
The idea is, when the button is clicked, the following URL is generated: https://sampleurl.com/booking/checkin/checkout/adults/children
Example: Check-in on 22nd of January of 2019, Check-out on 25th of January of 2019, 2 adults and 1 children:
https://sampleurl.com/booking/2019-01-22/2015-01-25/2/1
Any ideas? It's probably simple to do but I want to maintain all css and I don't know how to generate an URL from a form. Thank you for your assistance!
// Datepicker
// ------------------------------------------------------
// Default calendar namespaces
var dateFormat = "<span class='day'>d</span> <span class='month'>M</span> <span class='year'>yy</span>",
dateArrival = '#dateArrival input',
dateDeparture = '#dateDeparture input',
dateArrivalVal = '#dateArrival .date-value',
dateDepartureVal = '#dateDeparture .date-value';
// Show arrival calendar
$(dateArrival).datepicker({
minDate: 'D',
dateFormat: dateFormat,
// get value on selected date for departure
onSelect: function(txt, inst) {
$(dateDepartureVal).html(txt);
$(dateArrivalVal).html($(dateArrival).val());
},
onClose: function(selectedDate) {
$(dateDeparture).datepicker("option", "minDate", selectedDate);
}
});
// Show departure calendar
$(dateDeparture).datepicker({
minDate: 'D',
dateFormat: dateFormat,
// get value on selected date for return
onSelect: function(txt, inst) {
$(dateDepartureVal).html(txt);
$(dateDepartureVal).html($(dateDeparture).val());
}
});
// set current date
$('.datepicker').datepicker('setDate', 'today');
// get current value from departure
$(dateArrivalVal).html($(dateArrival).val());
// get current value from return
$(dateDepartureVal).html($(dateDeparture).val());
// hide return input field
updateGuestNumber();
// update number of guest list
// Guests
// -------------------------------------------------------
var $guests = $('.guests'),
$guestList = $('.guests .guest-list');
// Guest list toogle event - dropdown
$('.guests .result').on('click', function(e) {
e.stopPropagation();
$guests.toggleClass("show");
if ($guests.hasClass('show')) {
$guestList.fadeIn();
} else {
$guestList.fadeOut();
}
});
// Close on page click
$('.qty-apply').on("click", function(e) {
$guestList.fadeOut();
$guests.removeClass("show");
});
// Quantities (add remove guests numbers)
// -------------------------------------------------------
$('.qty-plus').add('.qty-minus').on("click", function(e) {
e.preventDefault();
var $this = $(this),
fieldName = $this.attr('data-field'),
$input = $('input#' + fieldName);
var currentVal = parseInt($input.data('value'), 10),
ticketType = $input.data('tickettype');
if (!isNaN(currentVal)) {
var isChanged = false,
value = 0;
if ($this.hasClass('qty-plus') && currentVal < 12) {
value = currentVal + 1;
isChanged = true;
}
if ($this.hasClass('qty-minus') && currentVal > 0) {
value = currentVal - 1;
isChanged = true;
}
if (isChanged) {
$input.data('value', value);
$(ticketType).val(ticketType + '-' + value);
$input.val(value);
// Update guests number
updateGuestNumber();
}
}
});
// Passangers result
function updateGuestNumber() {
var adult = $('#ticket-adult').val(),
children = $('#ticket-children').val(),
qty = $('#qty-result');
qty.val(parseInt(adult, 10) + parseInt(children, 10));
// DOM results
$('#qty-result-text').text(qty.val());
}
});
$(window).on('load', function() {
setTimeout(function() {
$('.page-loader').addClass('loaded');
}, 1000);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section class="booking booking-inner">
<div class="section-header hidden">
<div class="container">
<h2 class="title">Booking & reservations</h2>
</div>
</div>
<div class="booking-wrapper">
<div class="container">
<div class="row">
<!--=== date arrival ===-->
<div class="col-xs-4 col-sm-3">
<div class="date" id="dateArrival" data-text="Arrival">
<input class="datepicker" readonly="readonly" />
<div class="date-value"></div>
</div>
</div>
<!--=== date departure ===-->
<div class="col-xs-4 col-sm-3">
<div class="date" id="dateDeparture" data-text="Departure">
<input class="datepicker" readonly="readonly" />
<div class="date-value"></div>
</div>
</div>
<!--=== guests ===-->
<div class="col-xs-4 col-sm-2">
<div class="guests" data-text="Guests">
<div class="result">
<input class="qty-result" type="text" value="0" id="qty-result" readonly="readonly" />
<div class="qty-result-text date-value" id="qty-result-text"></div>
</div>
<!--=== guests list ===-->
<ul class="guest-list">
<li class="header">
Please choose number of guests <span class="qty-apply"><i class="icon icon-cross"></i></span>
</li>
<!--=== adults ===-->
<li class="clearfix">
<!--=== Adults value ===-->
<div>
<input class="qty-amount" value="0" type="text" id="ticket-adult" data-value="0" readonly="readonly" />
</div>
<div>
<span>Adults <small>16+ years</small></span>
</div>
<!--=== Add/remove quantity buttons ===-->
<div>
<input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-adult" />
<input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-adult" />
</div>
</li>
<!--=== chilrens ===-->
<li class="clearfix">
<!--=== Adults value ===-->
<div>
<input class="qty-amount" value="0" type="text" id="ticket-children" data-value="0" readonly="readonly" />
</div>
<!--=== Label ===-->
<div>
<span>Children <small>2-11 years</small></span>
</div>
<!--=== Add/remove quantity buttons ===-->
<div>
<input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-children" />
<input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-children" />
</div>
</li>
</ul>
</div>
</div>
<!--=== button ===-->
<div class="col-xs-12 col-sm-4">
<a href="reservation-1.html" class="btn btn-clean">
Book now
<small>Best prices guaranteed</small>
</a>
</div>
</div>
<!--/row-->
</div>
<!--/booking-wrapper-->
</div>
<!--/container-->
</section>The theme, if you're interested, is the following: http://www.elathemes.com/themes/colina/index.html
So I remove the loose }); and added a click:
$(".btn").on("click",function(e) {
e.preventDefault();
// https://sampleurl.com/booking/checkin/checkout/adults/children
// https://sampleurl.com/booking/2019-01-22/2015-01-25/2/1
var adults = $('#ticket-adult').val(),
children = $('#ticket-children').val();
if (adults == 0) {
alert("Please enter number of adults");
$('#ticket-adult').focus();
}
else {
var url="https://sampleurl.com/booking/"
var fromDate = $("#dateDeparture input").datepicker("getDate");
fromDate = $.datepicker.formatDate("yy-mm-dd", fromDate);
var toDate = $("#dateArrival input").datepicker("getDate");
toDate = $.datepicker.formatDate("yy-mm-dd", toDate)
url += fromDate+"/"+toDate+"/"+adults+"/"+children;
console.log(url); // change to location=url;
}
});
// Datepicker
// ------------------------------------------------------
// Default calendar namespaces
var dateFormat = "d-m-yy",
dateArrival = '#dateArrival input',
dateDeparture = '#dateDeparture input',
dateArrivalVal = '#dateArrival .date-value',
dateDepartureVal = '#dateDeparture .date-value';
// Show arrival calendar
$(dateArrival).datepicker({
minDate: 'D',
dateFormat: dateFormat,
// get value on selected date for departure
onSelect: function(txt, inst) {
$(dateDepartureVal).html(txt);
$(dateArrivalVal).html($(dateArrival).val());
},
onClose: function(selectedDate) {
$(dateDeparture).datepicker("option", "minDate", selectedDate);
}
});
// Show departure calendar
$(dateDeparture).datepicker({
minDate: 'D',
dateFormat: dateFormat,
// get value on selected date for return
onSelect: function(txt, inst) {
$(dateDepartureVal).html(txt);
$(dateDepartureVal).html($(dateDeparture).val());
}
});
// set current date
$('.datepicker').datepicker('setDate', 'today');
// get current value from departure
$(dateArrivalVal).html($(dateArrival).val());
// get current value from return
$(dateDepartureVal).html($(dateDeparture).val());
// hide return input field
updateGuestNumber();
// update number of guest list
// Guests
// -------------------------------------------------------
var $guests = $('.guests'),
$guestList = $('.guests .guest-list');
// Guest list toogle event - dropdown
$('.guests .result').on('click', function(e) {
e.stopPropagation();
$guests.toggleClass("show");
if ($guests.hasClass('show')) {
$guestList.fadeIn();
} else {
$guestList.fadeOut();
}
});
// Close on page click
$('.qty-apply').on("click", function(e) {
$guestList.fadeOut();
$guests.removeClass("show");
});
// Quantities (add remove guests numbers)
// -------------------------------------------------------
$('.qty-plus').add('.qty-minus').on("click", function(e) {
e.preventDefault();
var $this = $(this),
fieldName = $this.attr('data-field'),
$input = $('input#' + fieldName);
var currentVal = parseInt($input.data('value'), 10),
ticketType = $input.data('tickettype');
if (!isNaN(currentVal)) {
var isChanged = false,
value = 0;
if ($this.hasClass('qty-plus') && currentVal < 12) {
value = currentVal + 1;
isChanged = true;
}
if ($this.hasClass('qty-minus') && currentVal > 0) {
value = currentVal - 1;
isChanged = true;
}
if (isChanged) {
$input.data('value', value);
$(ticketType).val(ticketType + '-' + value);
$input.val(value);
// Update guests number
updateGuestNumber();
}
}
});
// Passangers result
function updateGuestNumber() {
var adult = $('#ticket-adult').val(),
children = $('#ticket-children').val(),
qty = $('#qty-result');
qty.val(parseInt(adult, 10) + parseInt(children, 10));
// DOM results
$('#qty-result-text').text(qty.val());
}
$(window).on('load', function() {
setTimeout(function() {
$('.page-loader').addClass('loaded');
}, 1000);
$(".btn").on("click",function(e) {
e.preventDefault();
// https://sampleurl.com/booking/checkin/checkout/adults/children
// https://sampleurl.com/booking/2019-01-22/2015-01-25/2/1
var adults = $('#ticket-adult').val(),
children = $('#ticket-children').val();
if (adults == 0) {
alert("Please enter number of adults");
$('#ticket-adult').focus();
}
else {
var url="https://sampleurl.com/booking/"
var fromDate = $("#dateDeparture input").datepicker("getDate");
fromDate = $.datepicker.formatDate("yy-mm-dd", fromDate);
var toDate = $("#dateArrival input").datepicker("getDate");
toDate = $.datepicker.formatDate("yy-mm-dd", toDate)
url += fromDate+"/"+toDate+"/"+adults+"/"+children;
console.log(url); // change to location=url;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<section class="booking booking-inner">
<div class="section-header hidden">
<div class="container">
<h2 class="title">Booking & reservations</h2>
</div>
</div>
<div class="booking-wrapper">
<div class="container">
<div class="row">
<!--=== date arrival ===-->
<div class="col-xs-4 col-sm-3">
<div class="date" id="dateArrival" data-text="Arrival">
<input class="datepicker" readonly="readonly" />
<div class="date-value"></div>
</div>
</div>
<!--=== date departure ===-->
<div class="col-xs-4 col-sm-3">
<div class="date" id="dateDeparture" data-text="Departure">
<input class="datepicker" readonly="readonly" />
<div class="date-value"></div>
</div>
</div>
<!--=== guests ===-->
<div class="col-xs-4 col-sm-2">
<div class="guests" data-text="Guests">
<div class="result">
<input class="qty-result" type="text" value="0" id="qty-result" readonly="readonly" />
<div class="qty-result-text date-value" id="qty-result-text"></div>
</div>
<!--=== guests list ===-->
<ul class="guest-list">
<li class="header">
Please choose number of guests <span class="qty-apply"><i class="icon icon-cross"></i></span>
</li>
<!--=== adults ===-->
<li class="clearfix">
<!--=== Adults value ===-->
<div>
<input class="qty-amount" value="0" type="text" id="ticket-adult" data-value="0" readonly="readonly" />
</div>
<div>
<span>Adults <small>16+ years</small></span>
</div>
<!--=== Add/remove quantity buttons ===-->
<div>
<input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-adult" />
<input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-adult" />
</div>
</li>
<!--=== chilrens ===-->
<li class="clearfix">
<!--=== Adults value ===-->
<div>
<input class="qty-amount" value="0" type="text" id="ticket-children" data-value="0" readonly="readonly" />
</div>
<!--=== Label ===-->
<div>
<span>Children <small>2-11 years</small></span>
</div>
<!--=== Add/remove quantity buttons ===-->
<div>
<input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-children" />
<input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-children" />
</div>
</li>
</ul>
</div>
</div>
<!--=== button ===-->
<div class="col-xs-12 col-sm-4">
<a href="reservation-1.html" class="btn btn-clean">
Book now
<small>Best prices guaranteed</small>
</a>
</div>
</div>
<!--/row-->
</div>
<!--/booking-wrapper-->
</div>
<!--/container-->
</section>