如何访问动态表单的元素（输入，选择）

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