Question

想象一下，我们在HTML页面中有一个表单。通过填充特定字段或为某些单选按钮或选择标记选择值，某些字段显示和消失是一种非常常见的行为。这可以使用Java Script完成。我想知道是否可以通过触发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"]);
    }
}

如何动态地向当前表单添加新字段？

1 个答案: