Automatiacally Generating text input and dropdown select on click using javascript/Jquery

Question

I am trying to build a system like when any user clicks on an "Add" button, it creates two text fields and two drop down selects automatically. I searched on google for the tutorial but all I have managed to find is only how to add text fields, but I need to add Select drop down with remove option.

I have some knowledge in PHP but little in Javascript or Jquery.

Would you please kindly help?

Here is the code that I have found:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>
function generateRow() {

var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='food'>";

var e=document.getElementById("div");
e.innerHTML+="<input type='text' name='food'>";

}
</script>
</head>

<body>
 <form id="form1" name="form1" method="post" action="">
<label>
 <input name="food" type="text" id="food" />
</label>

  <div id="div"></div>
  <p><input type="button" value="Add" onclick="generateRow()"/></p>
  <p>
  <label>
   <input type="submit" name="Submit" value="Submit" />
  </label>
  </p>
  </form>
  </body>
 </html>

gilly3 · Accepted Answer · 2011-09-02 15:52:42Z

1

In jQuery, to create an element, you can simply do this:

var newDiv = $("<div>");

Now, that element doesn't yet exist in the page. You can add it many ways. One common approach is to append it to an existing element. This will append the new div to the body element:

newDiv.appendTo("body");

This too:

$("body").append(newDiv);

And this will append it to an element with an id of "foo":

newDiv.appendTo("#foo");

So, assuming you want to generate the following HTML each time the button is clicked:

<div>
    <input name="a" />
    <input name="b" />
    <select name="c">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
    </select>
    <select name="d">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
    </select>
</div>

And assuming you want to add that HTML to your div with an id of "div", your code might look something like this:

$("input[type=button][value=Add]").click(function (e) {
    e.preventDefault(); // prevent submitting the form.
    var newDiv = $("<div>").appendTo("#div");
    $("<input>").attr("name", "a").appendTo(newDiv);
    $("<input>").attr("name", "b").appendTo(newDiv);
    $("<select>").attr("name", "c").appendTo(newDiv).append(
        $("<option>").val("0").text("Option 1"),
        $("<option>").val("1").text("Option 2"));
    $("<select>").attr("name", "d").appendTo(newDiv).append(
        $("<option>").val("0").text("Option 1"),
        $("<option>").val("1").text("Option 2"));
});

Here's a working example: http://jsfiddle.net/v5kvX/

Edit: Including a remove button. You'll want to create a <button> the same way we created our other elements, then add a click handler that removes the parent div. Add this line to your function from above:

$("<button>").text("Remove").appendTo(newDiv).click(function (e) {
    e.preventDefault(); // prevent submitting the form.
    $(this).parent().remove(); // alternatively, you could say: newDiv.remove();
});

Updated example: http://jsfiddle.net/gilly3/v5kvX/1/

edited Sep 2, 2011 at 15:52

answered Sep 2, 2011 at 5:21

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

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

3 Comments

black_belt Over a year ago

thank you very much for such a wonderful tutorial. It is working fine and it is exactly what I wanted. I am going through the codes and trying to figure out how things are happening. :) thanks again

black_belt Over a year ago

hi, gilly3, how to include a remove button to delete the textfields and dropdown selects if added mistakenly? Thanks again for your wonderful tutorial. :)

gilly3 Over a year ago

@Srijon - You hopefully have enough to at least create the button, but probably need help with its click handler. You'll want to call .remove() on the button's parent div, ie newDiv. See my updated answer.

Roko C. Buljan · Accepted Answer · 2011-09-02 05:30:57Z

1

here is an example i hope you'll get the idea

http://jsfiddle.net/AKJwF/1/

jQuery:

$("#gr").click(function(){

    $("<input/>",{type:"text",class:"textinp"}).appendTo("#textFieldContainer");
   $("<input/>",{type:"text",class:"textinp"}).appendTo("#textFieldContainer");

});

$("#gs").click(function(){

    $("<select/>",{class:"sel"}).appendTo("#selectContainer");
   $("<select/>",{class:"sel"}).appendTo("#selectContainer");

});

And the HTML:

<div id="textFieldContainer"></div>    
<div id="selectContainer"></div>

<a href="#" id="gr">Generate Row</a>
<a href="#" id="gs">Generate DropDown</a>

edited Sep 2, 2011 at 5:30

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Sep 2, 2011 at 5:05

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

2 Comments

Roko C. Buljan Over a year ago

With the due respect I added the code to SO. (for future generations)

Rafay Over a year ago

@roXon thats what i should have done in the first place, and i thank you on the behalf of future generations :)

Collectives™ on Stack Overflow

Automatiacally Generating text input and dropdown select on click using javascript/Jquery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related