CODEWITHSUNDEEP
javascriptjquery
black_belt
black_belt

Reputation: 6799

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

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>

Upvotes: 1

Views: 1818

Answers (2)

gilly3
gilly3

Reputation: 91487

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/

Upvotes: 1

Rafay
Rafay

Reputation: 31033

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>

Upvotes: 1

Related Questions