Develop Reference

How can I pattern match ID only making sure the variable number matches without having to hardcode all of the possibilities?

I've recently become familiar with Jquery selectors....and they work great. Starts with...ends with....
The problem I have currently is that all of my variable names essentially start with similar patterns and end with similar patterns. This ID is generated from somewhere else so I'm hoping I can do something to use it effectively.
The pattern ID format essentially looks like...
"#id_newbudgetlineitem_set-0-line_item_october"
"#id_newbudgetlineitem_set-0-line_item_november"
"#id_newbudgetlineitem_set-0-line_item_december"
I want to essentially matching on the set-* but only if it's identical to the other ids in my array. Is this even possible without having to hard code anywhere from set-0 to set-1000? Unfortunately the class for each one is the same as is the name situation. Is there someway to say if the set numbers all match in a given array then add them up? I can't use starts with or ends with in this case...and don't want to hardcode 1000 possibilities. Thanks in advance for any ideas or thoughts.
I am trying to do something like.....
function update_total()
{
var total = 0;
$('.budget').each(function(index, element) {
"#id_newbudgetlineitem_set-0-line_item_october" +
"#id_newbudgetlineitem_set-0-line_item_november" +
"#id_newbudgetlineitem_set-0-line_item_december"
var val = parseFloat($(element).val());
if( !isNaN( val )){
total += val;
}
});
$("#id_total").val(total);
}
Here's a working solution........
function update_total_total_total()
{
var ret = +$("input[name$='set-0-line_item_january']").val() + +$("input[name$='set-0-line_item_february']").val() + +$("input[name$='set-0-line_item_march']").val() + +$("input[name$='set-0-line_item_april']").val() + +$("input[name$='set-0-line_item_may']").val() + +$("input[name$='set-0-line_item_june']").val() + +$("input[name$='set-0-line_item_july']").val() + +$("input[name$='set-0-line_item_august']").val() + +$("input[name$='set-0-line_item_september']").val() + +$("input[name$='set-0-line_item_october']").val() + +$("input[name$='set-0-line_item_november']").val() + +$("input[name$='set-0-line_item_december']").val();
$("input[name$='set-0-line_item_total']").val(ret);
}
But I could have up to 1000 different set values. Is there some other way to do this without having to hard code this 999 more times?
This is a lot closer....but total still says 0. It's updating all of the totals to 0...so that's progress but not getting the actual totals. Forward progress thanks to Swati.
function update_total_total_total() {
//get length of input line_total for each sets..
for (var i = 0; i < $("[name$=line_item_total]").length; i++) {
var total = 0;
//get all inputs but not line_item _total
$(`input[name*=id_newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(index, element) {
var val = parseFloat($(element).val());
if( !isNaN( val )){
total += val;
}
})
$(`input[id$=set-${i}-line_item_total]`).val(total); //set value..of input
}
}

You can get length of total input whose name ends with line_item_total so this value will be counter for for-loop.
Then , inside for loop you can use $(`input[name*=id_newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total])`) this will fetch values from all inputs expect the line_total_item then add value on each iteration .
Lastly , use $(`input[name$=set-${i}-line_item_total]`).val(total); to set total inside line_total_item textbox.
Demo Code :
function update_total_total_total() {
//get length of input line_total for each sets..
for (var i = 0; i < $("[name$=line_item_total]").length; i++) {
var total = 0;
//get all inputs but not line_item _total
$(`input[name*=id_newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(i, element) {
var val = parseFloat($(element).val());
if (!isNaN(val)) {
total += val;
}
})
$(`input[name$=set-${i}-line_item_total]`).val(total); //set value..of input
}
}
update_total_total_total()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
SET 0 :
<input type="text" name="id_newbudgetlineitem_set-0-line_item_october" value="5">
<input type="text" name="id_newbudgetlineitem_set-0-line_item_november" value="51">
<input type="text" name="id_newbudgetlineitem_set-0-line_item_december" value="15">
<br/> Total :
<input type="text" name="id_newbudgetlineitem_set-0-line_item_total" value="" placeholder="total">
<input type="text" name="id_newbudgetlineitem_set-0-line_item_cost_center">
<input type="text" name="id_newbudgetlineitem_set-0-line_item_description">
</div>
<br/>
<div>
SET 1
<input type="text" name="id_newbudgetlineitem_set-1-line_item_october" value="5">
<input type="text" name="id_newbudgetlineitem_set-1-line_item_december" value="534">
<br/> Total :
<input type="text" name="id_newbudgetlineitem_set-1-line_item_total" value="" placeholder="total">
<input type="text" name="id_newbudgetlineitem_set-1-line_item_cost_center">
<input type="text" name="id_newbudgetlineitem_set-1-line_item_description">
</div>
<br/>
<div>
SET 2
<input type="text" name="id_newbudgetlineitem_set-2-line_item_december" value="4">
<input type="text" name="id_newbudgetlineitem_set-2-line_item_oct" value="5">
<br/> Total :
<input type="text" name="id_newbudgetlineitem_set-2-line_item_total" value="" placeholder="total">
<input type="text" name="id_newbudgetlineitem_set-2-line_item_cost_center">
<input type="text" name="id_newbudgetlineitem_set-2-line_item_description">
</div>

This was the final working code. As Swati suggested it was an incorrect name reference.
function update_total_total_total() {
for (var i = 0; i < $("[name$=line_item_total]").length; i++) {
var total = 0;
$(`input[name*=newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(i, element) {
var val = parseFloat($(element).val());
if( !isNaN( val )){
total += val;
}
})
$(`input[name$=set-${i}-line_item_total]`).val(total);
}
}

Loop through multiple form and get their input values in jquery

I am dynamically generating forms using jquery. How can I loop through all the forms and alert their input values.
CODE FOR GENERATING FORMS
$.ajax({
method: 'GET',
url: 'api/PayrollSystem/GetEmployeeSalaryAmount?AdminId=' + 1,
success: function(data) {
if (Object.keys(data).length == 0) {
$.alert({
title: 'Saved',
content: 'Account Number Saved!',
});
var row = ('<tr ><td colspan="3" text-align="center"> <b>No Registered Users</b></td></tr>');
$('.EmpTable').append(row);
} else {
$.each(data, function(index, value) {
var rows = ('<div id="form_div"><form method="post"><table class="table table-hover employee_table' + index + ' " align=center><thead><tr><td><b>Employee</td> <td><b>Amount</td></tr></thead><tbody><tr><td><b>' + value.FullName + '</b></td><td><input type="hidden" class="form-control Leavename" name="Leavename[]" value="Basic" placeholder="Enter Leave Name"> <input readonly class="form-control LeaveAmount" type="number" name="LeaveAmount[]" value=' + value.SalaryAmount + ' /><input class="form-control EmpId" type="hidden" name="Id[]" value=' + value.Id + ' /></td></tr><tr id="row' + index + 1 + '"><td><input type="text" class="form-control Leavename" name="Leavename[]" placeholder="Enter Leave Name"> </td><td> <input type="number" class="form-control LeaveAmount" name="LeaveAmount[]" placeholder="Enter Leave Amount"></td> </tr></tbody> </table> <input type="button" class="btn btn-success addRow" onclick="add_row(' + index + '); " value=" + Add More Payroll Item"></form> </div><hr />');
$('.EmpTable').append(rows);
});
}
}
});
WHERE I TRIED GETTING THE VALUES OF THE INPUT FIELD BY ID
$('#saveAdj').click(function() {
$('form').each(function() {
alert($('.EmpId').val());
});
});

$('#saveAdj').click(function() {
$('form').each(function() {
var thisForm = this;
alert($('.EmpId', thisForm).val());
});
});
$('selector', container) will help you to search from container only;

You aren't providing any context for where to find .EmpId.
The callback function passed to the each() method will automatically be passed values for accessing the collection being enumerated. If you use those argument values, you can provide that context by passing it as the second argument to the JQuery object.
$('#saveAdj').click(function() {
// JQuery's .each() method will automatically pass 3 arguments
// to the provided callback function:
// a reference to the index position of that element
// a reference to the element being enumerated at the moment
$('form').each(function(index, element) {
// The element argument can be passed as the second argument to
// the JQuery object (after the selector) to provide context for where to search
alert($('.EmpId', element).val());
});
});

how to dynamically increment input control by JavaScript....?

I used for loop to copy the table to n times. The code below works only in first table. How can i get to work in all tables?. I am a beginner.
function copy() {
var text1 = document.getElementById("Name1").value;
document.getElementById("Name2").value = text1;
var text2 = document.getElementById("Name3").value;
document.getElementById("Name4").value = text2;
}
<td rowspan="3" style="height:100px;">Name <input type="text" name="Emp name" placeholder="enter your name" id="Name1" /><br> ID <input type="id" name="Emp Id" placeholder="enter id" id="Name3"> </td>
<tr id="p001">
<td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy();" /><label for="text"> Name : <input type="text" id="Name2"></label>
<label for="text"> ID : <input type="id" id="Name4"></label> </td>
</tr>

ID's should always be unique. When using duplicate ID's it will only work on the first one and ignore the rest. By pushing in the selector to the function you can reuse your function for multiple tables.
https://jsfiddle.net/m5aqdswe/
onclick="copy('Name');"
function copy(selector) {
var text1 = document.getElementById(selector + "1").value;
document.getElementById(selector + "2").value = text1;
var text2 = document.getElementById(selector + "3").value;
document.getElementById(selector + "4").value = text2;
}
Hope this helps
EDIT TO HELP WITH YOUR FIDDLE MISTAKE
After checking your code I can see that you haven't implemented my fix. You have an onclick on the button calling copy();. You're not passing in any arguments so your JS is static. So when you add another table you're creating duplicate ID's.
When searching for an ID document.getElementById("Name1") it will search through the DOM until it finds that first id="Name1" and then stop. That is why your second table never works.
To fix that we need to push in your ID name to the function so that the JS becomes dynamic. copy('Name') where "Name" is the first part of your ID. The numbers will still be used.
In the function you need to grab that arguments by passing it in to the function and calling it whatever you like. I chose 'selector' because it is most descriptive. onclick="copy(selector)"
No the function will replace all the 'selector' variables with the string you passed through, namely "Name" so document.getElementById(selector + "1") will actually be document.getElementById("Name1"). This way you can create as many clones as you like but remember to change the clone table ID's and pass in the correct argument to the onclick.
Here is your fixed fiddle. https://jsfiddle.net/3shjhu98/2/
Please don't just copy, go see what I did. You'll need to fix your clone function to use dynamic arguments instead of static ones.

function check() {
var rowCount = $('table.mytable tbody tr');
for (var index = 0; index < rowCount.length; index++) {
var tr = $('table.mytable tbody tr')[index];
var td = $(tr).find('td');
for (var j = 0; j < rowCount.length; j++) {
copy('table.mytable tbody tr[data-index=' + index + '] td[data-index=' + j + ']');
}
}
}
function copy(selector) {
var val_1 = $(selector).find('input:first').val();
$(selector).find('input:last').val(val_1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="mytable">
<tbody>
<tr data-index="0">
<td data-index="0">
<input type="text" onblur="check()" />
<input type="text" />
</td>
</tr>
</tbody>
</table>
Hi. try it...

I think you need to pass table selector like [ table.className ] etc. then you find input text box and get the value this and paste into another text box.
Like this.
///it mean you pass first table row of first table data.
copy('table.className tbody tr[data-index=1] td[data-index=1]');
function copy(selector) {
var val_1 = $(selector).find('input#Name1').val();
$(selector).find('input#Name2').val(val_1);
}

handle incrementing number of array ID in duplicated form field set (regex)

I need to duplicate rows of a form ( in a table )
See jsbin here : http://jsbin.com/ExiRAMa/1/edit
The markup :
<div id="o99_the_work">
<table><tbody>
<tr>
<!-- THE ORDER -->
<td>X</td>
<td class="small-text"><span class="wpcf7-form-control-wrap submitted-file"><input type="file" name="submitted-file" value="1" size="40" class="wpcf7-form-control wpcf7-file" id="submitted-file-1"></span></td>
<td><span class="wpcf7-form-control-wrap number-of-copies"><input type="text" name="number-of-copies" value="" size="40" class="wpcf7-form-control wpcf7-text small-text" id="number-of-copies-1"></span></td>
<td><span class="wpcf7-form-control-wrap checkbox-copy-type"><span class="wpcf7-form-control wpcf7-checkbox" id="copy-type-1"><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="color"> <span class="wpcf7-list-item-label">color</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="bw"> <span class="wpcf7-list-item-label">bw</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="transperant"> <span class="wpcf7-list-item-label">transperant</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="pergament"> <span class="wpcf7-list-item-label">pergament</span></span></span></span></td>
<td><span class="wpcf7-form-control-wrap submitted-remarks"><input type="text" name="submitted-remarks" value="" size="40" class="wpcf7-form-control wpcf7-text" id="submitted-remarks-1"></span> </td>
</tr></tbody></table>
<button id="add_row">Add new</button>
</div>
The JS :
jQuery("#add_row").click(function() {
var row = jQuery("#k99_the_work tbody > tr:last"),
newRow = row.clone(true);
newRow.find("input[type=text],input[type=file]").each(function() {
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
this.id = this.id.replace(/\d+$/, "") + num;
this.name = this.id;
});
newRow.insertAfter(row);
return false;
});
As you can see from the bin, the scripts works fine on input=text and it is incrementing both the name and ID - but my problem is how to deal with the checkboxes .
I need to increment the name, ID etc , while keeping it seperate arrays checkbox-copy-type[] .
Meaning , after duplication i need checkbox-copy-type-1[], checkbox-copy-type-2[] etc
I am by no means a regex person, but I tried adding :
newRow.find("input[type=checkbox]").each(function() {
var num = +(this.id.match(/checkbox-copy-type/) || [0])[0] + 1;
// this.id = this.name.replace(/\[]/, "vv") + num;
this.id = this.name.replace(/\[]/, "") + num;// take off the brackets
this.id = this.name + "[]" ;// add the brackets again
this.name = this.id;
});
But all I get when I try this is another set of brackets e.g. checkbox-copy-type[][] ,checkbox-copy-type[][][]

You can store the item in the data portion of html (if its unique for each tr/checkbox) retrieve it that way and then increment it, then add the brackets in.
HTML
<tr data-name="myName"></tr>
javascript
newRow.find("input[type=checkbox]").each(function(x, item) {
var name = $(item).data('name'); //this give you the name if it unique
var newName = name + x + '[]' // this give final result
});

I have resolved it like so :
newRow.find("input[type=checkbox]").each(function() {
var parentid = jQuery(this).parent().parent();
var num = +(this.id.match(/checkbox-copy-type+$/) || [0])[0] + 1;
this.id = this.name.replace(/\d+/, function(val) { return parseInt(val)+1; });
this.name = this.id;
parentid.attr("id",parentid.attr("id").replace(/\d+/, function(val) { return parseInt(val)+1; }));
});

Autofill Amount

I have this split function which I can add more fields by clicking the button. My Problem are if I add a field I can't get the exact amount and back the amount if I remove the field.
Sample Scenario:
The above image show the initial amount -1,000.50. Now these are my problems.
I input 50 in the amount of first field which result to Payee: 1 [-950.50] as the remaining amount for payee. When I add another field it's auto fill the amount and I expect -950.50 because that's the remaining amount. But what I get is the initial amount -1,000.50 in the second field. How to get the updated remaining amount?
If I remove the added field I want to added back the amount. For ex. if the field has 50 and the remaining amount is -950.50. If I remove the field that contains amount of 50 it must be added back in the remaining amount and it will be -1,000.50. How to added back the amount?
Here are what I have tried:
split.html
<table id="dataTable" class="calendar fluid" data-calendar-options='{"maxHeight":70}'"
<caption> Payee: 1
[<span id="remaining">-1,000.50</span>]
</caption>
<tbody>
<tr>
<td class="week-end" id="p_scents"><br/>
*Note: Amount totals must equal transaction total and envelopes must be specified to
enable the split button.<br/><br/>
<p class="button-height">
<span class="input">
<label class="button orange-gradient">Envelope #1</label>
<select name="env[]" class="envelope select compact">
<option value="none">(Select)</option>
<optgroup label="Category">
<option value="1">Internet</option>
<option value="2">Savings</option>
</optgroup>
</select>
<input type="text" name="amt[]" placeholder="0.00" size="10"
id="validation-required" class="input-unstyled input-sep validate[required]"
onkeyup="calculate(0)">
<input type="text" name="note[]" placeholder="note" class="input-unstyled" id="note">
</span>
<span class="with-tooltip">
<img src="{{STATIC_URL}}img/icons/tick.png" title="Default">
</span>
</p><br/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="javascript:{}" id="addScnt" class="button orange-gradient icon-plus-round">
Another Envelope
</a>
</td>
</tr>
</tfoot>
</table>
<script>
function calculate(difference) {
var sum = 0;
$(":text").each(function() {
amt = replaceCommaDollar(this.value);
if(!isNaN(amt) && amt.length!=0) {
sum += parseFloat(amt);
total = sum;
difference = -1,000.50 + total
}
});
$("#remaining").html(numberWithCommas(difference.toFixed(2)));
if(difference == 0){
$("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
}else{
$("#split").html("<button type='submit' class='button orange-gradient' disabled='disabled'>Split Amount</button>");
}
}
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
var remain_amount = Math.abs(replaceCommaDollar($("#remaining").text())).toFixed(2);
$('#addScnt').live('click', function() {
$('<p class="button-height">'+
' <span class="input">'+
' <label class="button orange-gradient">' + 'Envelope #' + i + '</label>' +
' <select name="env[]" class="envelope select compact">'+
' <option value="none" selected="selected">(Select)</option>' +
' <optgroup label="Category">' +
' <option value="1">Internet</option>' +
' <option value="2">Savings</option>' +
' </optgroup>' +
' </select>' +
' <input type="text" name="amt[]" id="split-amount' + i + '" placeholder="0.00" size="10" class="input-unstyled input-sep" onkeyup="calculate(0)" value="'+ remain_amount +'">'+
' <input type="text" name="note[]" placeholder="note" class="input-unstyled">'+
' </span>'+
' Remove</p><br/\>'
).appendTo(scntDiv);
$("#remaining").html('0.00');
$("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
test = $('#split-amount'+i).val();
alert(test);
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>

How to get the updated remaining amount? You are calculating remain_amount on document ready, instead of when you click the add button. You need to move its calculation within the click handler for #addScnt. Just make it the first line of that function and it should recalculate accordingly.
How to added back the amount? We can do this by reading the value out of the input field we are removing. Here is the modified remove click handler to demonstrate.
$('#remScnt').live('click', function() {
// Might not need the if statement
if (i > 2) {
//test = $('#split-amount' + i).val();
//alert(test);
var $p = $(this).parents('p');
// Consider this approach to getting the removed value
var textValue = $p.find('input[name="amt[]"]').val();
var numValue = replaceCommaDollar(textValue);
var $remaining = $("#remaining");
var remainingValue = replaceCommaDollar($remaining.text());
var difference = remainingValue - numValue;
var newRemainingValue = numberWithCommas(difference.toFixed(2)))
$("#remaining").text(newRemainingValue);
$p.remove();
// This might not be needed anymore
i--;
}
return false;
});
Note that given my approach to obtaining the removed value, you might be able to get rid of the logic involving i unless you have other work to do. Consider searching the DOM based on the element you're removing. This is probably slower to execute, but not unreasonably so. It's your choice though and it shouldn't matter too much either way. I think my suggestion is easier to maintain, and if I were to optimize there are other aspects of this page that deserve more attention.
I also recommend creating a functional jsFiddle in the future, your problem would have been much easier to test and solve with a functioning example. I tried creating one, but I had to alter the HTML and JavaScript too significantly, as there are missing JavaScript functions in the source you provided.
I hope that helps! Feel free to ask any questions regarding my answer, but please don't expand the scope of your original problem.