I am trying to create dynamic form where user can add dynamic text-fields based on their requirement. Here is my jquery code ..
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length +1;
var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(lname);
fieldWrapper.append(removeButton);
fieldWrapper.append(addButton);
$(this).remove();
$("#buildyourform").append(fieldWrapper);
});
});
and Html code is ...
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<div class="fieldwrapper" name="field1" id="field1" />
<input type="text" name="name" class="fieldname" id="tb1_1" />
<input type="text" name="email" class="lastname" id="tb1_2" />
<input type="button" value="+" class="add" id="add" />
</div>
</fieldset>
<input type="submit" value="send" id="asdasd" name="submit" />
Check my JSFiddle also.
Whats wrong with me is when user click on "+" button first time then click function working and it adds two text-fields into my fieldset. But after that when i click on "+" button, its not triggering click function. May be id conflict. Please help.
This question is related to
javascript
jquery
html
After making the id
unique across the document
,You have to use event delegation
$("#container").on("click", "buttonid", function () {
alert("Hi");
});
You need to use a delegated event handler, as the #add
elements dynamically appended won't have the click event bound to them. Try this:
$("#buildyourform").on('click', "#add", function() {
// your code...
});
Also, you can make your HTML strings easier to read by mixing line quotes:
var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');
Or even supplying the attributes as an object:
var fieldWrapper = $('<div></div>', {
'class': 'fieldwrapper',
'name': 'field' + intId,
'id': 'field' + intId
});
The click event is not bound to your new element, use a jQuery.on
to handle the click.
Source: Stackoverflow.com