Generate JSON string from form on change to populate business-hours

Question

I have the following html input's

<form id="test" role="form">
    <input class="form-control" data-day="monday" type="time" name="open" value="12:00">
    <input class="form-control" data-day="monday" type="time" name="close" value="20:00">
    <!-- Rest of the weekdays -->
    <input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
    <input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>

<pre id="output"></pre>

i try to generate a JSON string based on the input (on change) .. The problem with my code is that it update (and only) al the values of the other days when i change sunday.

if i make a change on the other day's nothing happens, i kinda get it why it fails, but breaking my head to long on it now.

 function toJSONString(form) { var daysObj = {} var hoursObj = {}; var elements = form.querySelectorAll("input[type='time']"); for (var i = 0; i < elements.length; ++i) { var element = elements[i]; var days = element.dataset.day; var name = element.name; var value = element.value; //if (days) { //if (name) { hoursObj[name] = value; //} daysObj[days] = hoursObj; //} } return JSON.stringify(daysObj, null, 2); } document.addEventListener("DOMContentLoaded", function() { var form = document.getElementById("test"); var output = document.getElementById("output"); form.addEventListener("change", function(e) { e.preventDefault(); var json = toJSONString(this); output.innerHTML = json; }, false); }); 

 <form id="test" role="form"> <input class="form-control" data-day="monday" type="time" name="open" value="12:00"> <input class="form-control" data-day="monday" type="time" name="close" value="20:00"> <!-- Rest of the weekdays --> <input class="form-control" data-day="sunday" type="time" name="open" value="12:00"> <input class="form-control" data-day="sunday" type="time" name="close" value="23:00"> </form> <pre id="output"></pre> 

Answer 1

Use the input event instead of change as a change event only occurs after an input loses focus. input events are triggered every time the input's value changes

form.addEventListener("input",function(){})

You are also using the same hours object for each day. And thus each iteration you are just changing the same object's open and close property.

You need to create a new object for hoursObj after you have set the last property for that object for that day, in your case after setting close

for (var i = 0; i < elements.length; ++i) {
  //previous code
  //...

  if(name=="close"){
     hoursObj = {};
  }
}

Demo

 function toJSONString(form) { var daysObj = {} var hoursObj = {} var elements = form.querySelectorAll("input[type='time']"); for (var i = 0; i < elements.length; ++i) { var element = elements[i]; var days = element.dataset.day; var name = element.name; var value = element.value; hoursObj[name] = value; daysObj[days] = hoursObj; if(name=="close"){ hoursObj = {}; } } return JSON.stringify(daysObj); } document.addEventListener("DOMContentLoaded", function() { var form = document.getElementById("test"); var output = document.getElementById("output"); form.addEventListener("input", function(e) { e.preventDefault(); var json = toJSONString(this); output.innerHTML = json; }, false); }); 

 <form id="test" role="form"> <input class="form-control" data-day="monday" type="time" name="open" value="12:00"> <input class="form-control" data-day="monday" type="time" name="close" value="20:00"> <!-- Rest of the weekdays --> <input class="form-control" data-day="sunday" type="time" name="open" value="12:00"> <input class="form-control" data-day="sunday" type="time" name="close" value="23:00"> </form> <pre><code id="output"></code></pre>