Add / remove input field dynamically with jQuery
Jquery Code
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
HTML CODE
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
I took the liberty of putting together a jsFiddle illustrating the functionality of building a custom form using jQuery. Here it is...
EDIT: Updated the jsFiddle to include remove buttons for each field.
EDIT: As per the request in the last comment, code from the jsFiddle is below.
EDIT: As per Abhishek's comment, I have updated the jsFiddle (and code below) to cater for scenarios where duplicate field IDs might arise.
HTML:
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a field" class="add" id="add" />
JavaScript:
$(document).ready(function() {
$("#add").click(function() {
var lastField = $("#buildyourform div:last");
var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
fieldWrapper.data("idx", intId);
var fName = $("<input type=\"text\" class=\"fieldname\" />");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$("#preview").click(function() {
$("#yourform").remove();
var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
$("#buildyourform div").each(function() {
var id = "input" + $(this).attr("id").replace("field","");
var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
var input;
switch ($(this).find("select.fieldtype").first().val()) {
case "checkbox":
input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textbox":
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textarea":
input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
break;
}
fieldSet.append(label);
fieldSet.append(input);
});
$("body").append(fieldSet);
});
});
CSS:
body
{
font-family:Gill Sans MT;
padding:10px;
}
fieldset
{
border: solid 1px #000;
padding:10px;
display:block;
clear:both;
margin:5px 0px;
}
legend
{
padding:0px 10px;
background:black;
color:#FFF;
}
input.add
{
float:right;
}
input.fieldname
{
float:left;
clear:left;
display:block;
margin:5px;
}
select.fieldtype
{
float:left;
display:block;
margin:5px;
}
input.remove
{
float:left;
display:block;
margin:5px;
}
#yourform label
{
float:left;
clear:left;
display:block;
margin:5px;
}
#yourform input, #yourform textarea
{
float:left;
display:block;
margin:5px;
}
You need to create the element.
input = jQuery('<input name="myname">');
and then append it to the form.
jQuery('#formID').append(input);
to remove an input you use the remove functionality.
jQuery('#inputid').remove();
This is the basic idea, you may have feildsets that you append it too instead, or maybe append it after a specific element, but this is how to build anything dynamically really.