I have tried a couple of things but just cannot seem to get this right! I have the following document (code will follow), that calculates automatically AND add fields to add more quantities. But if qty_1 is changed (manually), and another calculation is added, the "changed qty_1" reverts back to the first calculated value. I would like the changed value to remain.
The file:
<script>
function calculate(){
for(var i=1; i<=ct; i++){
var currentDiv = document.getElementById(i);
var ori_qty = currentDiv.getElementsByTagName('input')[0].value;
var total = Math.round(ori_qty/0.8);
currentDiv.getElementsByTagName('input')[1].value = total;
currentDiv.getElementsByTagName('input')[2].value = total;
};
}
var ct = 1;
function new_combi(){
ct++;
var div1 = document.createElement('div');
div1.id = ct;
// link to delete extended form elements
var delLink = '<div style="text-align:right;margin-right:65px">Delete</div>';
div1.innerHTML = document.getElementById('var_roo_fields').innerHTML + delLink;
document.getElementById('addCom').appendChild(div1);
}
function delIt(eleId){
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('addCom');
parentEle.removeChild(ele);
}
</script>
<form id="form1" name="form1" method="post" action="">
<div id="addCom" style="width:100%">
<div id="1">
<table class='table1' width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="25%" valign="top">Original Quantity</td>
<td width="27%" valign="top"><input type="text" name="ori_qty[]" onBlur="calculate()" /></td>
<td width="24%" valign="top"> </td>
<td width="24%" valign="top"> </td>
</tr>
<tr>
<td valign="top">Quantity 1</td>
<td valign="top"><input type="text" name="qty_1[]" id="qty_1[]" />
</td>
<td valign="top">Quantity 2</td>
<td valign="top"><input type="text" name="qty_2[]" id="qty_2[]" /></td>
</tr>
</table>
</div>
</div>
Add Calculation
</form>
<!-- REPEAT FIELDS -->
<div id="var_roo_fields" style="display:none">
<div>
<hr />
<table class='table1' width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="25%" valign="top">Original Quantity</td>
<td width="27%" valign="top"><input type="text" name="ori_qty[]" onBlur="calculate()" /></td>
<td width="24%" valign="top"> </td>
<td width="24%" valign="top"> </td>
</tr>
<tr>
<td valign="top">Quantity 1</td>
<td valign="top"><input type="text" name="qty_1[]" id="qty_1[]" />
</td>
<td valign="top">Quantity 2</td>
<td valign="top"><input type="text" name="qty_2[]" id="qty_2[]" /></td>
</tr>
</table>
</div>
</div>
So what I would like is for the original amounts calculated - and changed manually - to stay the same after another calculation is added.
Here you have the fiddle: https://jsfiddle.net/y8une7ub/
Related
My "sign out" Name: form will not populate/output to the "Name" column in the chart under my forms. My time, drop down boxes and sign in/sign out buttons all work but even if I change the "id" to something like "tname" it still won't populate. I'm interested in ideas for a workaround if nothing else can be done to solve this. I will list my code below. Please advise.
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<h4><br></strong>
<table align="center" border="5">
<tr>
<td><label for="Name">Name:</label></tr< /td>
<input list="Names" name="Name" id="fname">
<tr>
<td><input type="button" value="SIGN IN" onclick="display()" /></td>
</tr>
<form name="SIGN OUT" id="form2" value="1" border="5">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td><input type="button" value="SIGN OUT" onclick="display()" /></td>
</tr>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display() {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", "#fname");
additem(".displayarea1", "#lname");
additem(".displayarea2", "#sname");
additem(".displayarea3", "#pname");
additem(".displayarea4", "#jname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
Considering the code provided, you need to get value from input with id #fname2 in case of SIGN OUT. You can either call separate functions on SIGN IN and SIGN OUT, or you can pass a value to display() function, based on which you can determine which input id to get value from. Below is the implementation of the second approach.
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display(isSignOut) {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", isSignOut ? "#fname2" : "#fname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
<table align="center" border="5">
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<tr>
<td>
<label for="Name">Name:</label>
<input list="Names" name="Name" id="fname">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="SIGN IN" onclick="display(false)" />
</td>
</tr>
</form>
<form name="SIGN OUT" id="form2" value="1" border="5" align="center">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td align="center">
<input type="button" value="SIGN OUT" onclick="display(true)" />
</td>
</tr>
</table>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>
so I have this table form that when you hit submit, it should display the information entered. but it only displays the first input entered. I have another table just like this one that works fine, so it must be a small thing that I'm just not seeing.
The table where you enter data:
<form id="symptomstable" name="symptomstable">
<table class="symptoms" width="700px" bgcolor="#BDDBCC" border="3" align="center">
<th><b>Symptoms</b></th>
<tr>
<td><input type="text" name="sym1" size="100" id="sym1"></td>
</tr>
<tr>
<td><input type="text" name="sym2" size="100" id="sym2"></td>
</tr>
<tr>
<td><input type="text" name="sym3" size="100" id="sym3"></td>
</tr>
<tr>
<td><input type="text" name="sym4" size="100" id="sym4"></td>
</tr>
<tr>
<td><input type="text" name="sym5" size="100" id="sym5"></td>
</tr>
<tr>
<td><input type="text" name="sym6" size="100" id="sym6"></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display1()"/></td>
</tr>
</table>
Where it outputs to:
<table width="900px" align="center" border=1>
<tr style="background-color:#BDDBCC;"></br>
<th align="center"><b>Symptoms Log</b></th>
</tr>
<tr>
<td align="center"><div id="symarea1"></div></td>
</tr>
<tr>
<td align="center"><div id="symyarea2"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea3"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea4"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea5"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea6"></div></td>
</tr>
</table>
The javascript:
function display1()
{
document.getElementById("symarea1").innerHTML = document.getElementById("sym1").value;
document.getElementById("sym1").value = "";
document.getElementById("symarea2").innerHTML = document.getElementById("sym2").value;
document.getElementById("sym2").value = "";
document.getElementById("symarea3").innerHTML = document.getElementById("sym3").value;
document.getElementById("sym3").value = "";
document.getElementById("symarea4").innerHTML = document.getElementById("sym4").value;
document.getElementById("sym4").value = "";
document.getElementById("symarea5").innerHTML = document.getElementById("sym5").value;
document.getElementById("sym5").value = "";
document.getElementById("symarea6").innerHTML = document.getElementById("sym6").value;
document.getElementById("sym6").value = "";
}
You just have a typo. If you open up your console after trying to submit the form, you will see that you have an error that says Cannot set property 'innerHTML' of null. If you look at the line it refers to, you will see that it references document.getElementById("symarea2").innerHTML = document.getElementById("sym2").value;
In your HTML, the ID of this element is currently symyarea2. See: <td align="center"><div id="symyarea2"></div></td>.
Check out how to use the console in Firefox and Chrome
Problem I have a form that the user fills out (basic things like your name, phone number, email, etc). It has a question that asks the user if you want your suggestion to remain anonymous and the user either selects yes or no.
The following image is what I am talking about:
If the user does not select either of the selections and submits the form, a alert box appears notifying the user to select one.
I am able to color a single radio selection red if the user has not selected either of them. I am able to color both radio selections red like the following:
And here is the function that checks whether or not either of those radio buttons have been selected:
myOption = -1;
for ( i=0; i < SubmitIdea.Anonymous.length; i++ ) {
if ( SubmitIdea.Anonymous[i].checked ) {
myOption = i;
}
}
if ( myOption == -1 ) {
alert( "Do you wish to remain anonymous?" );
SubmitIdea.Anonymous[0].focus();
SubmitIdea.Anonymous[0].style.backgroundColor = "red";
SubmitIdea.Anonymous[1].focus();
SubmitIdea.Anonymous[1].style.backgroundColor = "red";
return false;
}
However, I would like the rectangular background border surrounding both the Yes and No radio selection, not individually. This rectangular border will only occur if neither radio selection has been choosen when the user has submitted their results.
The following is the html:
<form name="SubmitIdea" method="POST" class="h">
<table Border="0" align="center">
<tr>
<td colspan="5"> </td>
</tr>
<cfoutput>
<tr>
<td class="m">Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Name" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Today's Date: </font></td>
<td class="mm">#TodaysDt#</td></tr>
</tr>
<tr>
<td class="mm">Department: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Department" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Supervisor Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Supervisor" value="" class="a" maxlength="32">
</tr>
<tr>
<td class="mm">Email: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="NomEmail" value="" class="a" maxlength="32" size="25"> <br />
</td>
<td width="50"> </td>
<td class="mm">Phone: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Phone" value="" class="a" maxlength="32">
</tr>
</table>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong> <input type="radio" value="No" name="Anonymous"> <strong>No</strong>
</td>
</tr>
</table>
</cfoutput>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Please provide a brief summary of your idea:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="5">
<textarea name="reason" id="textarea1" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxt(this)" onkeydown="limitTxtArea(this); cntTxt(this, 500, 'cnt');" onkeyup="limitTxtArea(this); cntTxt(this, 500, 'cnt');"></textarea>
<span id="cnt" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>I believe this suggestion will: (check all that apply)</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td class="e"><input type="checkbox" name="Sugg1" value="Improve Productivity/Quality">Improve Productivity/Quality </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg2" value="Improve Process">Improve Process </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg3" value="Increase Revenue">Increase Revenue </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg4" value="Decrease Expenses/Costs">Decrease Expenses/Costs </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg5" value="Improve safety in the workplace">Improve safety in the workplace </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg6" value="Improve Customer Service">Improve Customer Service </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg7" value="Enhance employee satisfaction / corporate culture">Enhance employee satisfaction/<br>corporate culture </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg0" value="Other">Other <input type="text" name="OtherSuggest" value="" class="a" maxlength="32"></font></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Possible challenges to implementation:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasontwo" id="textarea2" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtTwo(this)" onkeydown="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');" onkeyup="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');"></textarea>
<span id="cnttwo" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>What metrics could be used to track results?</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasonthree" id="textarea3" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtThree(this)" onkeydown="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');" onkeyup="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');"></textarea>
<span id="cntthree" style="color:##FF0000">500</span> character(s) remaining.<br /><br /></td>
</tr>
</table>
<br />
<table align="center">
<TR>
<TD align="center"><input type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
</form>
Thank You
UPDATE
The following is what I did:
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("click", function(clickEvent) {
if (clickEvent.target.id == 'check') {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs,function(radioInput) {return radioInput.checked;});
if (anonymousSelected) {
anonymousContainer.className = '';
}
else {
if (anonymousContainer) {
alert( "Do you wish to remain anonymous?" );
anonymousContainer.className += 'borderedContainer';
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous">
<strong>No</strong>
</span>
</div>
</td>
</tr>
</table>
<table align="center">
<TR>
<TD align="center"><input id="check" type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
So I am not sure what I am doing wrong.
You can put the radio buttons in a container (e.g. a span) and then set the border on the container. See the example below, after clicking the button labeled check.
The snippet uses the hex value for red but feel free to adjust to a different value. Using 'red' as the value may produce varying results across browsers/Operating systems. For more information, refer to the MDN color page.
The snippet also uses Array.find() to determine if any of the radio inputs are checked.
Note:
I originally utilized document.addEventListener() for event delegation and to wait until the DOM was loaded but the OP is using IE 8 or earlier and had issues with that, so I removed that code.
function checkAnonymousSelected(clickEvent) {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs, function(radioInput) {
return radioInput.checked;
});
if (anonymousSelected) {
anonymousContainer.className = '';
} else {
if (anonymousContainer) {
anonymousContainer.className += 'borderedContainer';
}
}
}
//support IE 8- for OP so do this instead of using document.attachEventListener
//to wait until the DOM is ready and attach event listeners to the buttons...
document.getElementById('check').onclick = checkAnonymousSelected;
document.getElementById('anonymousYes').onclick = checkAnonymousSelected;
document.getElementById('anonymousNo').onclick = checkAnonymousSelected;
.borderedContainer {
border: 3px solid #ff0000;
}
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes" id="anonymousYes" > <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous" id="anonymousNo" >
<strong>No</strong>
</span>
</div>
<button id="check">check</button>
I am able to create dynamic textboxes on one button click but now the requirement is that we have to get values of that textboxes and send it to java class where I can use those values entered in the created dynamic textboxes but I am unable to do so.I have tried my best to solve this problem but I am stuck in getting values and sending it to action class.I have referred this link where umesh awasthi sir has answered but here it is for single value but how to get values from dynamically created and pass those and get it separately in action class.
Below is my javascript code :
<script>
function addFieldForDescription() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addDesc"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function addFieldForAmount() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables1");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addAmount"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function submitValues()
{
alert("Inside Submit");
var amountId=document.getElementById("addTables");
alert(amountId.value);
for(var i=0;i<amountId.rows.length;i++)
{
var temp=document.getElementById("addDesc"+i);
alert(temp.value);
}
}
</script>
and below is my jsp code
<html>
<head>
</head>
<body>
<table class="responstable3" id="addTable">
<tr>
<th></th>
<th style="width: 60%;">Description <input
type="button" name="add" value="+"
onclick="addFieldForDescription()" id="addDesc0"
class="btn btn-warning" /> <input type="button"
value="Submit" onclick="submitValues()"/></th>
<th data-th="Amount"><span>Amount <input
type="button" name="add" value="+"
onclick="addFieldForAmount()" id="addAmount"
class="btn btn-warning" /></span></th>
</tr>
<tr>
<td> </td>
<td id="addTables"><input type="text" id="add" size="40" /><br></td>
<td id="addTables1"><input type="text" id="addAmount"
size="40" /><br></td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;">
<table class="responstable4">
<tr>
<td style="text-align: left;">Pan No. :<input
type="text" name="invoiceVar.panNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Net Amount :</td>
</tr>
<tr>
<td style="text-align: left;">Service Tax No. :<input
type="text" name="invoiceVar.serviceTaxNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Service Tax # 14.00%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">SBC # 0.50%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">Total Amount</td>
</tr>
</table>
</td>
<td style="padding: 0px;">
<div ng-app>
<table class="responstable4">
<tr>
<td><input type="text" name="invoiceVar.netAmount"
class="profarma_formtextbox2" ng-model="a" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.serviceTax"
class="profarma_formtextbox2" value="{{a*0.14}}" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.sbcTax"
class="profarma_formtextbox2" value="{{a*0.005}}" /></td>
</tr>
<tr>
<td><input type="text"
name="invoiceVar.invoiceTotalAmount"
class="profarma_formtextbox2"
value="{{a--(a*0.14)--(a*0.005)}}" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">Total Amount in
Words :</td>
</tr>
</table>
</body>
</html>[![error][2]][2]
and here it is how it looks like.yellow plus button will add textboxes in description and amount column and I have to call those values in action class.
Any help would be greatly appreciated .thank you :)
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.