Develop Reference

My validation does not work on added rows and autonumbering

I have a function where i can add rows and autonumbering. The add rows works when you click the "add row" button, and auto numbering works when you press Ctrl+Enter key when there's 2 or more rows. My problem is, my validation does not work on my autonumbering.
For example: when I type manually the "1" on the textbox, it works.
But when I do my auto numbering, "Not good" does not appear on my 2nd
textbox.
Is there anything I missed? Any help will be appreciated.
//this is for adding rows
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" value="" class="form" type="number" /> <span class="email_result"></span></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
//this is for my validation
$(document).on('change', 'input[name*=lightBand]', function() {
var lightBand1 = $(this).val(); //get value
var selector = $(this) //save slector
selector.next('.email_result').html("") //empty previous error
if (lightBand1 != '') {
/*$.ajax({
url: "<?php echo base_url(); ?>participant/check_number_avalibility",
method: "POST",
data: {
lightBand1: lightBand1
},
success: function(data) {*/
selector.next('.email_result').html("NOT GOOD"); //use next here ..
/* }
});*/
}
});
// this is for autonumbering when ctrl+enter is pressed.
const inputs = document.querySelectorAll(".form");
document.querySelectorAll(".form")[0].addEventListener("keyup", e => {
const inputs = document.querySelectorAll(".form");
let value = parseInt(e.target.value);
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
inputs.forEach((inp, i) => {
if (i !== 0) {
inp.value = ++value;
}
})
}
});
Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>Number</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
<span class="email_result"></span>
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

You can call your event handler i.e : change whenever you change your input values by auto numbering . So , use $(this).trigger("change") where this refer to input where value is changed .
Demo Code :
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" value="" class="form" type="number" /> <span class="email_result"></span></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
//this is for my validation
$(document).on('change', 'input[name*=lightBand]', function() {
var lightBand1 = $(this).val(); //get value
var selector = $(this) //save slector
selector.next('.email_result').html("") //empty previous error
if (lightBand1 != '') {
/*$.ajax({
url: "<?php echo base_url(); ?>participant/check_number_avalibility",
method: "POST",
data: {
lightBand1: lightBand1
},
success: function(data) {*/
selector.next('.email_result').html("NOT GOOD"); //use next here ..
/* }
});*/
}
});
// this is for autonumbering when ctrl+enter is pressed.
$(document).on('keyup', '.form', function(e) {
let value = parseInt(e.target.value);
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
//loop through all values...
$(".form").each(function(i) {
if (i !== 0) {
$(this).val(++value); //assign new value..
$(this).trigger("change") //call your change event to handle further...
}
})
}
})
Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>Number</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
<span class="email_result"></span>
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

Not able to insert the data in input field of form

I have a form, there is a button (+sign)on the form which appends a row to insert the value .In my form i am able to enter the value on the first row both fields( stationerytype and stationeryqty). But once I append a new row by clicking plus button I am not able to insert any value on staionerytype field of second row while I'm able to insert the value in the stationeryqty field of second row.
My code is:
<table class="table table-bordered" id="tb" >
<tr class="tr-header">
<th class= "col-md-1" align="centre">Sl.No.</th>
<th class= "col-md-6" align="centre">STATIONARY TYPE</th>
<th class= "col-md-4" align="centre">STATIONARY QUANTITY</th>
<th class= "col-md-1"><span class="glyphicon glyphicon-plus"></span></th>
</tr>
<tr>
<?php
for($i=1;$i<=1;$i++)
{
?>
<td><input type="text" style="text-decoration: none" name="slno" value= "<?php echo $i; ?>" ></td>
<td><input type="text" style="text-decoration: none" name="stationerytype" ></td>
<td><input type="number" name="stationeryqtyrecd" id="stationeryqtyrecd" min="0"></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
<?php }?>
</table>
<button type="submit" name="add" class="btn btn-info" align="middle" >ADD </button>
<script>
var max = 4;
var count = 1;
$(function(){
$('#addMore').on('click', function() {
if(count <= max ){
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
debugger;
data.find("input")[0].value=++count;
}else{
alert("Sorry!! Can't add more than five samples at a time !!");
}
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
count--;
// get all the rows in table except header.
$('#tb tr:not(.tr-header)').each(function(){
$(this).find('td:first-child input').val(this.rowIndex);
})
}
});
});
</script>
</div>

function Add and Remove input dropdown fields with javascript not work properly

now i'm doing laravel project. i implement Dynamic Adding and removing input dropdown fields use javascript. function for adding and removing can work properly. but the problem is in the dropdown fields. inside dropdown, i add option "other", so when it selected "other", input type text will display.
i just able to display the input type text just only first line. but in other line is not correct. heres is my code
<div id="AddItemOption">
<div class="d-flex justify-content-center align-items-center">
<table class="table table-striped table-condensed table-additems">
<thead>
<tr>
<th class="align-middle border-0">items</th>
<th class="align-middle border-0">Delete</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<select name="items[]" class="form-control sellitem">
<option value="book">book</option>
<option value="pencil">pencil</option>
<option value="pen">pen</option>
<option value="other">other</option>
</select>
<input type="text" class='form-control inputother' style="display: none;" name="other[]" >
</td>
<td class="action">
<button type="submit" class="btn btn-danger ">
Delete
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default btn-xs">+ Add New Item</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
and here is the script
<script>
var i=1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function(){
$(this).removeAttr('value');
});
$(this).closest('tr').before('<tr id="row'+i+'" >'+$(el).html()+'</tr>');
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
}
else {
$(this).closest('tr').remove();
}
});
$('.sellitem').change(function(){
if ($(this).val() == 'other') {
$('.inputother').css({'display':'block'});
}else{
$('.inputother').css({'display':'none'});
}
});
</script>
and here is the link that i made for testing test add and remove function made by me just click "run" button to test the code
i want that. display input type text when select "other" is not in all line. but in each line. and when we add 'add new item' i just display default selection without display input type text..
please help

Under click event of #AddItemOption you can hide the input which is cloned by default and when the select-box is changed you can use $(this).closest("tr").find('.inputother') to show or hide only that input which is below the select-box .
Demo Code :
var i = 1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function() {
$(this).removeAttr('value');
});
//while cloning hide other input
$(el).find('.inputother').css({
'display': 'none'
});
$(this).closest('tr').before('<tr id="row' + i + '" >' + $(el).html() + '</tr>');
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
} else {
$(this).closest('tr').remove();
}
});
//use this because other slect-box are dynmically created
$(document).on('change', '.sellitem', function(e) {
if ($(this).val() == 'other') {
//find this ->closest trs-> get input box show
$(this).closest("tr").find('.inputother').css({
'display': 'block'
});
} else {
$(this).closest("tr").find('.inputother').css({
'display': 'none'
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ajaxModalBody">
<div class="container-fluid">
<div id="AddItemOption">
<div class="d-flex justify-content-center align-items-center">
<table class="table table-striped table-condensed table-additems">
<thead>
<tr>
<th class="align-middle border-0">items</th>
<th class="align-middle border-0">Delete</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<select name="items[]" class="form-control sellitem">
<option value="book">book</option>
<option value="pencil">pencil</option>
<option value="pen">pen</option>
<option value="other">other</option>
</select>
<input type="text" class='form-control inputother' style="display: none;" name="other[]">
</td>
<td class="action">
<button type="submit" class="btn btn-danger ">
Delete
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default btn-xs">+ Add New Item</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

var i=1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('.inputother').attr('count', i);
$(el).find('.inputother').addClass('inputothercount' + i);
$(el).find('.inputother').removeClass('firstinput');
$(el).find('.sellitem').attr('count', i);
// $(el).find('.sellitem').class('count' + i);
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function(){
$(this).removeAttr('value');
});
$(this).closest('tr').before('<tr id="row'+i+'" >'+$(el).html()+'</tr>');
listen();
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
}
else {
$(this).closest('tr').remove();
}
});
function listen() {
$('.sellitem').change(function(){
var count = $(this).attr('count') || 1;
if (count == 1) {
if ($(this).val() == 'other') {
$('.firstinput').css({'display':'block'});
}else{
$('.firstinput').css({'display':'none'});
};
return;
} else {
if ($(this).val() == 'other') {
$('.inputothercount' + count).css({'display':'block'});
}else{
$('.inputothercount' + count).css({'display':'none'});
}
}
});
}
listen();
You can play with it here https://repl.it/repls/DefiniteMintyScandisk#index.html and you would need to add firstinput class in <input type="text" class='form-control inputother' style="display: none;" name="other[]" > also
When you add and remove display through class .inputother you are doing it for all elements placed on view. You should add class inputothercontent${count} to it so you can find specific element by count and hide display appropriate div.
Do add firstinput class by default in html and remove it when appending other elements.
You will need to awake listener again to listen for .sellitem click after adding element to dom. It don't auto refresh for dynamically added elements.
You should save current count in attribute of sellItem element so on click you can know which element got changed and change display based on that.

How i get serial no in the dynamic table when i click add button in codeigniter

This is dynamic table pic:
My problem is when I click the + button, Sno number should be incremented and then presented in the text box of the table.
I have so far tried but I don't achieve any answer. Please help me to solve this problem and thanks
View page code:
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>
<tr >
<td></span></td>
<td><input style="width:50px" type="text" name="sno[]" value="1"></td>
<td><input style="width:100px" class ="rate" type="text" name="rate[]"></td>
<td><select style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<?php foreach ($itemname as $row ): ?>
<option value="<?=$row['id']?>" <?php echo set_select('itemname', $row['id']); ?>><?=$row['itemname']?></option>
<?php endforeach ?>
</select></td>
<td><input style="width:60px" class="qty" type="text" name="qty[]"></td>
<td><input style="width:70px" class="unit" type="text" name="unit[]"></td>
<td><input style="width:100px" class="total" type="text" name="total[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>
</tbody>
</table>
Javascript code to add rows and delete rows:
<script>
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>

Add some to JS code:
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var l = $('#tb3').find('tbody').find('tr').length;
var s = $('#tb3')
.find('tbody')
.find('tr')
.eq(l-2)
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data.find('td').eq(1).find("input").val(sp);
});
or
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var s = data
.prev()
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data
.find('td')
.eq(1)
.find("input")
.val(sp);
});
Also, change id of AddButton to a class.
$(function(){
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var l = $('#tb3').find('tbody').find('tr').length;
var s = $('#tb3')
.find('tbody')
.find('tr')
.eq(l-2)
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data.find('td').eq(1).find("input").val(sp);
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>
<tr >
<td></span></td>
<td><input style="width:50px" type="text" name="sno[]" value="1"></td>
<td><input style="width:100px" class ="rate" type="text" name="rate[]"></td>
<td><select style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<option value="23423">itemname</option>
<?php endforeach ?>
</select></td>
<td><input style="width:60px" class="qty" type="text" name="qty[]"></td>
<td><input style="width:70px" class="unit" type="text" name="unit[]"></td>
<td><input style="width:100px" class="total" type="text" name="total[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" class="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus">Add</span></td>
</tr>
</tbody>
</table>

Set class name for sno[] input field
For example :
<td><input style="width:50px" class="sno" type="text" name="sno[]" value="1"></td>.
Call the ApplySerialNO() function in add row and remove row function
$('#addMore').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
ApplySerialNO();
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
ApplySerialNO();
} else {
alert("Sorry!! Can't remove first row!");
}
});
This function is clear the old value and append the new serial no
function ApplySerialNO() {
var count = 1;
$(".sno").each(function() {
var selectedTr = $(this);
selectedTr.val('');
selectedTr.val(count);
count++;
});
}

AJAX: add new row to table or remove using AJAX

This is the logic:
I input something to form, and the form is AJAX live search. after I found value, I click on add button and it creates new row in existing table / tbody.
<table class="standard">
<thead>
<tr>
<td colspan="2">
Start Input barcode / Product Name
</td>
<td colspan="4">
<input type="text" size="90" value="" placeholder="Barcode / Product Name">
</td>
<td>
<button class="tambah"><i class="icon-plus"></i> Add</button>
</td>
</tr>
<tr>
<td>
No.
</td>
<td>
Kode Barang
</td>
<td>
Nama Barang
</td>
<td>
Qty
</td>
<td>
Harga
</td>
<td>
Disc %
</td>
<td>
Total
</td>
</tr>
</thead>
<tbody>
<!-- when button add is click that will add <tr></tr> here -->
</tbody>
</table>
can i do that? if so, how?
Fiddle Example: http://jsfiddle.net/anggagewor/cauPH/

You can find the pseudo code below.
$('#button_id').on('click', function(e) {
$.ajax({
url : yourUrl,
type : 'GET',
dataType : 'json',
success : function(data) {
$('#table_id tbody').append("<tr><td>" + data.column1 + "</td><td>" + data.column2 + "</td><td>" + data.column3 + "</td></tr>");
},
error : function() {
console.log('error');
}
});
});

Try this
var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;
$('#addScnt').click(function() {
scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td>Remove</td></tr>');
i++;
return false;
});
//Remove button
$(document).on('click', '#remScnt', function() {
if (i > 2) {
$(this).closest('tr').remove();
i--;
}
return false;
});​
Here's a working example, including remove row functionality: DEMO.

$("<tr><td>.....content...<td><a class='remove'>remove</a>").appendTo("#tableid tbody").find('.remove').click(function () {
$(this).parent().parent().remove();
});

In your ajax response you can do this
$("#myTable > tbody").append('<tr><td>my data</td><td>more data</td></tr>');
'#myTable' will be replaced by your table id or class and <td>my data</td><td>more data</td> will be replaced by your content