Question

我制作了一个动态生成的表单，用于创建一些选择和输入框。

我需要进行表单提交，并需要选择和输入所有数据到单个变量中。

代码如下：

HTML CODE：

<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">
    <div id="main"></div>
</form>

JS CODE：

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

};

JSFIDDLE同样的事情：

我基本上想要做的是我需要所有名称为“text1”，“text2”，“text3 in different var's（变量）”的文本框。

我听说过jQuery .serialize，但它会对我的事业有所帮助吗，如果有人能在我的小提琴中向我展示同样的事情，那将会很好。

Answer 1

使用FormData()方法序列化您的表单：

document.getElementByid('autoPopulation_form').onSubmit = function(){
    var frmData = new FormData(this);
    console.log(frmData);
};

输出（点击+一次测试）：

?tag1=Stocks&acctType1=individual&compare1=contains
 &match_name1=scrapedaccounttype
 &text1=gsdfgsdgfsgsdfgsdf"

注意： 您必须有提交按钮才能提交表单。

从动态生成的表单提交

1 个答案:

Fiddle

Fiddle with method post