如何在當前表單中添加新字段？

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