Accessing Element previously appended to the DOM? - javascript

I have the following HTML structure in two modals on my website - one for adding new datasets and one for editing existing datasets:
HTML (add) is added to the DOM via TWIG Syntax
<div class="mb-3" id="bar_area-add">
<div class="card">
<div class="card-body">
<h3 class="float-start">Thekendienst</h3>
<div class="float-end">
<button class="btn btn-sm btn-primary" type="button" id="bar_plus-add">
<i class="bi-plus-lg"></i>
</button>
<button class="btn btn-sm btn-danger" type="button" id="bar_minus-add">
<i class="bi-dash-lg"></i>
</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Zeitfenster</th>
<th>MAs</th>
</tr>
</thead>
<tbody id="bar_multiple-add">
<tr id="bar_placeholder-add" style="display: none;">
<td colspan="2">aktuell keine Position(en) verfügbar</td>
</tr>
<tr id="bar_shift_1-add">
<td><input type="text" name="bar_timewindow_1" value="21:00-24:00" required=""></td>
<td><input type="number" min="0" name="bar_amountma_1" value="2" required=""></td>
<input type="hidden" name="bar_id_1" value="3" required="">
</tr>
</tbody>
</table>
</div>
</div>
</div>
HTML (edit) is appended to the DOM via JQuery.append() function
<div class="mb-3" id="bar_area-edit" style="">
<div class="card">
<div class="card-body">
<h3 class="float-start">Thekendienst</h3>
<div class="float-end">
<button class="btn btn-sm btn-primary" type="button" id="bar_plus-edit">
<i class="bi-plus-lg"></i>
</button>
<button class="btn btn-sm btn-danger" type="button" id="bar_minus-edit">
<i class="bi-dash-lg"></i>
</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Zeitfenster</th>
<th>MAs</th>
</tr>
</thead>
<tbody id="bar_multiple-edit">
<tr id="bar_placeholder-edit" style="display: none;">
<td colspan="2">aktuell keine Position(en) verfügbar</td>
</tr>
<tr id="bar_shift_1-edit">
<td><input type="text" name="bar_timewindow_1" value="21:00-24:00" required=""></td>
<td><input type="number" min="0" name="bar_amountma_1" value="2" required=""></td>
<input type="hidden" name="bar_id_1" value="3" required="">
</tr>
</tbody>
</table>
</div>
</div>
</div>
As you can see, I also have 2 Buttons in both structures to add oder remove lines - it´s a kind of dynamic formfield. For this purpose I have written the following JQuery-Function:
var tasks = ['add', 'edit'];
var services = {{ services | json_encode | raw }};
tasks.forEach(task => {
services.forEach(service => {
$("#" + service.shortname + "_plus-" + task).click(function () {
$("#" + service.shortname + "_multiple-" + task).each(function () {
var i = $(this).find("tr").length;
var n = (i - 1);
$(this).append('<tr id="' + service.shortname + '_shift_' + (n + 1) + '-' + task + '">\n' +
'<td><input type="text" name="' + service.shortname + '_timewindow_' + (n + 1) + '" value="00:00-00:00" required></td>\n' +
'<td><input type="number" min="0" name="' + service.shortname + '_amountma_' + (n + 1) + '" value="0" required></td>\n' +
'</tr><input type="hidden" name="' + service.shortname + '_id_' + (n + 1) + '" value="' + service.id + '" required>');
if (n === 0) {
$("#" + service.shortname + "_placeholder-" + task).hide();
}
});
});
$("#" + service.shortname + "_minus-" + task).click(function () {
$("#" + service.shortname + "_multiple-" + task).each(function () {
var i = $(this).find("tr").length;
var n = i;
if (n !== 0) {
$("#" + service.shortname + '_shift_' + (n - 1) + '-' + task).remove();
if (n === 2) {
$("#" + service.shortname + "_placeholder-" + task).show();
}
}
});
});
});
});
Unfortunately this only works for the add-task, when clicking on add/remove button in the edit modal nothing happens. There´s no error message. I think this could be a result of adding edit-structure with Jquery.append() to the DOM like this.
$.ajax({
url: '/getJobs/' + eventClickEvent.event.id,
type: 'get',
success: function (jobData) {
var jobs = JSON.parse(jobData);
var services = {{ services | json_encode | raw }};
services.forEach(service => {
$('#areas-edit').append(`<div class="mb-3" id="` + service.shortname + `_area-edit" style="display: none;">
<div class="card">
<div class="card-body">
<h3 class="float-start">` + service.name + `</h3>
<div class="float-end">
<button class="btn btn-sm btn-primary" type="button"
id="` + service.shortname + `_plus-edit">
<i class="bi-plus-lg"></i>
</button>
<button class="btn btn-sm btn-danger" type="button"
id="` + service.shortname + `_minus-edit">
<i class="bi-dash-lg"></i>
</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Zeitfenster</th>
<th>MAs</th>
</tr>
</thead>
<tbody id="` + service.shortname + `_multiple-edit">
<tr id="` + service.shortname + `_placeholder-edit">
<td colspan="2">aktuell keine Position(en) verfügbar</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>`);
var i = 1;
jobs.forEach(job => {
if (service.id === job.serviceId) {
$('#' + service.shortname + '-editPill').addClass('bg-primary');
$('#' + service.shortname + '-editPill').removeClass('bg-secondary');
$('#' + service.shortname + '_area-edit').show();
$('#' + service.shortname + '_placeholder-edit').hide();
$('#' + service.shortname + '_multiple-edit').append(`
<tr id="` + service.shortname + `_shift_` + i + `-edit">
<td><input type="text"
name="` + service.shortname + `_timewindow_` + i + `"
value="` + job.timewindow + `" required></td>
<td><input type="number" min="0"
name="` + service.shortname + `_amountma_` + i + `"
value="` + job.mas + `" required></td>
<input type="hidden" name="` + service.shortname + `_id_` + i + `"
value="` + service.id + `" required>
</tr>
`);
i++;
}
});
});
}
});


You have jQuery, use it. Delegate or something like this
$(".service").on("click", function() {
$(".task", this).each(function() {
if (this.id.includes("plus")) {
var len = $(this).find("tr").length;
...
}
if (n === 0) {
$(this).find("[id*='_placeholder-']).hide();
}
})
}
else if (this.id.includes("_multiple") {
...
}
});
});

Related

Change data format in CRUD output to dd/mm/yyy [duplicate]

This question already has answers here:
How do I format a date in JavaScript?
(68 answers)
Closed 4 months ago.
i know it's a question asked many times here, but i tried all the solutions and no one is working.
I want to change the output in my CRUD from the input form to dd/mm/yyyy and not in yyyy-mm-dd.
Here's my code:
var nextId = 1;
var activeId = 0;
function productDisplay(ctl) {
var row = $(ctl).parents("tr");
var cols = row.children("td");
activeId = $($(cols[0]).children("button")[0]).data("id");
$("#productname").val($(cols[1]).text());
$("#introdate").val($(cols[2]).text());
$("#finishdate").val($(cols[3]).text());
$("#url").val($(cols[4]).text());
$("#phone").val($(cols[5]).text());
$("#note").val($(cols[6]).text());
$("#client").val($(cols[7]).text());
$("#updateButton").text("Aggiorna");
}
function productUpdate() {
if ($("#updateButton").text() == "Add") {
productUpdateInTable(activeId);
}
else {
productAddToTable();
}
formClear();
$("#productname").focus();
}
function productAddToTable() {
if ($("#productTable tbody").length == 0) {
$("#productTable").append("<tbody></tbody>");
}
$("#productTable tbody").append(
productBuildTableRow(nextId));
nextId += 1;
}
function productUpdateInTable(id) {
var row = $("#productTable button[data-id='" + id + "']")
.parents("tr")[0];
$(row).after(productBuildTableRow(id));
$(row).remove();
formClear();
$("#updateButton").text("Add");
}
function productBuildTableRow(id) {
var ret =
"<tr>" +
"<td>" +
"<button type='button' " +
"onclick='productDisplay(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-pencil' />" +
"</button>" +
"</td>" +
"<td>" + $("#productname").val() + "</td>" +
"<td>" + $("#introdate").val() + "</td>" +
"<td>" + $("#finishdate").val() + "</td>" +
"<td>" + $("#url").val() + "</td>" +
"<td>" + $("#phone").val() + "</td>" +
"<td>" + $("#note").val() + "</td>" +
"<td>" + $("#client").val() + "</td>" +
"<td>" +
"<button type='button' " +
"onclick='productDelete(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-minus' />" +
"</button>" +
"</td>" +
"</tr>"
return ret;
}
function productDelete(ctl) {
var result = confirm("Want to delete record?");
if (result) {
var result2 = confirm("Really?");
}
if (result2) {
$(ctl).parents("tr").remove();
}
}
function formClear() {
$("#productname").val("");
$("#introdate").val("");
$("#finishdate").val("");
$("#url").val("");
$("#phone").val("");
$("#note").val("");
$("#client").val("");
}
function doSearch(text, color = "yellow") {
if (color != "transparent") {
doSearch(document.getElementById('hid_search').value, "transparent");
document.getElementById('hid_search').value = text;
}
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2><b>Availability</h2></b>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<table id="productTable" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="col-sm-0">Modify</th>
<th class="col-sm-2">Name</th>
<th class="col-sm-1">From</th>
<th class="col-sm-1">To</th>
<th class="col-sm-2">Area</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-3">Note</th>
<th class="col-sm-2">Client</th>
<th class="col-sm-0">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="panel panel-primary">
<div class="panel-heading">
Add Availability
</div>
<div class="panel-body">
<div class="form-group">
<label for="productname">
Name
</label>
<input type="text" class="form-control" value="" id="productname" />
</div>
<div class="form-group">
<label for="introdate">
From
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="introdate">
</div>
<div class="form-group">
<label for="introdate">
To
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="finishdate" />
</div>
<div class="form-group">
<label for="area">
Area
</label>
<input type="search" class="form-control" value="" id="url" />
</div>
<div class="form-group">
<label for="phone">
Phone
</label>
<input type="" class="form-control" value="" id="phone" />
</div>
<div class="form-group">
<label for="note">
Note
</label>
<input type="" class="form-control" value="" id="note" />
</div>
<div class="form-group">
<label for="client">
Client
</label>
<select id="client" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<button type="button" id="updateButton" class="btn btn-primary" onclick="productUpdate();">
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When I insert a new record from form field date, the output in my CRUD is like YYYY-MM-DD.

This should help you. Pass a valid date in any format and the function will return a dd/mm/yyyy date format
// Helper function to format date from $(input).val()
function formatDate(date) {
if (date == '') {
return '';
}
let d = new Date(date),
ye = new Intl.DateTimeFormat('en', {
year: 'numeric'
}).format(d),
mo = new Intl.DateTimeFormat('en', {
month: '2-digit'
}).format(d),
da = new Intl.DateTimeFormat('en', {
day: '2-digit'
}).format(d);
return (`${da}-${mo}-${ye}`);
}
// ----
var nextId = 1;
var activeId = 0;
function productDisplay(ctl) {
var row = $(ctl).parents("tr");
var cols = row.children("td");
activeId = $($(cols[0]).children("button")[0]).data("id");
$("#productname").val($(cols[1]).text());
$("#introdate").val($(cols[2]).text());
$("#finishdate").val($(cols[3]).text());
$("#url").val($(cols[4]).text());
$("#phone").val($(cols[5]).text());
$("#note").val($(cols[6]).text());
$("#client").val($(cols[7]).text());
$("#updateButton").text("Aggiorna");
}
function productUpdate() {
if ($("#updateButton").text() == "Add") {
productUpdateInTable(activeId);
}
else {
productAddToTable();
}
formClear();
$("#productname").focus();
}
function productAddToTable() {
if ($("#productTable tbody").length == 0) {
$("#productTable").append("<tbody></tbody>");
}
$("#productTable tbody").append(
productBuildTableRow(nextId));
nextId += 1;
}
function productUpdateInTable(id) {
var row = $("#productTable button[data-id='" + id + "']")
.parents("tr")[0];
$(row).after(productBuildTableRow(id));
$(row).remove();
formClear();
$("#updateButton").text("Add");
}
function productBuildTableRow(id) {
var ret =
"<tr>" +
"<td>" +
"<button type='button' " +
"onclick='productDisplay(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-pencil' />" +
"</button>" +
"</td>" +
"<td>" + $("#productname").val() + "</td>" +
"<td>" + formatDate($("#introdate").val()) + "</td>" + // call helper function
"<td>" + formatDate($("#finishdate").val()) + "</td>" + // call helper function
"<td>" + $("#url").val() + "</td>" +
"<td>" + $("#phone").val() + "</td>" +
"<td>" + $("#note").val() + "</td>" +
"<td>" + $("#client").val() + "</td>" +
"<td>" +
"<button type='button' " +
"onclick='productDelete(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-minus' />" +
"</button>" +
"</td>" +
"</tr>"
return ret;
}
function productDelete(ctl) {
var result = confirm("Want to delete record?");
if (result) {
var result2 = confirm("Really?");
}
if (result2) {
$(ctl).parents("tr").remove();
}
}
function formClear() {
$("#productname").val("");
$("#introdate").val("");
$("#finishdate").val("");
$("#url").val("");
$("#phone").val("");
$("#note").val("");
$("#client").val("");
}
function doSearch(text, color = "yellow") {
if (color != "transparent") {
doSearch(document.getElementById('hid_search').value, "transparent");
document.getElementById('hid_search').value = text;
}
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2><b>Availability</h2></b>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<table id="productTable" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="col-sm-0">Modify</th>
<th class="col-sm-2">Name</th>
<th class="col-sm-1">From</th>
<th class="col-sm-1">To</th>
<th class="col-sm-2">Area</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-3">Note</th>
<th class="col-sm-2">Client</th>
<th class="col-sm-0">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="panel panel-primary">
<div class="panel-heading">
Add Availability
</div>
<div class="panel-body">
<div class="form-group">
<label for="productname">
Name
</label>
<input type="text" class="form-control" value="" id="productname" />
</div>
<div class="form-group">
<label for="introdate">
From
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="introdate">
</div>
<div class="form-group">
<label for="introdate">
To
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="finishdate" />
</div>
<div class="form-group">
<label for="area">
Area
</label>
<input type="search" class="form-control" value="" id="url" />
</div>
<div class="form-group">
<label for="phone">
Phone
</label>
<input type="" class="form-control" value="" id="phone" />
</div>
<div class="form-group">
<label for="note">
Note
</label>
<input type="" class="form-control" value="" id="note" />
</div>
<div class="form-group">
<label for="client">
Client
</label>
<select id="client" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<button type="button" id="updateButton" class="btn btn-primary" onclick="productUpdate();">
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to sum dynamically added column values?

I have dynamically added rows that I need to sum.
Added columns and total will be displayed in separate fields.
I want to sum user enter data one particular column that is "DEBIT*" columns. for example user enter 1st row on debit coloumn 100rs and user click add new row and enter 100rs that amount will be calculate and show the total field..
Here is my code.
Faild Fiddle here
var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">TDS A/C Name1</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
/* second row */
var ctr = 1;
var FieldCount = 1;
$('#sndRow').on('click', '.button-add', function() {
ctr++;
var rowNum = 'rowNum' + ctr;
var cashacc_nme = 'cashacc_nme' + ctr;
var acc_narrat = 'acc_narrat' + ctr;
var accdeb = 'accdeb' + ctr;
var accCredit = 'accCredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + rowNum + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc_nme" ><option value="">Account Name 1</option><option value="1">Plumz</option><option value="2">Plumz</option><option value="3">Plumz</option></select></td><td><input type="text" class=' + "joe" + ' id=' + acc_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe debClass" + ' id=' + accdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + accCredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
</td>
<td class="tblBtn" style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon dlt-icon">
</td>
</tr>
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control debClass" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
</td>
<td style="width: 4%">
<img src="./img/plus.svg" id="debsum" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-6">
<div class="cashTotal">
<p class="tableTotal">Total:</p>
</div>
</div>
<div class="col-6">
<input type="number" class="totaldeb" id="totaldbt" name="totaldbt" readonly>
</div>
</div>
I am just beginner, any help would be grateful.
Thank you.

EDIT: I'm sorry Joe, it looks like I attached your fiddle to the link other than my updated copy. Please check the link out again.
I've created a JSfiddle using yours for a working example.
I modified your code to make it easier by adding an attribute on your debit input of data-action="sumDebit" and added in this snippet.
$('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row.
var total = 0;
$('[data-action="sumDebit"]').each(function(i,e) { //Get all tags with [data-action="sumDebit"]
var val = parseFloat(e.value); //Get int value from string
if(!isNaN(val)) //Make sure input was parsable. If not, result come back as NaN
total += val;
});
$('#totaldbt').val(total); //Update value to total
});

I have fixed your code. please check it.
var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' name="cashaccCode" onchange="calSum()" keyup="calSum()" placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">TDS A/C Name1</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
/* second row */
var ctr = 1;
var FieldCount = 1;
$('#sndRow').on('click', '.button-add', function() {
ctr++;
var rowNum = 'rowNum' + ctr;
var cashacc_nme = 'cashacc_nme' + ctr;
var acc_narrat = 'acc_narrat' + ctr;
var accdeb = 'accdeb' + ctr;
var accCredit = 'accCredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + rowNum + ' name="cashaccCode" onchange="calSum()" keyup="calSum()" placeholder="NNNN" /></td><td><select class="form-control" id="cashacc_nme" ><option value="">Account Name 1</option><option value="1">Plumz</option><option value="2">Plumz</option><option value="3">Plumz</option></select></td><td><input type="text" class=' + "joe" + ' id=' + acc_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe debClass" + ' id=' + accdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + accCredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<tbody>
<tr id="fst_row">
///First row
<td>
<input type="number" onchange="calSum()" keyup="calSum()" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashaccCode" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
</td>
<td class="tblBtn" style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon dlt-icon">
</td>
</tr>
//// second row
<tr id="sndRow">
<td>
<input type="number" onchange="calSum()" keyup="calSum()" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control debClass" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
</td>
<td style="width: 4%">
<img src="./img/plus.svg" id="debsum" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-6">
<div class="cashTotal">
<p class="tableTotal">Total:</p>
</div>
</div>
<div class="col-6">
<input type="number" class="totaldeb" id="totaldbt" name="totaldbt" readonly>
</div>
</div>
<script>
function calSum(){
var calvalue = 0;
$("input[name*='cashaccCode']").each( function( key, item ) {
//alert( key + ": " + item.value );
calvalue = calvalue + parseFloat(item.value);
});
$("#totaldbt").val(calvalue);
$
}
</script>

Values are set when manual trigger change on SELECT but not when triggering from inside a function, why?

I am building some DOM elements dynamically as you may see in the snippet below. The idea is as follow:
If I change the SELECT and my choice is Yes/No then build a set of elements and insert them inside the DOM.
If I click on the button then some values should be set dynamically for those previous constructed elements
If you follow this path everything works as expected.
I would expect by clicking on the button and because the load_edit_question function is triggering a change on the SELECT to get the same results but if you click the button only those values gets undefined.
What I am missing here?
$(document).ready(function() {
var options = [{
field_id: 294249,
field_seq: 36,
field_type_id: 8,
form_id: 9926,
is_base_grid: null,
option_desc: "Yes",
option_id: 364371,
other_required: 0
}, {
field_id: 294249,
field_seq: 36,
field_type_id: 8,
form_id: 9926,
is_base_grid: null,
option_desc: "No",
option_id: 364372,
other_required: 0
}],
i = 1,
k = 1,
container_yes_no = $("#options_yes_no"),
field_type = $("#field_type_id"),
content = '<label>Options</label>\n' +
'<div id="options_yes_no">\n' +
' <div class="row-fluid">\n' +
' <div class="span2 text-center"></div>\n' +
' <div class=\'span6\'>\n' +
' <input type="text"\n' +
' class="options"\n' +
' name="option_desc[]"\n' +
' style="width:98%"\n' +
' value="Yes"\n' +
' data-option_field_id=""\n' +
' data-option_id=""\n' +
' />\n' +
' </div>\n' +
' <div class="span2">\n' +
' <label class="checkbox">\n' +
' <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
' </label>\n' +
' </div>\n' +
' <div class="span2">\n' +
' <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
' <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
' </div>\n' +
' </div>\n' +
' <div class="row-fluid">\n' +
' <div class="span2 text-center"></div>\n' +
' <div class=\'span6\'>\n' +
' <input type="text"\n' +
' class="options"\n' +
' name="option_desc[]"\n' +
' style="width:98%"\n' +
' value="No"\n' +
' data-option_field_id=""\n' +
' data-option_id=""\n' +
' />\n' +
' </div>\n' +
' <div class="span2">\n' +
' <label class="checkbox">\n' +
' <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
' </label>\n' +
' </div>\n' +
' <div class="span2">\n' +
' <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
' <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
' </div>\n' +
' </div>\n' +
'</div>\n';
field_type.change(function() {
var field_type_id = $(this).find('option:selected'),
field_type_name = field_type_id.data('alias');
switch (field_type_name) {
case 'yes_no':
container_yes_no.html(content);
var i = 1,
k = 1;
container_yes_no.find(":text").each(function() {
$(this).attr("id", "option_desc_" + i);
console.log("option_desc_" + i);
i++;
});
container_yes_no.find(":checkbox").each(function() {
$(this).attr("id", "option_other_" + k);
k++;
});
break;
default:
console.log(field_type_name);
break;
}
}).trigger('change');
$("#me").on("click", function() {
load_edit_question(field_type, options);
});
});
function load_edit_question(select_el, options) {
select_el.trigger('change');
loadq(options);
}
function loadq(options) {
console.log(options);
for (var i = 0; i < options.length; i++) {
var option = options[i],
curr_opt_desc = $("#option_desc_" + (i + 1)),
curr_option_other = $("#option_other_" + (i + 1)),
fullId = option.field_id + '_' + option.option_id;
curr_opt_desc.val(option.option_desc);
curr_option_other.prop('checked', option.other_required === 1);
curr_opt_desc.data("option_id", option.option_id);
curr_opt_desc.data("option_field_id", option.field_id);
console.log(fullId);
console.log(curr_opt_desc.val());
console.log(curr_opt_desc.data("option_id"));
console.log(curr_opt_desc.data("option_field_id"));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Options</label>
<div id="options_yes_no">
<div class="row-fluid">
<div class="span2 text-center"></div>
<div class='span6'>
<input type="text" class="options" name="option_desc[]" style="width:98%" value="Yes" data-option_field_id="" data-option_id="" />
</div>
<div class="span2">
<label class="checkbox">
<input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
</label>
</div>
<div class="span2">
<button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
<button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
</div>
</div>
<div class="row-fluid">
<div class="span2 text-center"></div>
<div class='span6'>
<input type="text" class="options" name="option_desc[]" style="width:98%" value="No" data-option_field_id="" data-option_id="" />
</div>
<div class="span2">
<label class="checkbox">
<input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
</label>
</div>
<div class="span2">
<button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
<button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
</div>
</div>
</div>
<select id="field_type_id" name="field_type_id" class="span12">
<option value="">Select One</option>
<option value="2" data-alias="checkbox">Checkbox</option>
<option value="3" data-alias="date">Date</option>
<option value="5" data-alias="fixed_text">Fixed Text</option>
<option value="1" data-alias="radio">Radio</option>
<option value="4" data-alias="text">Text</option>
<option value="6" data-alias="textarea">Textarea</option>
<option value="8" data-alias="yes_no">Yes/No</option>
</select>
<button id="me"> Click me</button>
PS: if the snippet does not work properly I have setup a Fiddle also here

While you click the button, you didn't set the value before you trigger the event, which will leave the selected option to be blank, and then run the default routine in your switch action. Thus none of the input values are actually being set, and you got undefined when trying to print them.
$(document).ready(function() {
var options = [{
field_id: 294249,
field_seq: 36,
field_type_id: 8,
form_id: 9926,
is_base_grid: null,
option_desc: "Yes",
option_id: 364371,
other_required: 0
}, {
field_id: 294249,
field_seq: 36,
field_type_id: 8,
form_id: 9926,
is_base_grid: null,
option_desc: "No",
option_id: 364372,
other_required: 0
}],
i = 1,
k = 1,
container_yes_no = $("#options_yes_no"),
field_type = $("#field_type_id"),
content = '<label>Options</label>\n' +
'<div id="options_yes_no">\n' +
' <div class="row-fluid">\n' +
' <div class="span2 text-center"></div>\n' +
' <div class=\'span6\'>\n' +
' <input type="text"\n' +
' class="options"\n' +
' name="option_desc[]"\n' +
' style="width:98%"\n' +
' value="Yes"\n' +
' data-option_field_id=""\n' +
' data-option_id=""\n' +
' />\n' +
' </div>\n' +
' <div class="span2">\n' +
' <label class="checkbox">\n' +
' <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
' </label>\n' +
' </div>\n' +
' <div class="span2">\n' +
' <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
' <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
' </div>\n' +
' </div>\n' +
' <div class="row-fluid">\n' +
' <div class="span2 text-center"></div>\n' +
' <div class=\'span6\'>\n' +
' <input type="text"\n' +
' class="options"\n' +
' name="option_desc[]"\n' +
' style="width:98%"\n' +
' value="No"\n' +
' data-option_field_id=""\n' +
' data-option_id=""\n' +
' />\n' +
' </div>\n' +
' <div class="span2">\n' +
' <label class="checkbox">\n' +
' <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
' </label>\n' +
' </div>\n' +
' <div class="span2">\n' +
' <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
' <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
' </div>\n' +
' </div>\n' +
'</div>\n';
field_type.change(function() {
var field_type_id = $(this).find('option:selected'),
field_type_name = field_type_id.data('alias');
switch (field_type_name) {
case 'yes_no':
container_yes_no.html(content);
var i = 1,
k = 1;
container_yes_no.find(":text").each(function() {
$(this).attr("id", "option_desc_" + i);
console.log("option_desc_" + i);
i++;
});
container_yes_no.find(":checkbox").each(function() {
$(this).attr("id", "option_other_" + k);
k++;
});
break;
default:
console.log(field_type_name);
break;
}
}).trigger('change');
$("#me").on("click", function() {
load_edit_question(field_type, options);
});
});
function load_edit_question(select_el, options) {
select_el.val('8').trigger('change');
loadq(options);
}
function loadq(options) {
console.log(options);
for (var i = 0; i < options.length; i++) {
var option = options[i],
curr_opt_desc = $("#option_desc_" + (i + 1)),
curr_option_other = $("#option_other_" + (i + 1)),
fullId = option.field_id + '_' + option.option_id;
curr_opt_desc.val(option.option_desc);
curr_option_other.prop('checked', option.other_required === 1);
curr_opt_desc.data("option_id", option.option_id);
curr_opt_desc.data("option_field_id", option.field_id);
console.log(fullId);
console.log(curr_opt_desc.val());
console.log(curr_opt_desc.data("option_id"));
console.log(curr_opt_desc.data("option_field_id"));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Options</label>
<div id="options_yes_no">
<div class="row-fluid">
<div class="span2 text-center"></div>
<div class='span6'>
<input type="text" class="options" name="option_desc[]" style="width:98%" value="Yes" data-option_field_id="" data-option_id="" />
</div>
<div class="span2">
<label class="checkbox">
<input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
</label>
</div>
<div class="span2">
<button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
<button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
</div>
</div>
<div class="row-fluid">
<div class="span2 text-center"></div>
<div class='span6'>
<input type="text" class="options" name="option_desc[]" style="width:98%" value="No" data-option_field_id="" data-option_id="" />
</div>
<div class="span2">
<label class="checkbox">
<input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
</label>
</div>
<div class="span2">
<button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
<button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
</div>
</div>
</div>
<select id="field_type_id" name="field_type_id" class="span12">
<option value="">Select One</option>
<option value="2" data-alias="checkbox">Checkbox</option>
<option value="3" data-alias="date">Date</option>
<option value="5" data-alias="fixed_text">Fixed Text</option>
<option value="1" data-alias="radio">Radio</option>
<option value="4" data-alias="text">Text</option>
<option value="6" data-alias="textarea">Textarea</option>
<option value="8" data-alias="yes_no">Yes/No</option>
</select>
<button id="me"> Click me</button>

Deleted data still prompts as existed

I have 2 process for sending a data. 1st is from a table and 2nd is by textboxes. "table_select" is where I retrieve the data, and "attendee_table" is where I send the data temporarily before I save the process. On submit, it saves to database.
The problem is when I check for duplicate entries, it functions well. But when I delete one of the entries, it is still prompting that the entry is existed. NOTE: It is not yet saved in the database.
But when I save it to database, the removed entry is not included in the database. What does this mean?
Here is my Jquery/Javascript code:
attendees_id=0;
$(document).ready(function(){
// ADD ATTENDEES BY SEARCH
var addMem = [];
$("#add_button").click(function(){
$('#table_select input[type="checkbox"]:checked').each(function(){
var getRow = $(this).parents('tr');
var value = (getRow.find('td:eq(2)').html()); //names
var value1 = (getRow.find('td:eq(3)').html()); //specialty
var value3 = (getRow.find('td:eq(1)').html()); //prc
var index = $.inArray(value3, addMem);
if (index >= 0){
alert('exists');
$('input[type=checkbox]').prop('checked', false).uniform('refresh');
}
else {
$('#attendee_table tr:last').after('<tr><td></td><td><input type="text" class="form-control" name="prc[' + attendees_id + ']" id="prc" value="' + value3 + '" readonly></td><td><input type="text" class="form-control" value="' + value + '" id="names" name="name[' + attendees_id + ']" readonly></td><td><input type="text" class="form-control" value="' + value1 + '" id="specialties" name="specialty[' + attendees_id + ']" readonly></td><td><input type="button" class="btn btn-warning" name="delete_btn1[' + attendees_id + ']" id="delete_btn1" onclick="deleteMem(this)" value="Delete"></td></tr>');
addMem.push(value3,value,value1);
$("#mod_search").modal('hide');
attendees_id=attendees_id+1;
}
});
});
// ADD ATTENDEES BY ADD
var addNon = [];
$("#addRow").click(function (e) {
var val2 = $("#id_no").val();
var val = $("#attendee_name").val();
var val1 = $("#specialty").val();
var ind = $.inArray(val, addNon);
if (val == ""){
alert('Enter name of attendee.')
}
else if (val1 == ""){
alert('Enter specialty of attendee.')
}
else{
if (ind >= 0){
alert('exists');
$('#attendee_name').val('');
$('#specialty').val('');
}
else {
$('#attendee_table tr:last').after('<tr><td></td><td><input type="text" class="form-control" name="prc[' + attendees_id + ']" id="prc" value=""></td><td><input type="text" class="form-control" value="' + val + '" id="names" name="name['+ attendees_id +']" readonly></td><td><input type="text" class="form-control" value="' + val1 +'" id="specialties" name="specialty[' + attendees_id + ']" readonly></td><td><input type="button" class="btn btn-warning" name="delete_btn[' + attendees_id + ']" id="delete_btn" value="Delete" onclick="deleteNon(this)" ></td></tr>');
addNon.push(val,val1);
$('#attendee_name').val('');
$('#specialty').val('');
}
}
attendees_id=attendees_id+1;
});
});
//DELETE DATA FROM SEARCH
function deleteMem(t){
var row = t.parentNode.parentNode;
var yes = confirm('Are you sure?');
if (yes){
document.getElementById("attendee_table").deleteRow(row.rowIndex);
console.log(row);
}
else{
event.preventDefault();
}
}
//DELETE DATA FROM ADD
function deleteNon(t){
var row = t.parentNode.parentNode;
var yes = confirm('Are you sure?');
if (yes){
document.getElementById("attendee_table").deleteRow(row.rowIndex);
console.log(row);
}
else{
event.preventDefault();
}
}
This is my "table_select":
<table class="table table-hover table-managed" id="table_select">
<thead>
<tr>
<th>ID</th>
<th>PRC</th>
<th>Name</th>
<th>Speciality</th>
</tr>
</thead>
<tbody>
<?php
$sql_search="SELECT * FROM `personal_profile`";
$sql_run=mysql_query($sql_search);
while($m=mysql_fetch_array($sql_run))
{
?>
<tr>
<td><input type="checkbox" name="member_select[]" id="member_select" value="<?php #$m['id']; ?>"></td>
<td><?php echo #$m['prc_license_num']; ?></td>
<td id="names"><?php echo #$m['lastname'].', '.#$m['firstname'].' '.#$m['middlename'];?></td>
<td id="specialties"><?php echo #$m['speciality'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
"attendee_table":
<table class="table table-managed table-hover" id="attendee_table">
<thead>
<tr>
<th>No.</th>
<th>PRC</th>
<th>Name</th>
<th>Speciality</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$sql_select="SELECT * FROM `event_attendees` WHERE `id`='".#$_REQUEST['member_select']."'";
$sql_run=mysql_query($sql_select);
while($row=mysql_fetch_array($sql_run))
{
?>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php
}
?>
</tbody>
</table>
//ADDING ATTENDEE BY TEXTBOX
<div class="row">
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<label class="control-label">Name</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="attendee_name" name="attendee_name" value="<?=#$_REQUEST['name']?>"/>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#mod_search" id="search_btn" name="search_btn" style="visibility:hidden;" >Search</button>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<label class="control-label">Specialty/Profession</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="specialty" id="specialty" value="<?=#$_REQUEST['speciality']?>" />
</div>
<div class="col-md-1">
<button type="button" class="btn btn-info" id="addRow" name="addRow" style="visibility:hidden;">Add</button>
</div>
</div>
</div>
Where/what did I missed? Please help. Thank you.

How to validate if all textbox value is not empty in an array name using jquery?

I have a problem in my form. In my form the user can add multiple discount codes. And what I need to validate are the two textboxes these are 'date start' and 'date expired' and I need to find out if these are empty. Before allowing the user to add another row again.
Here's my code:
function addProductDiscountCode() {
var html = '<tr id="row-count-' + iterator + '">';
html += ' <td>';
html += ' <input type="text" name="discount_code[' + iterator + '][code]" class="form-control" readonly="readonly" value="' + code + '" />';
html += ' </td>';
html += ' <td class="text-center">';
html += ' <input type="text" name="discount_code[' + iterator + '][percentage]" class="form-control text-center" />';
html += ' </td>';
html += ' <td class="text-center">';
html += ' <div class="input-group date"><input name="discount_code[' + iterator + '][date_start]" value="" id="start-date-' + iterator + '" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_set" type="text" readonly><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>';
html += ' </td>';
html += ' <td class="text-center">';
html += ' <div class="input-group date"><input name="discount_code[' + iterator + '][date_expired]" value="" id="end-date-' + iterator + '" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_end" type="text" readonly><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>';
html += ' </td>';
html += ' <td style="width: 15%">';
html += ' <select class="form-control" name="discount_code[' + iterator + '][status ]">';
html += ' <option value="0">Disable</option>';
html += ' <option value="1">Activate</option>';
html += ' </select>';
html += ' </td>';
html += ' <td class="text-center"><button type="button" onClick="removeCode(' + iterator + ');" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$("#product-discount-code tbody").append(html);
iterator++;
$('.date').datetimepicker({
pickTime: false
});
}
And this will result in a row like this:
<tr id="row-count-1">
<td>
<input name="discount_code[1][code]" class="form-control" readonly="readonly" value="4npi7YIIrv" type="text">
</td>
<td class="text-center">
<input name="discount_code[1][percentage]" class="form-control text-center" type="text">
</td>
<td class="text-center">
<div class="input-group date">
<input name="discount_code[1][date_start]" value="" id="start-date-1" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_set" readonly="" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td class="text-center">
<div class="input-group date">
<input name="discount_code[1][date_expired]" value="" id="end-date-1" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_end" readonly="" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td style="width: 15%">
<select class="form-control" name="discount_code[1][status ]">
<option value="0">Disable</option>
<option value="1">Activate</option>
</select>
</td>
<td class="text-center">
<button type="button" onclick="removeCode(1);" class="btn btn-danger">
<i class="fa fa-minus-circle"></i>
</button>
</td>
</tr>
I added a console print in the add action:
$(".date_start").val();
$(".date_end").val();
And It only get the value of the first row. I need

The getter method like .val(), in jQuery will return the value of the first element in the set not of all the elements(with exceptions like .text())
You can use a loop based logic to see whether all the elements has values
var date_set = true;
$('.date_set').each(function () {
if ($(this).val().length == 0) {
date_set = false;
return false;
}
})

Categories

Resources