如何即时向当前表单添加新字段？

Question

假设我们在 HTML 页面中有一个表单。通过填充特定字段或为某些单选按钮或选择标签选择值来显示和消失某些字段是一种非常常见的行为。这可以使用 Java 脚本来完成。我想知道是否可以通过触发 ajax 调用向 CURRENT 表单添加一些新字段。这可能吗？

如果我想通过 ajax 调用与服务器通信来在页面上添加一些新字段，我应该在页面中添加一个包含这些字段的新表单还是可以使用我当前的表单？

Answer 1

是的，只需将用于附加表单的代码放在 ajax 成功回调中即可。 这是一个 jsfiddle，假设您从 ajax 调用中获取 json。 只需在第二个字段中输入 ajax（模拟进行 ajax 调用的条件），它会抓取一个虚假的 json 响应，并会根据该数据生成带有字段名称的额外字段。

http://jsfiddle.net/ua47escq/1/

<ul>
<form action="" id ="myform">

<li> some field <input type="text"> </li>
<li> other field <input type="text" id = "myinput"></li>
<input type="submit" name="submit" id="submit">

</form>
</ul>
<script>
var myinput = document.getElementById("myinput");
var form = document.getElementById("myform");
var submit = document.getElementById("submit");
var fragment = document.createDocumentFragment();
var fakejson = JSON.stringify([{
                "fieldname": "dynamic field1"
            }, {
                "fieldname": "dynamic field2"
            }, {
                "fieldname": "dynamic field3"
            }]);

myinput.addEventListener("keyup", function(evt) {
        if (evt.target.value == "ajax") {
            sucsess(fakejson);
        }
    });


function appendform(name) {
    var li = document.createElement("li");
    var newinput = document.createElement("input");
    newinput.setAttribute('type', 'text');
    newinput.setAttribute('name', name);
    li.textContent = name;
    li.appendChild(newinput);
   form.insertBefore(li, submit);


}

function sucsess(data) {

    var json = JSON.parse(data);
    for (key in json) {
        appendform(json[key]["fieldname"]);
    }
}