FormTest

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div id="heading">
<h2 style="padding:10px;">
Gateway Configuration:
</h2>
</br>
</div>

<div id="subH1">
<h4>Thresholds:</h4>
</div>

<div name="thresholds" id="thresholds" class="bd-callout bd-callout-green">
<form action="#" method="post">
<!--- New --->
	<div class="row">
	   <div class="col-lg-6">
		  <div class="input-group">
			 <span class="label-span">Speed Threshold:</span>
			 <input type="text" class="form-control" placeholder="144" name="speed_threshold" id="speed_threshold" value="">
			 <span class="input-group-addon" id="basic-addon2">kp/h</span>
		  </div>
	   </div>
	   <div class="col-lg-6">
		  <div class="input-group">
			 <span class="label-span">RPM Threshold:</span>
			 <input type="text" class="form-control" placeholder="3500" name="rpm_threshold" id="rpm_threshold" value="">
			 <span class="input-group-addon" id="basic-addon2">RPM</span>
		  </div>
	   </div>
	   <div class="col-lg-6">
		  <div class="input-group">
			 <span class="label-span">Coolant Threshold:</span>
			 <input type="text" class="form-control" placeholder="107" name="coolant_threshold" id="coolant_threshold" value="">
			 <span class="input-group-addon" id="basic-addon2">°C</span>
		  </div>
	   </div>
	   <div class="col-lg-6">
		  <div class="input-group">
			 <span class="label-span">Acceleration Threshold:</span>
			 <input type="text" class="form-control" placeholder="0.6" name="acceleration_threshold" id="acceleration_threshold" value="">
			 <span class="input-group-addon" id="basic-addon2">mps2</span>
		  </div>
	   </div>
	   <div class="col-lg-6">
		  <div class="input-group">
			 <span...

CSS

form div {
    margin-bottom: 0.5em;
    padding-left: 10px;
}
form div label, form div input {
    display: block;
    margin-bottom: 0.3em;
}

p {
    padding-left: 10px;
}

#heading {
  padding-left: 10px;
}

#subH1 {
  text-align: center;
}

#subH2 {
  text-align: center;
}

.bd-callout-green {
    border-left-color: #CEDC00 !important;
}

.bd-callout-orange {
    border-left-color: #F19F3F !important;
}

.bd-callout {
    margin-left: 30px;
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.label-span {
      padding-top: 10px;
      padding-right: 10px;
      margin-bottom: .5rem;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.1;
      color: inherit;
}

JavaScript

(function ($) {
    $.fn.serializeFormJSON = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

$('form').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeFormJSON();
    var obj = {};
    obj.thresholds = data;
    obj.timers = data;
    
    
    
    console.log(obj);
});

var json = {
  "thresholds": {
    "speed_threshold": "144",
    "rpm_threshold": "3500",
    "coolant_threshold": "107",
    "acceleration_threshold": "0.6",
    "deceleration_threshold": "-0.6",
    "idle_threshold": "800",
    "fuel_level_threshold": "5.0",
    "accel_magnitude_threshold": "1"
  },
  "timers": {
    "default_interval": "2500",
    "periodic_interval": "120000",
    "accelerometer_interval": "100",
    "idle_threshold_interval": "300000",
    "periodic_movement_timer_interval": "8000"
  },
  "inputs":{},
  "outputs":{}
};

(function ($) {
  for(key in json)
  {
    if(json.hasOwnProperty(key))
    var strTest = 'input[name='+key+']';
      $(strTest).val(json[key]);
      
     $(speed_threshold).val(json.thresholds.speed_threshold);
     $(rpm_threshold).val(json.thresholds.rpm_threshold);
     $(coolant_threshold).val(json.thresholds.coolant_threshold);
     $(acceleration_threshold).val(json.thresholds.acceleration_threshold);
     $(deceleration_threshold).val(json.thresholds.deceleration_threshold);
     $(idle_threshold).val(json.thresholds.idle_threshold);
     $(fuel_level_threshold).val(json.thresholds.fuel_level_threshold);
     $(accel_magnitude_threshold).val(json.thresholds.accel_magnitude_threshold);
			
      
     //console.log('Testing:',...