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

我有一个动态表单，它通过按下“+”按钮来动态创建字段。如何访问动态表单的元素（输入，选择）

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

我应该使用“get”或“post”形式。

我试过使用formdata对象或jQuery序列化（）但没有成功或实际上我无法弄清楚如何正确使用它的方法。

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

来源

2014-03-12 rahul888

你会发现这个有趣的，但你的代码是罚款exept是序列化时，你的选择器是错误的。你忘了＃因为你选择了一个ID。在这里检查更新小提琴：http://jsfiddle.net/veritas87/3542N/8/

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

来源

2014-03-12 08:02:18

是的，谢谢:)阿哈..！现在我该如何分别使用这个变量tag1 =“Stocks”和match_name1 =“scrapedaccounttype”来做更多的操作 – rahul888

我要采取这里猜测，您试图在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。

来源

2014-03-12 08:05:50

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

回答

相关问题