Nick's Form

by andyjh07

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<form data-appliance-manufacturer="" data-appliance-type="" data-appliance-fitting="" data-postcode="" data-phone-number="" data-appointment-date="" data-appointment-time-slot="" data-name="" data-quote="" data-address="" data-additional-notes="" id="quote-form">
  <div class="row">
    <div class="form-group col-md-6">
      <label for="appliance_manufacturer">Appliance Manufacturer</label>
      <select name="appliance_manufacturer" id="appliance_manufacturer" class="form-control">
          <option value="" selected="selected">Select Brand</option>
          <option value="Admiral">Admiral</option>
          <option value="AEG">AEG</option>
          <option value="Airforce-Spa">Airforce-Spa</option>
          <option value="Ariston">Ariston</option>
          <option value="Baumatic">Baumatic</option>
          <option value="Beko">Beko</option>
          <option value="Belling">Belling</option>
          <option value="Bissell">Bissell</option>
          <option value="Blaupunkt">Blaupunkt</option>
          <option value="Bosch">Bosch</option>
          <option value="Britannia">Britannia</option>
          <option value="Candy">Candy</option>
          <option value="Cannon">Cannon</option>
          <option value="Caple">Caple</option>
          <option value="CDA">CDA</option>
          <option value="Creda">Creda</option>
          <option value="Daewoo">Daewoo</option>
          <option value="DeDietrich">DeDietrich</option>
          <option value="Delonghi">Delonghi</option>
          <option value="Dyson">Dyson</option>
          <option...

SCSS

body {
  padding: 40px;
}

JavaScript

const form = $('form#quote-form');
let quote = '';

$('#appliance_manufacturer').on('change', function() {
  form.attr('data-appliance-manufacturer', $(this).val());
});

$('#appliance_type').on('change', function() {
  form.attr('data-appliance-type', $(this).val());
});

$('input[name="appliance-fitting"]').on('change', function() {
  form.attr('data-appliance-fitting', $(this).val());
});

$('#postcode').on('change', function() {
  form.attr('data-postcode', $(this).val());
});

$('#phone-number').on('change', function() {
  form.attr('data-phone-number', $(this).val());
});

$("#appointment-date").datepicker({
  "dateFormat": "dd/mm/yy",
  "minDate": new Date(),
  "maxDate": +14
}).on('change', function() {
  form.attr('data-appointment-date', $(this).val());
});

$('#appointment-time-slot').on('change', function() {
  form.attr('data-appointment-time-slot', $(this).val());
});

$('#name').on('change', function() {
  form.attr('data-name', $(this).val());
});

$('#address').on('change', function() {
  form.attr('data-address', $(this).val());
});

$('#additional-notes').on('change', function() {
  form.attr('data-additional-notes', $(this).val());
});

$(document.body).on('click', '#submit-form', function(e) {
  e.preventDefault();
  let formData = {};
  
  if (form.attr('data-appliance-manufacturer') == 'Miele' || form.attr('data-appliance-manufacturer') == 'Rangemaster') {
    form.attr('data-quote', '75');
  } else if (form.attr('data-appliance-fitting') == 'freestanding') {
    form.attr('data-quote', '55');
  } else if (form.attr('data-appliance-fitting') == 'built-in') {
    form.attr('data-quote', '65');
  }
  
  formData['appliance-manufacturer'] = form.attr('data-appliance-manufacturer');
  formData['appliance-type'] = form.attr('data-appliance-type');
  formData['appliance-fitting'] = form.attr('data-appliance-fitting');
  formData['postcode'] = form.attr('data-postcode');
  formData['phone-number'] = form.attr('data-phone-number');
 ...