Creating a Form Widget that Sends Data

There are a lot of third party services that use variables from a url to populate options. From booking apps to job boards, we can pre-populate the users preferred options ahead of time, before linking them off to said service, to create a more unified experience.

The following example is for a popular booking engine called Direct Book but the principles are the same.

Assuming we've already created the HTML for the form as seen above, we do the first thing. Let's not let a user submit the form until after we validate it:

                    
                    // submittable only after validation
const $form = $('#form');
const $inputs = $form.find('#checkInDate, #checkOutDate, #itemsAdults, #itemsChildren');
const $buttons = $form.find('#book');
$form.on('input', function() {
  let areFieldsValid = true;
  $.each($inputs, function() {
    const $input = $(this);
    if ($input.val() === '') {
      areFieldsValid = false;
    }
  });
  $buttons.prop('disabled', !areFieldsValid);
});
                    
                    

Above, we define the form, fields and submit button and create a listener to ensure that all the fields are filled before removing the "disabled" attribute from the submit button.

Next, let's make sure we don't show past dates in the date field. That's just not good UX.

                    
                    //don't show past dates
$(function(){
    var dtToday = new Date();
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    var maxDate = year + '-' + month + '-' + day;
    $('#checkInDate').attr('min', maxDate);
});
                    
                    

Next, we might have to enforce some business rules through validation. In this example, let's say there's a two night minimum:

                    
                    // 2 night minimum
$("#checkOutDate").on("change", function() {
  var startDate = new Date($("#checkInDate").val());
  var endDate = new Date($("#checkOutDate").val());
  if (startDate && endDate) {
    var diffDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
    if (diffDays < 2) {
      const toastLiveExample = document.getElementById('liveToast')
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
      toastBootstrap.show();
    }
  }
});
                    
                    

Lastly, let's append our validated information to our action url:

                    
                    //post values to new url
$('#book').click(function() {
  // Define the base URL
  let url = "https://bluecoastweb.com?";

  // Loop through each input and select field in the form
  $('#form').find('input, select').each(function() {
      let fieldName = $(this).attr('name');
      let fieldValue = $(this).val();
      url += fieldName + "=" + encodeURIComponent(fieldValue) + "&";
  });

  // Remove the trailing "&"
  url = url.slice(0, -1);

  alert(url);
  // window.location.href = url;
});
                    
                    

Above, we commented out the actual submission in favor of a window alert for testing. Here's a link to the completed pen.

Hope this helps. If you see a way to improve this, please share your ideas in the comments.