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 */
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;
}

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

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

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

div.request_custom_fields_360000218138 {
    overflow: hidden;
}

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

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

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

div.request_custom_fields_360000214617 {
	overflow: hidden;
}

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

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

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>';

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

  var isNumberKidsValid = function(value) {
    // todo: validate value!
    if (value < 0 || value > 50) {
      return false;
    }
    return true;
  }

  var writeChildrenAgesToInputfield = function() {
    // TODO: write ages like 1,2,4 to age of each child field
    childrenAges = [];
   ...