Home/ Questions/Q 6469117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T05:57:15+00:00

I am trying to build a system like when any user clicks on an

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0