動態創建表單元素

Question

您好，我有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++;
    }

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++;
     }
}

通過JavaScript動態添加表單元素

動態創建表單元素

問題描述

1 個解決方案

解決方案1
-1 2017-10-16 18:33:20

動態創建表單元素

問題描述

1 個解決方案

解決方案1 -1 2017-10-16 18:33:20

解決方案1
-1 2017-10-16 18:33:20