Search jQuery

jQuery Forum

Using jQuery Plugins

richard1

add and remove form elements

in Using jQuery Plugins • 8 years ago

Hi thanks for taking to the time to help me on this. I have some jquery code (see below)

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 class="col-xs-12"><div class="row"><div class="col-xs-9"><div class="form-group"><label>Postage Description:</label><input type="text" class="form-control" value=""/></div></div><div class="col-xs-2"><div class="form-group"><label>Postage Price:</label><input type="text" class="form-control" value=""/></div></div><div class="remove_field"><span class="glyphicon glyphicon-remove"></span><div></div></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})

the code adds html which contains form elelments (input) is there anyway to add name="" and id="" to each form field? preferably with a prefx? something like;

var prefix = anything

so when the plus sign is clicked to add the elements to the dom the input fields would have name="anything_01" id="anything_01" then the next one which is added has name="anything_02" id="anything_02" etc... etc...

help much appreciated.

Many thanks

Replies(4)

Sµßhrånil∂

Re: add and remove form elements

8 years ago

$(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 prefix = 'anything';
$add_button.click(function(e){ //on add input button click
var count = $wrapper.find('.col-xs-12').length;
e.preventDefault();
if(count < max_fields){ //max input box allowed
$wrapper.append('<div class="col-xs-12"><div class="row">\
<div class="col-xs-9"><div class="form-group"><label>Postage Description:</label>\
<input type="text" class="form-control" name="'+prefix+'_'+count+'" id="'+prefix+'_'+count+'" value=""/></div></div>\
<div class="col-xs-2"><div class="form-group"><label>Postage Price:</label>\
<input type="text" class="form-control" value=""/></div></div>\
<div class="remove_field"><span class="glyphicon glyphicon-remove"></span><div></div>\
</div>'); //add input box
}
});
$wrapper.on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('.col-xs-12').remove(); x--;
});
});

Each div you have two input fields, i put name and id for first input, put name and id for the second element same with different prefix value otherwise id and name will be duplicated.

Sµßhrånil∂

Re: add and remove form elements

8 years ago

Also you need to update the id after removing one element. like if you have 3 divs then input value ids will be like something_0, something_1, something_2.

Now if you remove the 2nd one then you will have 2 divs with input ids like
something_0 and something_2 and then if you click add again it will add a 3rd div and input id will something_2

So after removing a div you need to update the id and name accordingly.

Here is complete script

$(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 prefix1 = 'anything';
var prefix2 = 'anything_else';
$add_button.click(function(e){ //on add input button click
var count = $wrapper.find('.col-xs-12').length;
e.preventDefault();
if(count < max_fields){ //max input box allowed
$wrapper.append('<div class="col-xs-12"><div class="row">\
<div class="col-xs-9"><div class="form-group"><label>Postage Description:</label>\
<input type="text" class="form-control" name="'+prefix1+'_'+count+'" id="'+prefix1+'_'+count+'" value=""/></div></div>\
<div class="col-xs-2"><div class="form-group"><label>Postage Price:</label>\
<input type="text" class="form-control" name="'+prefix2+'_'+count+'" id="'+prefix2+'_'+count+'" value=""/></div></div>\
<div class="remove_field"><span class="glyphicon glyphicon-remove">Remove</span><div></div>\
</div>'); //add input box
}
});
$wrapper.on("click",".remove_field", function(e){ //user click on remove text
$(this).parents('.col-xs-12').remove();
$wrapper.find('.col-xs-12').each(function(i){
$(this).find('input[type="text"]:first').attr({"id": prefix1+'_'+i, "name":prefix1+'_'+i});
$(this).find('input[type="text"]:last').attr({"id": prefix2+'_'+i, "name":prefix2+'_'+i});
});
});
});

See it here http://jsfiddle.net/n6jw8gx9/

richard1

Re: add and remove form elements

8 years ago

Excellent - thank you very much

watusiware

Re: add and remove form elements

8 years ago

IDs with numbered suffixes are almost always a bad idea. They scream out "there is a better way to do this".

Why do you think you need these IDs? What do you use them for?

You can index into table rows and lists by ordinal without needing an ID for each item, for example. You only need an ID on the parent element. (e.g. <table> or <ul> or <ol>)

Renumbering IDs is madness, leading to insanity. (i.e. it will eventually "drive you nuts").

Top Reply

Response title

Attachments

jQuery Forum

add and remove form elements

Replies(4)

Re: add and remove form elements

Re: add and remove form elements

Re: add and remove form elements

Re: add and remove form elements

Statistics

Tags

Actions