HTML/Javascript表单如何将表单数据序列化为JSON并显示在类中？

非常直截了当

当用户单击“提交”时，我需要序列化表单并在类“debug”中显示JSON数据

如何使用当前的Javascript实现这一点

无法使用jQuery。无法编辑HTML。只有纯Javascript

谢谢

HTML

年龄
关系
---
自己
配偶
小孩
父母亲
祖父母
其他
吸烟者？
添加
提交

JS

函数验证（表单）{
fail=validateAge（form.age.value）
fail+=validateRel（form.rel.value）
如果（fail==“”）返回true
否则{
警报（失败）；
返回错误
}
}
功能验证（字段）{
if（isNaN（字段））返回“未输入年龄。\n”
否则如果（字段<1 | |字段>200）
return“年龄必须大于0。\n”
返回“”
}
函数validateRel（字段）{
如果（字段==“”）返回“请选择关系\n”
返回“”
}
document.querySelector（“form”）.onsubmit=function（）{
返回验证（此）
}
document.querySelector（“.add”）.onclick=函数（事件）{
event.preventDefault（）；
createinput（）
}
计数=0；
函数createinput（）{
field_area=document.querySelector（“.househouse”）
var li=document.createElement（“li”）；
var p1=document.createElement（“p”）；
var p2=document.createElement（“p”）；
var p3=document.createElement（“p”）；
var x=document.getElementsByName（“年龄”）[0]。值；
var y=document.getElementsByName（“rel”）[0]。值；
var z=document.getElementsByName（“smoker”）[0]。已选中；
如果（！z）{
z=“非吸烟者\n”；
}否则{
z=“吸烟者\n”；
}
p1.innerHTML=x；
p2.innerHTML=y；
p3.innerHTML=z；
李.儿童（p1）；
li.儿童（p2）；
li.儿童（p3）；
场区面积（li）；
//拆卸连杆
var removalLink=document.createElement（'a'）；
removalLink.onclick=函数（）{
this.parentNode.parentNode.removeChild（this.parentNode）
}
var removalText=document.createTextNode（'Remove Field'）；
appendChild（removalText）；
li.appendChild（removalLink）；
计数++
}
//序列化表单
变量数据={}；
var inputs=[].slice.call（e.target.querySelector（'form'）；
inputs.forEach（输入=>{
数据[input.name]=input.value；
});

遍历表单，抓取各个元素并为每个元素创建新对象，然后设置每个对象的属性并推送到最终数组，这将相当容易地解决您的问题

然后，您只需使用

querySelectorAll

匹配

.debug

，使用

JSON.stringify（）

将数组转换为字符串，并使用

innerText

设置内容

例如：

函数go（）{ var debug_class=document.querySelectorAll（“.debug”）； 对于（var i=0；i

连载！
最短可能的解决方案（纯javascript）：

文件：
我很熟悉这张表格，因为我申请了同样的职位。这是一项有趣的任务。这里是你的答案与纯js


var peopleList=[]；
var addButton=document.querySelector（'button.add'）；
var submitButton=document.querySelector（'button[type=submit]'）；
var debug=document.querySelector（'pre.debug'）；
var mainForm=document.forms[0]；
var ageFormField=mainForm.age；
var relationshipFormField=mainForm.rel；
var smokerFormField=mainForm.smoker；
var positionFormField=mainForm.position；
//取自https://www.inventpartners.com/open-source/free-web-software/javascript_is_int
函数为整（值）{
if（（parseFloat（value）==parseInt（value））&&&！isNaN（value））{
返回true；
}否则{
返回false；
}
}
函数formIsValid（）{
返回ageFormField.value！=''&&is_int（ageFormField.value）&&relationshipFormField.selectedIndex！=0&&positionFormField.value！=''；
}
函数updateDebug（）{
if（peopleList.length！=0）{
debug.innerText=JSON.stringify（peopleList）；
setAttribute（'style'，'display:block'）；
submitButton.disabled=假；
}否则{
debug.innerText=''；
debug.removeAttribute（'style'）；
submitButton.disabled=
<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>

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

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

    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) {
        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(e.target.querySelector('form'));
    inputs.forEach(input => {
        data[input.name] = input.value;
    });

var form = document.querySelector('form');
var data = new FormData(form);