How can I create textbox on click function

Question

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>

Why don't you put everything inside a div and set it invisible. So when you click the button, just copy and paste HTML inside the div — Doan Cuong
– Doan Cuong, Commented Apr 8, 2013 at 13:01
When you say all the details vanish, do you mean that the data is cleared or the elements themselves disappear? — guruprasath
– guruprasath, Commented Apr 8, 2013 at 13:02

muneebShabbir · Accepted Answer · 2013-04-08 13:07:09Z

1

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

answered Apr 8, 2013 at 13:07

muneebShabbir

2,5384 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

muneebShabbir Over a year ago

add this logic in 'generateRow()' function and dont forget to ++ your counter

user2180069 Over a year ago

i hv posted something this code is workiing fine on frnt end but as i am posting the form only 1 details ie of the very last input fields are getting posted but i want the value filled in all the created boxes to get posted

muneebShabbir Over a year ago

check name and ids of your elements, are they same? or different? is your counter logic works correctly?

user2180069 Over a year ago

although i hv incremented the counter ant the end of function

user2180069 Over a year ago

Shabbir now its woking i had just made a mistake ... i was just increasing the id with the counter as i was doing with name :that was my mistake::)

|

Raheel Hasan · Accepted Answer · 2013-04-08 13:07:09Z

0

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.

answered Apr 8, 2013 at 13:07

Raheel Hasan

6,0634 gold badges48 silver badges76 bronze badges

Collectives™ on Stack Overflow

How can I create textbox on click function

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related