JQuery: finding a way to name cloned input fields
I'm not the best at using jQuery, but I do require it to be able to make my site user friendly.
I have multiple tables associated with my site and every user should be able to add / remove rows. I created a jquery function using stackoverflow and added / removed lines successfully. Now the only problem with that is the names for these input fields are a bit confused. I would like each input field to be an array: so name [0] for the first line, name [1] for the second line, etc. I have a group of tables with different inputs, so how can I make jQuery adjust the names accordingly?
My function doesn't work completely, but I don't know how to change it.
My Jquery function looks like this:
$(document).ready(function() {
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
clone.find("select").val('');
clone.find('input').each(function(i) {
$(this).attr('name', $(this).attr('name') + i);
});
clone.find('select').each(function(i) {
$(this).attr('name', $(this).attr('name') + i);
});
tr.after(clone);
});
$("body").on('click', '.delete_row', function() {
var rowCount = $(this).closest('.row').prev('table').find('tr.ia_table').length;
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
if (rowCount > 1) {
tr.remove();
};
});
});
I also created a jsFiddle here: https://jsfiddle.net/tareenmj/err73gLL/ .
Any help is appreciated.
UPDATE - Partial working solution
After the help of many users, I was able to create a function that does this:
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
clone.find("select").val('');
clone.find('input').each(function() {
var msg=$(this).attr('name');
var x=parseInt(msg.split('[').pop().split(']').shift());
var test=msg.substr(0,msg.indexOf('['))+"[";
x++;
x=x.toString();
test=test+x+"]";
$(this).attr('name', test);
});
clone.find('select').each(function() {
var msg1=$(this).attr('name');
var x1=parseInt(msg1.split('[').pop().split(']').shift());
var test1=msg1.substr(0,msg1.indexOf('['))+"[";
x1++;
x1=x1.toString();
test1=test1+x1+"]";
$(this).attr('name', test1);
});
tr.after(clone);
});
A working jsFiddle is here: https://jsfiddle.net/tareenmj/amojyjjn/2/
The only problem is that if I don't select any of the options in the select inputs, it won't give me a null value then it should. Any advice on how to fix this issue?
Complete solution for anyone who needs it
So, after doing loads and loads of research, I found a very simple way to do this. Instead of manually setting the array name, I realized that the clone method will do this automatically for you if you specify the array as a name. So something like name = "name []" will work. Brackets without text should be there. The explanation cannot fully describe the code, so here is the JQuery code required for this behavior:
$(document).ready(function() {
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});
$("body").on('click', '.delete_row', function() {
var rowCount =
$(this).closest('.row').prev('table').find('tr.ia_table').length;
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
if (rowCount > 1) {
tr.remove();
};
});
});
Here's a complete working JSfiddle: https://jsfiddle.net/tareenmj/amojyjjn/5/
Just a tip that you should remove the disabled selection as this will not pass null.
I think I understand your problem. See if this fiddle works ...
This is what I did, inside each of the functions clone.find()
, I added the following logic ...
clone.find('input').each(function(i) {
// extract the number part of the name
number = parseInt($(this).attr('name').substr($(this).attr('name').indexOf("_") + 1));
// increment the number
number += 1;
// extract the name itself (without the row index)
name = $(this).attr('name').substr(0, $(this).attr('name').indexOf('_'));
// add the row index to the string
$(this).attr('name', name + "_" + number);
});
Basically, I split name
into 2 parts based on _
, row and row index. I am incrementing the row index every time it is called add_row
.
So each line will have the following structure when adding a line ...
// row 1
sectionTB1_1
presentationTB1_1
percentageTB1_1
courseTB1_1
sessionTB1_1
reqElecTB1_1
// row 2
sectionTB1_2
presentationTB1_2
percentageTB1_2
courseTB1_2
sessionTB1_2
reqElecTB1_2
// etc.
Let me know if this is what you were looking for.