Question

您好我有HTML表单，我正在尝试在按钮单击事件上创建表单的div部分。我有像下面的javascript的HTML代码，但它没有在按钮单击事件后添加表单元素。我需要在Person div元素中创建所有行和单元格以及输入文本框，并在单击AddPerson按钮时附加或添加Div-Person。我有一些Div元素包含其他输入元素，我需要在点击与Div标签关联的按钮后添加或创建。下面是One Div元素的示例代码，包含3个输入字段和一个按钮。非常感谢帮助.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++;
    }

Answer 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

动态创建表单元素

1 个答案: