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

Question

我有一個動態表單，可以通過按“ +”按鈕動態創建字段。

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

我應該使用“ get”或“ post”形式。

我已經嘗試過使用formdata對象或jQuery serialize（），但是沒有成功，或者實際上我找不到一種正確使用它的方法。

JSFIDDLE 鏈接：

碼：

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() );
});
    };

Answer 1

您會發現這很有趣，但是您的代碼可以證明您的選擇器在序列化時是錯誤的。 您忘記了＃號，因為您正在選擇一個ID。 在此處檢查更新的小提琴： http : //jsfiddle.net/veritas87/3542N/8/

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

Answer 2

我將在這里猜測您正在嘗試從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。

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

問題描述

2 個解決方案

解決方案1
1 2014-03-12 08:02:18

解決方案2
0 2014-03-12 08:05:50

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

問題描述

2 個解決方案

解決方案1 1 2014-03-12 08:02:18

解決方案2 0 2014-03-12 08:05:50

解決方案1
1 2014-03-12 08:02:18

解決方案2
0 2014-03-12 08:05:50