将div转换为生成链接的GET表单

Question

我正在开发一个包含预订窗口小部件的网站，但是我需要将其转换为GET格式，以打开包含该信息的网址。我对编码知之甚少，所以我在尝试这样做时遇到了麻烦。代码如下：

这个想法是，当点击按钮时，会生成以下网址：https://sampleurl.com/booking/checkin/checkout/adults/children

示例：2019年1月22日办理登机手续，2019年1月25日退房，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

Answer 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.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>