动态创建表单元素答案

【问题标题】：dynamically create form elements动态创建表单元素
【发布时间】：2017-10-16 18:20:34
【问题描述】：

您好，我有 HTML 表单，我正在尝试在按钮单击事件上创建表单的 div 部分。我有像下面这样的带有 javascript 的 HTML 代码，但它没有在按钮单击事件之后添加表单元素。我需要像在 Person div 元素中一样创建所有行和单元格以及输入文本框，并在我们单击 AddPerson 按钮时附加或添加到 Div-Person 中。我还有一些包含其他输入元素的 Div 元素，在单击与该 Div 标签关联的按钮后，我需要添加或创建这些元素。这里是带有 3 个输入字段和一个按钮的一个 Div 元素的示例代码。非常感谢您的帮助。i 或 j 变量的值必须递增。它总是取 i =1 有问题吗？

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample</title>

    <style type="text/css">
        form
        {
            width: 600px;
            background-color:#FA7300;
            margin: 0px auto;
            overflow: hidden;
        }
    </style>
    <script>
    var i=1;
    var j=1;
    //create Person section

    function CreatePerson(divName)
    {
     var y= document.createElement('div');
     y.innerHTML="<br/><input type='text' name='Key_Firstname_'+i+1><br/><input type='text' name='Key_lastname_'+i+1><br/><input type='text' name='Key_DOB_'+i+1>";

     document.getElementById(divName).appendChild(y);
    }




    </script>
</head>
<body>
 <form method="post" name="mainfrm" action="">



    <fieldset style="border:0px; background-color: #ffffff; margin-left:50px; width:500px">

        <table style="width: 100%">
            <tr>
                <td style="width:125px">&nbsp;

                </td>
                <td style="width:375px">&nbsp;

                </td>

            </tr>
            <tr>
            <td>Acc NUMBER</td>
                <td align="left">
                    <input name="Key_Acc_Number_1" size="35" type="text" />
                </td>

            </tr>
            <tr>
            <td>Branch NUMBER</td>
                <td align="left">
                    <input name="Key_BNumber_1" size="35" type="text" />
                </td>

            </tr>
            <tr><td align="center" COLSPAN="2"> <b>PERSON</b><td></tr>
            <div id="Person">

            <tr>
            <td>First Name</td>
                <td align="left">

                    <input name="Key_FirstName_1" size="35" type="text" />
                </td>
                </tr>
                <tr>
            <td>Last Name</td>
                <td align="left">

                    <input name="Key_Lastname_1" size="35" type="text" />
                </td>
                </tr>
                <tr>
                <td>DOB</td>
                <td align="left">

                    <input name="Key_DOB_1" size="35" type="text" />
                </td>
                <td><button onClick="CreatePerson('Person')">Add Person</button>
                </td>
                </tr>
                </div>
                </table>
                </fieldset>
                 </form>
</body>
</html>

我为此修改了 javascript 函数，它还在页面顶部创建了 2 个名字和姓氏文本框，但一旦代码从 java 脚本结束，这些文本框就会消失。

var i=2;
var j=2;
function CreatePerson(divName)
    {
     var Y= document.createElement("div");
     Y.id=divName+i;
    // Y.innerHTML="<tr> 
    var appendText="<tr><td>First Name</td><td align="+"left"+"><input name="+"Key_FirstName_"+i+" size="+"35"+" type="+"text"+" /></td></tr><tr><td>Last Name</td></tr><tr><td align="+"left"+"><input name="+"Key_lastName_"+i+" size="+"35"+" type="+"text"+" /></td></tr>"; 

Y.innerHTML=appendText;
     document.getElementById(divName).after(Y);
     i++;
    }

【问题讨论】：

y.innerHTML="<br/><input type='text' name='Key_Firstname_'+i+1><br/><input type='text' name='Key_lastname_'+i+1><br/><input type='text' name='Key_DOB_'+i+1>; 缺少结尾 "
你需要把你的js放在底部
不，你不知道@MohitC - CreatePerson 函数在头部定义，在它被应用到的 div 之前存在，但它没有被调用直到 onClick 处理程序触发；并且只能在整个 DOM 加载和渲染后触发。如果您想谈论最佳实践，最好将您的 JS 放在一个完全独立的 .js 文件中，并从 DOMContentLoaded 事件（或 jquery $(document).ready()）中触发事情
另外，由于<button> 元素default to type="submit"，我建议设置type="button" 和/或从您的JavaScript 函数返回false。
您粘贴的代码在y.innerHTML = 末尾缺少一个结束引号（"）

标签： javascript html forms

【解决方案1】：

试试这个

<form method="POST">
     <div id="dynamicInput">
          Entry 1<br><input type="text" name="myInputs[]">
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

dynamically add form elements via JavaScript

【讨论】：

稍微解释一下会很有帮助。问题是什么？您的代码是如何解决的？
是的，您所做的不仅仅是添加人们提到的缺少的关闭引号"。其他你改变了什么？ 为什么你做出了改变？为什么以前没有工作？（更新你的答案，不要在 cmets 中向我解释；我已经知道我在这里提出的 3 个问题的答案）
我需要添加整个 div 部分，例如 TR、TD。我不知道该怎么做。我在我的 javascript 代码中使用了
。
@user2897967 “我需要添加整个 div 部分，例如 TR, TD” - 你没有在你的问题中这么说，我认为这应该是一个单独的一旦解决了基本错误（来自此问题），就会提出问题。首先，只要能够简单地添加 something。
@user2897967 您可能希望edit your question 包含您的最新代码（没有错字）并澄清出了什么问题。