InputChild_sendesk

by mtenschert

HTML

<form id="new_request" data-form="" data-form-type="request" class="request-form" action="/hc/en-us/requests" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="7sO9S3Vm9ZqhFGNv25v87D1VeCCkNLQHbx5Q6+zymUhHDIwGm0ybCmc7jxtZbKB6ljkQN+pbqaWAHnFByf3o1A==">
  <div class="form-field string  optional  request_custom_fields_360000217518" style="display: block;">
    <label for="request_custom_fields_360000217518">No. of kids</label>
    <input type="number" name="request[custom_fields][360000217518]" id="request_custom_fields_360000217518" step="1" aria-required="false">
  </div>
  <ul id="child_fields"></ul>
  <div class="form-field string  optional  request_custom_fields_360000217538" style="display: block;">
    <label for="request_custom_fields_360000217538">Age for each kid</label>
    <input type="text" name="request[custom_fields][360000217538]" id="request_custom_fields_360000217538" aria-required="false">
  </div>
  <footer><input type="submit" name="commit" value="Submit"></footer>
</form>

CSS

/* mtenschert: form general customized css */

.nesty-panel {
  max-height: 310px !important;
  text-transform: uppercase;
}

/* hide form */

div.form {
  display: none;
}

input[type=checkbox] {
  -ms-transform: scale(1.4);
  /* IE */
  -moz-transform: scale(1.4);
  /* FF */
  -webkit-transform: scale(1.4);
  /* Safari and Chrome */
  -o-transform: scale(1.4);
  /* Opera */
  padding: 5px;
}

.form-field {
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
  background-color: #f1f1f3;
}

textarea {
  border-radius: 5px;
}

/* Email */

div.request_anonymous_requester_email {}

div.request_custom_fields_360000199997 {
  float: left;
  width: 48%;
  margin-right: 2%;
  margin-bottom: 25px;
}

div.request_custom_fields_360000218138 {
  overflow: hidden;
}

div.request_custom_fields_360000199977 {
  width: 33%;
  float: left;
  margin-right: 2%;
}

/* NoChild */

div.request_custom_fields_360000217518 {
  float: left;
  width: 65%;
}

div.request_custom_fields_360000217558 {
  float: left;
  width: 50%;
  margin-bottom: 25px;
}

div.request_custom_fields_360000214617 {
  overflow: hidden;
}

div.request_custom_fields_360000217538 {
  display: none !important;
}

.request_custom_fields_360000218138 label {
  width: 95%;
  float: right;
}

.request_custom_fields_360000218138 input {
  float: left;
  margin-top: 3px;
  margin-left: 3px;
}

/* NoAdults */

.request_custom_fields_360000199977 label {
  margin-bottom: -3px;
}

/* NoChild */

.request_custom_fields_360000217518 label {
  margin-bottom: -3px;
}

/* bookingNo */

#request_custom_fields_360000507598,
/* name */

#request_custom_fields_360000217618,
#request_custom_fields_360000214617,
/* Email label */

#request_anonymous_requester_email,
.nesty-input {
  width: 60%;
}

/* mtenschert: child-age selection customized css */

/* NoChild */

input#request_custom_fields_360000217518,
/* NoAdults */

input#request_custom_fields_360000199977 {
  width: 70px;
}

select.form-control.child_age_selection {
 ...

JavaScript

$(document).ready(function() {

  $('.request_custom_fields_360000217518').append("<ul id='child_fields'></ul>");

  var lastNumber = 0;
  var $number_of_kids_input = $("#request_custom_fields_360000217518");
  var prototype = '<select class="form-control child_age_selection"><option value="2" label="2">2</option><option value="3" label="3">3</option><option value="4" label="4">4</option><option value="5" label="5">5</option><option value="6" label="6">6</option><option value="7" label="7">7</option><option value="8" label="8">8</option><option value="9" label="9">9</option><option value="10" label="10">10</option><option value="11" label="11">11</option><option value="12" label="12">12</option><option value="13" label="13">13</option><option value="14" label="14">14</option><option value="15" label="15">15</option><option value="16" label="16">16</option><option value="17" label="17">17</option></select>';
  var prototype_age_question = "<br><span style='margin-left: 2px;margin-top: 15px;display: block;font-style: italic;'>How old will be your children at the beginning of the rental?</span>"
  var childrenAges = [];
  var No_of_adults = '<small style="display: block;font-size: 95%;margin-bottom: 3px;font-style: italic;">over 18 years of age</small>';
  var No_of_kids = '<small style="display: block;font-size: 95%;margin-bottom: 3px;font-style: italic;">under 18 years of age</small>';
  var booking_number_label_small = '<small style="display: block;font-size: 95%;margin-bottom: 3px;font-style: italic;">You are able to find your booking number on your booking voucher</small>';
  var destination_label_small = '<small style="display: block;font-size: 95%;margin-bottom: 3px;font-style: italic;">Where you want to go to? E.g. Val Thorens, Sölden, Sestriere, ...</small>';

  // show age question, show No_of_adults, show No_of_kids
  $('#request_custom_fields_360000217518').after(prototype_age_question);
  $('div.request_custom_fields_360000199977...