Question

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

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

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

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

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

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 个答案: