CODEWITHSUNDEEP
javascripthtmldom-events
user2180069
user2180069

Reputation: 25

How can I create textbox on click function

I am trying to create two text box and one select box on button click function, but as I am filling boxes created by one click and on another click all the filled details get vanished.

I want the detail as I fill to be able to post in database ?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script>
            var counter=1;
            function generateRow() {
                var d=document.getElementById("div");
                d.innerHTML+="<p>&nbsp;&nbsp;&nbsp;&nbsp;<div class='_25'><input type='textbox' id='textbox"+counter+"' name='stop"+counter+"' placeholder='Stop Name'></input></div>&nbsp;&nbsp;&nbsp;<div class='_25'><input type='textbox' id='textbox"+counter+"' name='timing"+counter+"' placeholder='Timing'></input></div>&nbsp;<div class='_25'><strong>Select Route</strong><select id='ampm"+counter+"'name='ampm"+counter+"'><option>a.m</option><option>p.m</option></select>  </div>";
                counter++;
            }
        </script>
    </head>
    <body>
        <form id="form1" name="form1" method="post" action="">
            <div id="div"></div>
            <p><input type="button" value="Add" onclick="generateRow()"/></p>
            <p>
        </form>
    </body>
</html>

Upvotes: 0

Views: 903

Answers (2)

Raheel Hasan
Raheel Hasan

Reputation: 6023

First get d.innerHTML into another variable and new html in another variable. Then concat both of them and save in innerhtml

However, you should be building with insertBefore or appendChild functionality instead of the simple innerHTML.

Upvotes: 0

muneebShabbir
muneebShabbir

Reputation: 2538

you can try this way

var temp ="'<p>&nbsp;&nbsp;&nbsp;&nbsp;<div class='_25'><input type='textbox' id='textbox"+counter+"' name='stop"+counter+"' placeholder='Stop Name'></input></div>&nbsp;&nbsp;&nbsp;<div class='_25'><input type='textbox' id='textbox"+counter+"' name='timing"+counter+"' placeholder='Timing'></input></div>&nbsp;<div class='_25'><strong>Select Route</strong><select id='ampm"+counter+"'name='ampm"+counter+"'><option>a.m</option><option>p.m</option></select>  </div>'";

var newdiv = document.createElement('div');
newdiv.innerHTML = temp;
var yourDiv = document.getElementById('div');
yourDiv.appendChild(newdiv);

hope it will work

Upvotes: 1

Related Questions