时间戳

首页 > 解决方案 > 在更改时从表单生成 JSON 字符串以填充营业时间

javascript - 在更改时从表单生成 JSON 字符串以填充营业时间

问题描述

我有以下 html 输入

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

我尝试根据输入（更改时）生成一个 JSON 字符串。我的代码的问题是它更新（并且仅）我更改星期天时其他日子的值。

如果我在前几天做出改变什么都没有发生，我有点明白它为什么会失败，但现在让我头疼不已。

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>

标签： javascripthtmljsonstring

解决方案

使用input事件而不是change事件change仅在输入失去焦点后发生。input每次输入值更改时都会触发事件

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

您还每天使用相同的 hours 对象。因此，每次迭代您只是更改相同的对象open和close属性。

您需要在hoursObj为该对象设置当天的最后一个属性之后创建一个新对象，在您的情况下，在设置之后close

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

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

演示

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>

推荐阅读