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?
source to share
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.
source to share
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.
source to share