HTML/Javascript表单如何在提交时序列化“li”数据？

Question

这是我的问题：

当用户点击“提交”时，我需要表单序列化，JSON数据显示在class =“debug”中，包括列表项数据（如果添加了用户）。

目前，我看到的唯一数据是当我点击“提交”时输入字段中的内容，如果我添加用户，则不是列表项。除了在输入字段中提交的内容之外，我还需要列表项（如果我添加用户）。

我如何用我目前的Javascript来做到这一点？

不能使用jQuery。无法编辑HTML。只有纯粹的Javascript。

谢谢&美国新年快乐！

HTML

<div class="builder"> 
    <ol class="household"></ol> 
    <form> 
     <div> 
      <label>Age 
       <input type="text" name="age"> 
      </label> 
     </div> 
     <div> 
      <label>Relationship 
       <select name="rel"> 
        <option value="">---</option> 
        <option value="self">Self</option> 
        <option value="spouse">Spouse</option> 
        <option value="child">Child</option> 
        <option value="parent">Parent</option> 
        <option value="grandparent">Grandparent</option> 
        <option value="other">Other</option> 
       </select> 
      </label> 
     </div> 
     <div> 
      <label>Smoker? 
       <input type="checkbox" name="smoker"> 
      </label> 
     </div> 
     <div> 
      <button class="add">add</button> 
     </div> 
     <div> 
      <button type="submit">submit</button> 
     </div> 
    </form> 
</div> 
<pre class="debug"></pre> 

JS

function go() { 
     var debug_class = document.querySelectorAll(".debug"); 
     for (var i = 0; i < debug_class.length; i++) { 
      var element = debug_class[i]; 
      element.innerText = JSON.stringify(serializeArray(document.querySelector("form"))); 
     } 

    } 

    function serializeArray(form) { 
     var field, l, s = []; 
     if (typeof form == 'object' && form.nodeName == "FORM") { 
      var len = form.elements.length; 
      for (i = 0; i < len; i++) { 
       field = form.elements[i]; 
       if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') { 
        if (field.type == 'select-multiple') { 
         l = form.elements[i].options.length; 
         for (j = 0; j < l; j++) { 
          if (field.options[j].selected) 
           s[s.length] = { 
            name: field.name, 
            value: field.options[j].value 
           }; 
         } 
        } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) { 
         s[s.length] = { 
          name: field.name, 
          value: field.value 
         }; 
        } 
       } 
      } 
     } 
     return s; 
    } 


    function validate(form) { 
     fail = validateAge(form.age.value) 
     fail += validateRel(form.rel.value) 

     if (fail == "") return true 
     else { 
      alert(fail); 
      return false 
     } 
     go(); 
    } 

    function validateAge(field) { 
     if (isNaN(field)) return "No age was entered. \n" 
     else if (field < 1 || field > 200) 
      return "Age must be greater than 0. \n" 
     return "" 
    } 

    function validateRel(field) { 
     if (field == "") return "Please select a relationship \n" 
     return "" 
    } 

    document.querySelector("form").onsubmit = function() { 
     return validate(this) 
    } 

    document.querySelector(".add").onclick = function(event) { 
     go(); 
     event.preventDefault(); 
     createinput() 
    } 

    count = 0; 

    function createinput() { 
     field_area = document.querySelector('.household') 
     var li = document.createElement("li"); 
     var p1 = document.createElement("p"); 
     var p2 = document.createElement("p"); 
     var p3 = document.createElement("p"); 
     var x = document.getElementsByName("age")[0].value; 
     var y = document.getElementsByName("rel")[0].value; 
     var z = document.getElementsByName("smoker")[0].checked; 
     if (!z) { 
      z = "Non smoker \n"; 
     } else { 
      z = "Smoker \n"; 
     } 
     p1.innerHTML = x; 
     p2.innerHTML = y; 
     p3.innerHTML = z; 
     li.appendChild(p1); 
     li.appendChild(p2); 
     li.appendChild(p3); 
     field_area.appendChild(li); 
     //removal link 
     var removalLink = document.createElement('a'); 
     removalLink.onclick = function() { 
      this.parentNode.parentNode.removeChild(this.parentNode) 
     } 
     var removalText = document.createTextNode('Remove Field'); 
     removalLink.appendChild(removalText); 
     li.appendChild(removalLink); 
     count++ 
    } 

    // serialize form 

    var data = {}; 
    var inputs = [].slice.call(inputs.target.querySelector('form')); 
    inputs.forEach(input => { 
     data[input.name] = input.value; 
    }); 

Answer 1

的JavaScript通过自然不能发布通过典型的动态HTML表格元素 '提交' 按钮。这对jQuery来说相当简单，但你说你不能使用它。此外，您的HTML结构通过原始JavaScript处理表单提交时相当笨拙，因为您无法编辑它以将表单提交附加一个函数（也不会更改HTML）。

您还需要在提交之前序列化表单，该表单在没有jQuery的情况下很笨重。有很多库可以做到这一点，但是你可能需要一个基于你的代码结构的库。关于如何做到这一点的大量例子可以参见here。

// Sample serialization function structure 
function serialize(form) { 
    // Serialize 
} 

你会那么需要从形式创建一个JavaScript元素，手动附加一个事件监听器，防止表单提交，序列化数据，并手动重新提交。

const element = document.querySelector('form'); 
element.addEventListener('submit', event => { 
    event.preventDefault(); 
    serialize(element); 
    element.submit(); 
}); 

一个复杂的过程，您可能希望查看整个过程的替代方法。但是，我希望这能够解决你的问题:)