Question

我想通过每次使用相同的表格来获取给定人的n个（比如n == 5）个孩子的名字。我似乎无法生成完成这个简单任务的javascript代码。

for (var i = 0; i<5; i++){
<form id="child_form">
  Child name:
  <input type="text" id="child_name" name="child_nm" size="40">
  <br>
  <input type="button"  value="Submit" onclick="myFunction()">
</form>
}

<script language="javascript">

<script>
function myFunction() {
add_child_to_array();
}

var array_of_children = []; 
function add_child_to_array(){
var input_string = document.getElementById("child_name").value;
alert(input_string);
array_of_inputs.push(input_string);
}
</script>

但显然不能那样做。

我尝试从表单中取出数据，然后重置表单。事实证明，你可以做到，但不能两者都做。

我还没有找到处理此问题的网站。

非常感谢帮助。

Answer 1

这当然有点混乱。假设我理解正确，您需要在javascript中创建表单，因此可以根据需要动态添加它。我写了一个通用的方法来做到这一点。您可能想要更改/简化它。我确保所有元素都是动态的，以便可以正确访问。另外，我使用过JQuery，我强烈建议。

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script type="text/javascript">
        $(function(){

            var allForms = document.getElementById("all-forms");

            for(var i = 0;i<5;i++){
                 form = document.createElement("div");
                 form.id = "form-" + i.toString();
                 if(i!=0){
                    form.style.display = "none";
                 }
                 input = document.createElement("input");
                 input.id = "child_name"+i;
                 input.placeholder = "input"+i;
                 submit = document.createElement("button");
                 submit.innerHTML = "go"+i;
                 submit.id = "submit-"+i;
                 submit.className = "buttons";
                 form.appendChild(input);
                 form.appendChild(submit);
                 allForms.appendChild(form);


            }

            $(".buttons").click(function(){
                var id = $(this).attr("id").substring(7);
                $("#form-"+id).hide();
                var nextID = (parseInt(id)+1).toString();
                $("#form-"+nextID).show();
            });

          });

    </script>
 </head>
 <body>
    <div id = "all-forms"></div>


 </body>
 </html>

Answer 2

您有多种选择来完成此任务。我更喜欢使用HTML5 template元素功能。

您可以自己选择create和append DOM元素。

Javascript重用表单

2 个答案: