How do I create a text box on the click function

advertisements

I am trying to create 2 text box and 1 select box on button click function, but as I am filling boxes created by 1 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>

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

Related Articles

How to dynamically open a text box at the click of a button

I want to open a Text box on this button click (create it in runtime, when user clicks the button), and store a string. private void button5_Click(object sender, RoutedEventArgs e) { TextBox dynamicTextBox = new TextBox(); dynamicTextBox.Text = "Type

create a text box in the .docx document by using apache poi

I want create a text box in a document .docx but I didn´t find a method that help me do it and any example. Someone know how can i do it?Inserting a real Word Text-box is not fully possible with apache-poi until now. A real Word Text-box is contained

How do you stop a text box displaying the default context menu?

I've noticed something wierd with the WinForm TextBox's Context Menu. The TextBox control has a default context menu that has Cut, Copy, Paste and a few other things. I am trying to replace this menu with one of my own. I have created a simple test a

Create a text box on the link pane

I want to create a text area on the mouse hover in given link. What I've tried is there in this fiddle code. But I want to create text area dynamically when mouse over on the link. This text area will set on the right side (when click on the link) an

Copy the href value in a text box to the click

I'm trying to copy the value (the displayed name) of the link onClick to the textbox. Is it possible ? The following is my sloppy attempt to make it work - <div class="service_list"> <ul style="list-style-type:square; display:none;

How do I create a text box that accepts only numbers by hiding?

This question already has an answer here: How do I make a textbox that only accepts numbers? 29 answers I have got a text box in WinForms which is just for entering phone numbers. how can I do it by just masking it. I have used if instruction but i w

Create a text box on a click

Initially when the page loads the table will be displayed normally but when I click on the edit label it should make the first name value as text box to make it editable. I will enter the value and hit enter it will submit the form. I am really confu

Create KendoUI text boxes of the same width

I have the following cshtml Login form: <div class="editor-label"> @Html.LabelFor(model => model.UserEmailAddress) </div> <div class="editor-field"> @Html.EditorFor(model => model.UserEmailAddress, new {@class =

How to Set the Cursor Position of a Text Box on the Click

I'm required to have a textbox pre-filled with some text, and want the cursor to default to the beginning of the textbox when it is focused. private void txtBox_Enter(object sender, EventArgs e) { if (this.txtBox.Text == "SOME PREFILL TEXT") { t