Jquery/javascript calculation issue in array of records - javascript

I am doing some calculations in my php script. its done in jquery/javascript. I have a small issue with my following script. The actual scenario is its getting the Total INR value, In the Add (%) field i add the percentage. So the system calculates and add this percentage to the Total Value. Its perfect in the first row of record. But in the second row, its taking the value of the first row. Iam making a small mistake. My script is following. Pls help me on this.
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script type='text/javascript'>
//<![CDATA[
function getIndexedElement(item, index) {
if (item.length) {
if (index < item.length) {
return item[index];
} else {
return false;
}
} else {
if (index === 0) {
return item;
}
}
return false;
}
function isNum(value) {
return 123;
}
function calcTotals() {
var grandTotal = 0;
var i = 0;
while (getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i)) {
add_percentageObj = getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i);
addon_valueObj = getIndexedElement(document.forms['cart'].elements['addon_value[]'], i);
total_inr_valueObj = getIndexedElement(document.forms['cart'].elements['total_inr[]'], i);
totalObj = getIndexedElement(document.forms['cart'].elements['add_value[]'], i);
priceunitObj = getIndexedElement(document.forms['cart'].elements['price_unit[]'], i);
qtyObj = getIndexedElement(document.forms['cart'].elements['qty[]'], i);
if (isNaN(add_percentageObj.value)) {
add_percentageObj = '';
}
if (isNaN(addon_valueObj.value)) {
addon_valueObj = '';
}
if (add_percentageObj.value != 0) {
totalObj.value = Math.round((total_inr_valueObj.value * 1) * add_percentageObj.value / 100) + total_inr_valueObj.value * 1;
grandTotal = grandTotal + parseFloat(totalObj.value);
//priceunitObj.value = total1Obj.value/qtyObj.value;
//c.value=Math.round((b.value/100) *a.value ).toFixed(2);
} else if (addon_valueObj.value) {
totalObj.value = Math.round((addon_valueObj.value * 1) + total_inr_valueObj.value * 1);
grandTotal = grandTotal + parseFloat(totalObj.value);
//priceunitObj.value = total1Obj.value/qtyObj.value;
} else {
totalObj.value = Math.round((addon_valueObj.value * 1) + total_inr_valueObj.value * 1);
grandTotal = grandTotal + parseFloat(totalObj.value);
//priceunitObj.value = total1Obj.value/qtyObj.value;
}
i++;
}
document.getElementById('grand_total').value = grandTotal;
return;
}
</script>
</head>
<body>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=14'>
<input type='hidden' name='sum_input' id='sum_input' value=''>
<div align="center">
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr bgcolor="#E6E6FA">
<td width=4%>Qty</td>
<td width=5%>Unitprice</td>
<td width=8%>Total INR</td>
<td width=5%>Add (%)</td>
<td width=7%>Add Value</td>
<td width=6%>Total Value</td>
<td width=8%>Total</td>
<td width=8%>Price/Unit</td>
</tr>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr>
<td width='4%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='20' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='unitprice[0]' value='678.000' readonly/>
</td>
<input size='4' type='hidden' id='total_inr[]' name='total_inr[]' value='883332.313' />
<td width='8%'>
<input size='10' type='text' id='total_inr[]' name='total_inr[]' value='883332.300' />
</td>
<td width='5%'>
<input class='' size='4' type='text' id='add_percentage[]' name='add_percentage[]' value='0' onchange='calcTotals()'>
</td>
<td width='7%'>
<input class='txt' type='text' size='7' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
</td>
<td width='6%'>
<input class='total' data-value='883332' size='6' type='text' id='add_value[]' name='add_value[]' value=''>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="65.1425">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<td width="8%">
<input size="9" type="text" data-value="" name='total1[]' id='total1[]' value="16271.993" readonly class="total1" />
</td>
<td width='8%'>
<input class='price_unit' size='7' type='text' id='price_unit[]' name='price_unit[]' value='813.600' readonly>
</td>
</tr>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr>
<td width='4%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='360' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='unitprice[1]' value='569.000' readonly/>
</td>
<td width='8%'>
<input size='10' type='text' id='total_inr[]' name='total_inr[]' value='13343789.700' />
</td>
<td width='5%'>
<input class='' size='4' type='text' id='add_percentage[]' name='add_percentage[]' value='0' onchange='calcTotals()'>
</td>
<td width='7%'>
<input class='txt' type='text' size='7' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
</td>
<td width='6%'>
<input class='total' data-value='883332' size='6' type='text' id='add_value[]' name='add_value[]' value=''>
</td>
<td width="8%">
<input size="9" type="text" data-value="" name='total1[]' id='total1[]' value="16000.803" readonly class="total1" />
</td>
<td width='8%'>
<input class='price_unit' size='7' type='text' id='price_unit[]' name='price_unit[]' value='44.447' readonly>
</td>
</tr>
</table>
</div>
<table width='100%'>
<tr>
<td width='3%'> </td>
<td width='4%'> </td>
<td width='17%'> </td>
<td width='5%'> </td>
<td width='5%'> </td>
<td width='6%'> </td>
<td width='5%'> </td>
<td width='7%'> </td>
<td width='8%'> </td>
<td width='5%'> </td>
<td height=35><b>Grand Total: <input type='text' style='font-weight: bold' name='gTotal' id='grand_total' value='1766664.000' readonly /></b></td>
</tr>
<tr>
</table>
<br>
</div>
<table border='0' width='13%'>
<td>
<input type='submit' value='--Save Data--' />
</td>


Element ID's have to be unique. If you refer to an element by id, and there are multiple elements with the same ID, then you likely only going to get the first one back. Also, I suspect that elements["name"] does not give an array back, but a unique element.
Instead try using something like this instead:
cartForm = document.forms['cart'];
...
add_percentageObj = getIndexedElement(cartForm.getElementsByName('add_percentage[]'), i);
An element name does not have to be unique. I see that you are already using both id and name anyhow on your elements.
Also I would suggest writing a function like this (untested):
function getCartElement(name, index) {
namedElements = document.forms['cart'].getElementsByName(name);
if (index >= namedElements.length) return null;
return namedElements[index];
if (item.length) {
}
Anyway, the rest of your code would look like something like this:
while (getCartElement('add_percentage[]', i) != null) {
add_percentageObj = getCartElement('add_percentage[]', i);
addon_valueObj = getCartElement('addon_value[]', i);
...
Note that I made sure that your function returns a consistent datatype, not one time boolean, another time an element instance ... this does mean however that you will require to check for null values.
Reference:
getElementsByName
getElementsById
elements
Also read this other stackoverflow article

Related

How to get values from table data of same class name and append

I have a table which contains team names and scores. I have made a demo here Fiddle Link
When I click the Submit button, it will show the output of one match only (Team A and B only) but not the other matches.
Since they all share the same class name for the name and score, How to go on about that?
HTML
<table>
<tr data-match="match1">
<td class="team1n">Team A</td>
<td>
<input type="number" id="ts1" class="ts1" value="3">
</td>
<td>
<input type="number" class="ts2" value="1">
</td>
<td class="team2n">Team B</td>
</tr>
<tr data-match="match2">
<td class="team1n">Team C</td>
<td>
<input type="number" class="ts1" value="2">
</td>
<td>
<input type="number" class="ts2" value="3">
</td>
<td class="team2n">Team D</td>
</tr>
<tr data-match="match3">
<td class="team1n">Team E</td>
<td>
<input type="number" class="ts1" value="2">
</td>
<td>
<input type="number" class="ts2" value="1">
</td>
<td class="team2n">Team F</td>
</tr>
</table>
<button type="button" id="sprd">Submit</button>
<div class="textbox"></div>
JS
$("#sprd").click(function() {
const matchid = $('tr').data("match");
const team1n = $('.team1n:eq(0)').text();
const team1s = parseInt($(".ts1:eq(0)").val());
const team2n = $('.team2n:eq(0)').text();
const team2s = parseInt($(".ts2:eq(0)").val());
$('.textbox').append(team1n + " --- " + "<b>"+ team1s+ "</b>"+ " - " + "
<b>"+ team2s+ "</b> --- "+ team2n);
});

You have to loop each tr elemnt in table and then get values , after puttinh them in result , after the loop render the result .
See below snippet :
$("#sprd").click(function() {
var result = "";
$("table tr").each(function(index,el) {
var match = $(el).data("match");
result +="<div class='macth'>"+match+"</div>";
var team1 = $(el).find('.team1n').text();
var team2 = $(el).find('.team2n').text();
var score1 = $(el).find('.ts1').val();
var score2 = $(el).find('.ts2').val();
result += '<div>'+team1+ " --- " + "<b>" + score1 + "</b>" + " - " + "<b>" + score2 + "</b> --- " + team2+'</div>';
});
$('.textbox').html(result);
});
.macth {
color:green;
text-transform:capitalize;
font-weight:bold;
margin-top:15px;
}
.textbox {
margin:auto;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-match="match1">
<td class="team1n">Team A</td>
<td>
<input type="number" id="ts1" class="ts1" value="3">
</td>
<td>
<input type="number" class="ts2" value="1">
</td>
<td class="team2n">Team B</td>
</tr>
<tr data-match="match2">
<td class="team1n">Team C</td>
<td>
<input type="number" class="ts1" value="2">
</td>
<td>
<input type="number" class="ts2" value="3">
</td>
<td class="team2n">Team D</td>
</tr>
<tr data-match="match3">
<td class="team1n">Team E</td>
<td>
<input type="number" class="ts1" value="2">
</td>
<td>
<input type="number" class="ts2" value="1">
</td>
<td class="team2n">Team F</td>
</tr>
</table>
<button type="button" id="sprd">Submit</button>
<div class="textbox">
</div>

How to disable all checkboxes when page loads in jquery?

I'm working on this table that has checkboxes for each row. Basically, I want all of the email input fields to be disabled once page loads. If the users clicks on the checkbox that belongs to a row then the email input field for that row should be enabled so the user can type in an email. Finally, if the user clicks on the Select all checkbox all of the input fields should be enabled/disabled. For some reason I can only disabled the first, second and last input field once page loads. My Select All checkbox is not working properly either :(. Can anyone tell me what I'm doing wrong please? Thanks in advance!
var users = $("tr")
.filter(function () {
return $(this).find('.inputEmail').val() !== "" && $(this).find(".input_checkbox").is(':checked');
})
.map(function () {
var $row = $(this);
return {
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
}
})
.get();
console.log('Array containing all users with an email:');
console.log(users);
Here's my code - LIVE DEMO:
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="width:1140px;">
<br/>
<table>
<div>
<tr>
<td align="center" valign="bottom">Select All
<br/>
<input type="checkbox" id="checkAll" value="" />
</td>
<td width="5"></td>
<td width="200" valign="bottom">Name</td>
<td align="center" class="table-col-phone" style="padding-left:20px;">Phone # / Extension</td>
<td width="50"></td>
<td valign="bottom" style="padding-left: 90px;">Email</td>
</tr>
<tr>
<td style="font-weight: bold;">Group1</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ben Morris</td>
<td align="left" class="usersPhoneNumber">3033422109</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Mike Jeff</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group2</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ana McLwius</td>
<td align="left" class="usersPhoneNumber">3039899231</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Zumia Brown</td>
<td align="left" class="usersPhoneNumber">3033213453</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group3</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Bryan Smith</td>
<td align="left" class="usersPhoneNumber">3033222098</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Junior White</td>
<td align="left" class="usersPhoneNumber">3030098342</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="2customer-name-checkbox" name="2 " value="">
</td>
<td class="fullName">Peter McDonald</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="2" id="2customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
</div>
</table>
<button id="submitButton" type="button" class="sign-in-button" style="text-align: center;margin-left: 428px;" value="Submit" />Submit</button>
</div>

You should search email input based on the current element. You are having duplicate ids.
try this:
$(this).closest('tr').find('input[type;"text"]').attr("disabled", !this.checkbox);
Updated Fiddle
Note I have taken leisure to update your code. Hope it helps!
Getting Data
You can try something like this:
Note I have updated Group label rows and have added class in it.
Updated Fiddle
$("#submitButton").on("click", function() {
var result = {};
var group_id = "";
$("table tr").each(function(index, row) {
var $row = $(row)
group_id = $row.hasClass("section-label") ? $row.find("td:first").text() : group_id;
if (group_id && $row.find(".input_checkbox").is(':checked') && $row.find('.inputEmail').val().trim() !== "") {
result[group_id] = result[group_id] || [];
result[group_id].push({
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
});
}
});
console.log(result)
})

Obviously because of the duplicated ids.
try this:
function enable_disable_input(checkbox) {
$(checkbox).parents('tr').find('input[type="email"]').prop('disabled', !checkbox.checked);
}

Your code seems a little messy, something like this would work and it's more readable
$(document).ready(function () {
$("#checkAll").change(function () {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
});
$(".input_checkbox").change(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
$('.inputEmail').each(function(){
$(this).prop('disabled', true);
})
});
full working example
Also, you should remove the duplicated ID's.

javascript .innerHTML() inserts outside div

I have a table and a button, when the button is pressed it adds a new input into the table inside a div, when I add the input manually inside the div and test it it works, but when the script adds it it goes outside the table.. why is that? how can i fix this issue?
html:
..
<script> var x=0; </script>
...
<table>
<tr>
<td>From:</td>
<td><input type="text" name="from" /></td>
</tr>
<tr>
<td>To (email):</td>
<td><input type="text" name="to0" /></td>
<td><input type='button' onclick='newMail()' value='Add recipient'/> </td>
</tr>
<div id="add">
<tr>
<td>To (email):</td> <!-- this works -->
<td><input type="text" name="to0" /></td>
</tr>
</div>
<tr>
<td align="center" colspan="2"><input type="submit" value="send"></td>
</tr>
</table>
JS:
function newMail()
{
x=x+1;
var input =
" <tr>"+
" <td>To (email):</td>"+
" <td><input type='text' name='to"+x+"' /></td>"+
" </tr>";
document.getElementById("add").innerHTML += input;
}
the function works and adds the input and everything, but it goes outside the table, whilst the one inside the div that i manually added works fine and is displayed normally.

Try this one: https://jsfiddle.net/0dh52827/
JAVASCRIPT
$( document ).ready(function() {
$("#add_recipient").click( function() {
x = x + 1;
console.log(x);
var input =
" <tr>" +
" <td>To (email):</td>" +
" <td><input type='text' name='to" + x + "' /></td>" +
" </tr>";
$("#add").prepend(input);
});
});
HTML:
<script>
var x = 0;
</script>
<table id="add">
<tr>
<td>From:</td>
<td>
<input type="text" name="from" />
</td>
</tr>
<tr>
<td>To (email):</td>
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td>To (email):</td>
<!-- this works -->
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td align="left">
<input type="submit" value="send">
</td>
<td align="right">
<input id="add_recipient" type='button' value='Add recipient' />
</td>
</tr>
JQUERY Prepend is designed for things like this.

Check this please
function newMail() {
x = x + 1;
var input =
" <tr>" +
" <td>To (email):</td>" +
" <td><input type='text' name='to" + x + "' /></td>" +
" </tr>";
document.getElementById("add").innerHTML += input;
}
<script>
var x = 0;
</script>
<table>
<tr>
<td>From:</td>
<td>
<input type="text" name="from" />
</td>
</tr>
<tr>
<td>To (email):</td>
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td>To (email):</td>
<!-- this works -->
<td>
<input type="text" name="to0" />
</td>
</tr>
<tbody id="add"></tbody>
<tr>
<td align="left">
<input type="submit" value="send">
</td>
<td align="right">
<input type='button' onclick='newMail()' value='Add recipient' />
</td>
</tr>

The element with id="add" is a <div> in a <table> (which is not properly placed but might work in some browsers). Adding code to it has at least an undefined behavior.
You should instead remove the <div> tag and give the <tr> tag the id="add" attribute and then use document.getElementById("add").appendChild() method to add a new html node. To create this node, don't use text but document.createElement() like described in MDN

jQuery loop calculation

I am trying to bring some records using php and do some calculations. What i am doing now is that, each row is having a dropdown with different currencies. When i select each currency, it calculates and shows certain values. Till here its working fine.
What i am trying to achieve is that if i select first currency dropdown, it should calculate the complete records calculations instead of selecting the currency of each rows. I guess i need to do some kind of loop in the jquery which calculates the rows.
Fiddle
Fiddle u can see the code, but not getting the output properly. so i just put the code in a server also. Link is http://spreadon.net/quot.html
Following is the part of jquery script for the currency dropdown.
$(window).load(function() {
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
});
});
});

I have added working code which will guide you how to iterate through tr and it td on change of select
see the code it will give you hint about it.
and you have a power of this in each method usind this you can achive your goal.
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
// this is upto your logic.
//now i have write my code which will ittrate through each row and column
$(".trToiitrate").each(function(e) {
alert("it is from tr");
$(this).find("td").each(function(e) {
alert("this is from td");
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=151399'>
<input size='1' type='hidden' name='id[3]' value='1582' readonly/>
<input type='hidden' name='sum_input' id='sum_input' value=''>
<div align="center">
<table width="100%" border="1" style="border-collapse: collapse;">
<thead>
<tr bgcolor="#E6E6FA">
<th width=6%>SlNo</th>
<th width=15%>Description</th>
<th width=5%>Qty</th>
<th width=5%>Unit Price</th>
<th width=5%>Total</th>
<th width=8%>Total (INR)</th>
<th width=7%>Total Value</th>
<th width=7%>Currency</th>
<th width=7%>Total</th>
<th width=7%>Price/Unit</th>
</tr>
</thead>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;">
<tbody id="people">
<tr class="trToiitrate">
<td width='6%'>
<input size='1' type='hidden' name='id[0]' value='1579' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='15%' id='addinput'>
<input type='text' size='19' id='item_name0' name='item_name[0]' placeholder='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' value='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' />
</td>
<td width='5%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='10' readonly/>
</td>
<td width='5%'>
<input size='1' type='text' name='unitprice[0]' value='223.15' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='total_old' value='2231.500' readonly/>
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='219479.000' />
</td>
<input class='txt' type='hidden' size='3' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
<td width='7%'>
<input class='total' size='6' type='text' id='add_value[]' name='add_value[]' value='373114'>
</td>
<td width='7%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=68.128019>INR</option>
<option value=GBP data-price=0.692675>GBP</option>
<option value=EUR data-price=0.895982>EUR</option>
<option selected="selected" value=SGD data-price=1.400105>SGD</option>
<option value=AUD data-price=1.3949>AUD</option>
<option value=CAD data-price=1.377725>CAD</option>
<option value=CHF data-price=0.986467>CHF</option>
<option value=JPY data-price=114.6032>JPY</option>
<option value=MYR data-price=4.136531>MYR</option>
<option value=ZAR data-price=15.73123>ZAR</option>
</select>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="68.128019">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<input type="hidden" class="cs" id="cs" name="cs" value="SGD">
<td width="7%">
<input size="5" type="text" data-value="" name='total1[]' id='total1[]' value="13531.598" readonly class="total1" />
</td>
<td width='7%'>
<input class='price_unit' size='6' type='text' id='price_unit[]' name='price_unit[]' value='1353.160' readonly>
</td>
</tr>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;">
<tbody id="people">
<tr class="trToiitrate">
<td width='6%'>
<input size='1' type='hidden' name='id[1]' value='1580' readonly/>
<input size='1' type='text' name='sl[1]' value='2' readonly/>
</td>
<td width='15%' id='addinput'>
<input type='text' size='19' id='item_name1' name='item_name[1]' placeholder='CONAP CE-1170 ACRYLIC CONFORMAL COATING AS PER MIL-1-46058, Type AR,Size: 01 quart = 0.8 kg' value='CONAP CE-1170 ACRYLIC CONFORMAL COATING AS PER MIL-1-46058, Type AR,Size: 01 quart = 0.8 kg'
/>
</td>
<td width='5%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='2' readonly/>
</td>
<td width='5%'>
<input size='1' type='text' name='unitprice[1]' value='285' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='total_old' value='570.000' readonly/>
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='27735.800' />
</td>
<input class='txt' type='hidden' size='3' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
<td width='7%'>
<input class='total' size='6' type='text' id='add_value[]' name='add_value[]' value='83207.4'>
</td>
<td width='7%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=68.128019>INR</option>
<option value=GBP data-price=0.692675>GBP</option>
<option value=EUR data-price=0.895982>EUR</option>
<option selected="selected" value=SGD data-price=1.400105>SGD</option>
<option value=AUD data-price=1.3949>AUD</option>
<option value=CAD data-price=1.377725>CAD</option>
<option value=CHF data-price=0.986467>CHF</option>
<option value=JPY data-price=114.6032>JPY</option>
<option value=MYR data-price=4.136531>MYR</option>
<option value=ZAR data-price=15.73123>ZAR</option>
</select>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="68.128019">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<input type="hidden" class="cs" id="cs" name="cs" value="SGD">
<td width="7%">
<input size="5" type="text" data-value="" name='total1[]' id='total1[]' value="1710.003" readonly class="total1" />
</td>
<td width='7%'>
<input class='price_unit' size='6' type='text' id='price_unit[]' name='price_unit[]' value='855.001' readonly>
</td>
</tr>
<div align="center" class="base">

How to get the dynamically cloned table textbox value?

All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>

$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.

Categories