如何在当前表单中添加新字段？

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"]); 
    } 
}