如何使用Javascript输出HTML表单数据？

我撞到了一堵墙。使用当前JS，当用户点击“添加”时，如何在class=“househouse”中输出当前表单字段结果

*我仍然希望保留删除功能

我不能只编辑HTML。非常感谢您的帮助。谢谢

HTML

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

JS

函数验证（表单）{
fail=validateAge（form.age.value）
fail+=validateRel（form.rel.value）
如果（fail==“”）返回true
否则{
警报（失败）；
返回错误
}
}
功能验证（字段）{
if（isNaN（字段））返回“未输入年龄。\n”
else if（字段<1 | |字段>1000）
return“年龄必须大于0。\n”
返回“”
}
函数validateRel（字段）{
如果（字段==“”）返回“请选择关系\n”
返回“”
}
document.querySelector（“form”）.onsubmit=function（）{
返回验证（此）
}
document.querySelector（“.add”）.onclick=function（）{
createinput（）
};
计数=0；
函数createinput（）{
field_area=document.querySelector（“.househouse”）
var li=document.createElement（“li”）；
var输入=document.createElement（“输入”）；
input.id='字段'+计数；
input.name='字段'+计数；
input.type=“text”；//字段类型-可以是任何有效的输入类型，如文本、文件、复选框等。
li.追加子项（输入）；
场区面积（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）；
计数++
}

添加按钮正在提交表单。您可以通过在处理程序函数中调用

event.preventDefault（）

来防止这种情况

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

---

将添加按钮更改为

type=“button”

。默认值是

type=“submit”

，因此它正在提交表单。@Barmar“我不能只编辑HTML JS”我意识到用户可以使用JS来更改它，而不是简单地更改HTMLIt工作中的属性！战斗已经进行了一半，我需要实际显示值，而不是输入字段。最好的方法是什么？显示用户添加的内容的值。

document.getElementById（someID）。value

将获取输入字段的值。要显示什么输入，以及在何处显示？将

onchange

属性添加到新的输入字段，以运行获取

此.value

的函数并显示它。嘿，Barmar，我必须在所有这些字段中使用“name”，因为没有ID：/

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 > 1000)
            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() {
        createinput()
    };

    count = 0;
    function createinput() {
        field_area = document.querySelector('.household')
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = 'field' + count;
        input.name = 'field' + count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
        //create the 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++
    }

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