如何訪問動態表單的元素（輸入，選擇）

我有一個動態表單，它通過按下「+」按鈕來動態創建字段。如何訪問動態表單的元素（輸入，選擇）

此表單未綁定在文檔中，而是在單擊+按鈕時生成。我需要訪問表單值，我該如何實現。

我應該使用「get」或「post」形式。

我試過使用formdata對象或jQuery序列化（）但沒有成功或實際上我無法弄清楚如何正確使用它的方法。

的jsfiddle LINK：

代碼：

HTML：

<body> 
    <div id="main1"> 
     <input type="button" onclick="addSelectBox()" name="clickme" value="+" /> 
     <input type="button" onclick="removeSelect();" value="-" /> 
     <input type="button" onclick="xmlData();" value="XML" /> 
    </div> 
    <form id="autoPopulation_form" method='post'> 
     <div id="main"></div> 
     <input type="submit" /> 
    </form> 
</body>

JS：

var selele = 0; 
    var brindex = 0; 

    function addSelectBox() { 

     selele = selele + 1; 
     var spantag = document.createElement("span"); 
     spantag.setAttribute("id", selele); 

     var parentDiv = document.getElementById("main"); 
     var selectElement = document.createElement("select"); 
     var selectElement1 = document.createElement("select"); 
     var selectElement2 = document.createElement("select"); 
     var selectElement3 = document.createElement("select"); 
     var textbox = document.createElement('input'); 
     textbox.setAttribute("name", "text" + selele); 

     var arr = new Array("Stocks", "MutualFunds"); 
     var arr2 = new Array("individual", "401k", "IRA"); 
     var arr3 = new Array("contains", "equals"); 
     var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype"); 

     for (var i = 0; i < arr.length; i++) { 
      var option = new Option(arr[i]); 
      selectElement.options[selectElement.options.length] = option; 
      selectElement.setAttribute("name", "tag" + selele); 
     } 


     for (var i = 0; i < arr2.length; i++) { 
      var option = new Option(arr2[i]); 
      selectElement1.options[selectElement1.options.length] = option; 
      selectElement1.setAttribute("name", "acctType" + selele); 
     } 

     for (var i = 0; i < arr3.length; i++) { 
      var option = new Option(arr3[i]); 
      selectElement2.options[selectElement2.options.length] = option; 
      selectElement2.setAttribute("name", "compare" + selele); 
     } 
     for (var i = 0; i < arr4.length; i++) { 
      var option = new Option(arr4[i]); 
      selectElement3.options[selectElement3.options.length] = option; 
      selectElement3.setAttribute("name", "match_name" + selele); 
     } 



     spantag.appendChild(selectElement); 
     spantag.appendChild(selectElement1); 
     spantag.appendChild(selectElement2); 
     spantag.appendChild(selectElement3); 
     spantag.appendChild(textbox); 


     parentDiv.appendChild(spantag); 
     linebreak(); 

    }; 

    function removeSelect() { 
     var parentDiv = document.getElementById("main"); 
     var removetg = document.getElementById(selele); 
     if (selele != 1) { 
      parentDiv.removeChild(removetg); 
      selele = selele - 1; 


     } else { 
      parentDiv.removeChild(removetg); 
      parentDiv.innerHTML = ""; 
      selele = selele - 1; 
     } 
     removeBreak(); 
    }; 

    function linebreak() { 

     brindex = brindex + 1; 
     var brtag = document.createElement("br"); 
     brtag.setAttribute("id", brindex); 
     var parentDiv = document.getElementById("main"); 
     parentDiv.appendChild(brtag); 
    }; 

    function linespace() { 

     var myElement = document.createElement("span"); 
     myElement.innerHTML = "&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp"; 
     var parentDiv = document.getElementById("main"); 
     parentDiv.appendChild(myElement); 
    }; 

    function removeBreak() { 
     var myElement = document.getElementById(brindex); 
     var parentDiv = document.getElementById("main"); 
     brindex = brindex - 1; 
     parentDiv.removeChild(myElement); 
    }; 

    function xmlData() { 


     xmlDoc = loadXMLDoc("data.xml"); 

     newel = xmlDoc.createElement("edition"); 

     x = xmlDoc.getElementsByTagName("span")[0]; 
     x.appendChild(newel); 

    }; 
    window.onload = function() { 
     $("autoPopulation_form").on("submit", function(event) { 
    event.preventDefault(); 
    console.log($(this).serialize()); 
}); 
    };

來源

2014-03-12 rahul888

你會發現這個有趣的，但你的代碼是罰款exept是序列化時，你的選擇器是錯誤的。你忘了＃因爲你選擇了一個ID。在這裏檢查更新小提琴：http://jsfiddle.net/veritas87/3542N/8/

window.onload = function() { 
     $("#autoPopulation_form").on("submit", function(event) { 
       event.preventDefault(); 
       console.log($(this).serialize()); 
     }); 
    };

來源

2014-03-12 08:02:18

是的，謝謝:)阿哈..！現在我該如何分別使用這個變量tag1 =「Stocks」和match_name1 =「scrapedaccounttype」來做更多的操作 – rahul888

我要採取這裏猜測，您試圖在JavaScript訪問它們。

如果是這種情況，最簡單的方法是給元素一個唯一id。

var selectElement = document.createElement("select"); 
    selectElement.id = "select_0"; 

    var selectElement1 = document.createElement("select"); 
    selectElement1.id = "select_1"; 

    var selectElement2 = document.createElement("select"); 
    selectElement1.id = "select_2"; 

    var selectElement3 = document.createElement("select"); 
    selectElement1.id = "select_3"; 

    var desiredSelect = document.getElementById("select_3");

您也可以給他們一個name屬性，在這種情況下，你可以通過form元素，或document.getElementsByName訪問它們。請注意第二個會返回數組的項目，或者返回null。

來源

2014-03-12 08:05:50

如何訪問動態表單的元素（輸入，選擇）

回答

相關問題