Преобразование div в форму GET, которая генерирует ссылку

Я работаю над веб-сайтом, который включает виджет бронирования, но мне нужно преобразовать его в форму GET, которая открывает URL-адрес с информацией. Я не очень разбираюсь в кодировании, поэтому у меня проблемы с этим. Код следующий:

Идея состоит в том, что при нажатии кнопки создается следующий URL-адрес: https://sampleurl.com/booking/checkin/checkout/adults/children

Пример: заезд 22 января 2019 г., выезд 25 января 2019 г., 2 взрослых и 1 ребенок:

https://sampleurl.com/booking/2019-01-22/2015-01-25/2/1

Любые идеи? Вероятно, это просто сделать, но я хочу поддерживать все css, и я не знаю, как сгенерировать URL-адрес из формы. Спасибо вам за вашу помощь!

// 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>

Тема, если вам интересно, следующая: http://www.elathemes.com/themes/colina/index.html

🤔 А знаете ли вы, что...
С помощью JavaScript можно создавать клиентские приложения для мобильных устройств с использованием фреймворков, таких как React Native и NativeScript.


32
1

Ответ:

Решено

Так что снимаю неплотно}); и добавил клик:

  $(".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.info(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.info(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>