CODEWITHSUNDEEP
javascripthtmlforms
user2897967
user2897967

Reputation: 337

dynamically create form elements

Hello I have HTML form and I am trying to create div sections of the form on button click event. I have HTML code with javascript like below but it is not adding form elements after the button click event. I need to create the all the rows and cells along with input text boxes as in Person div element and append or add in the Div- Person when we click on AddPerson button. I have some more Div elements which contains other input elements which I need to add or create after clicking the button associated with that Div tag.. Here is sample code for One Div element with 3 input fields and one button. Help would be highly appreciated.The value of i or j variable must be incremented . It is always taking i =1 is it a problem? 

!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>

I modified javascript function to this it is also creating 2 First name and last name text boxes at the top of the page but as soon as code is existing from java script end those text boxes disappeared.

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

Upvotes: 0

Views: 588

Answers (1)

Sanjay kumar
Sanjay kumar

Reputation: 1673

try this

<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

Upvotes: -1

Related Questions