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

I am having a dynamic form which creates fields dynamically by pressing "+" button.

我有一个动态表单,通过按“+”按钮动态创建字段。

This form is not binded in the document but generated when we click the + button. I need to access the form values, how do I achieve that.

此表单未在文档中绑定,但在单击+按钮时生成。我需要访问表单值,我该如何实现。

what should I use form "get" or "post" .

我应该使用什么形式“获取”或“发布”。

I have tried by using formdata object or jQuery serialize() but with no success or actually I couldn't figure out a way how to use it correctly .

我尝试过使用formdata对象或jQuery serialize()但没有成功或实际上我无法弄清楚如何正确使用它。

JSFIDDLE LINK :

JSFIDDLE链接:

code:

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

2 个解决方案

#1

You are going to find this funny, but your code is fine exept that your selector is wrong when serializing. You forgot the # because you are selecting an ID. Check your updated Fiddle here: http://jsfiddle.net/veritas87/3542N/8/

你会发现这很有趣,但你的代码很好,因为序列化你的选择器是错误的。你忘记了#,因为你正在选择一个ID。在这里查看更新的小提琴:http://jsfiddle.net/veritas87/3542N/8/

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

#2

I'm going to take a guess here that you are trying to access them from within Javascript.

我将在这里猜测你是否试图从Javascript中访问它们。

If that is the case, the easiest way to give the elements a unique id.

如果是这种情况,最简单的方法是为元素提供唯一的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");

You can also give them a name property, in which case you can access them through the form element, or document.getElementsByName. Just be aware the second one will return an array of items, or null.

您还可以为它们提供名称属性,在这种情况下,您可以通过表单元素或document.getElementsByName访问它们。请注意第二个将返回一个项目数组,或null。

#1

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

#2