spires Posted June 8, 2009 Share Posted June 8, 2009 Hi guys Thanks for reading. I have created a form that will automatically calculates these equations, and populate the correct fields without a refresh. Calculations (For example please see: http://businessmobiles.com/comcalc/test.php). field 1 = field 2 * QTY (QTY is a hidden field) field 2 = field 1 / QTY (QTY is a hidden field) As you notice, field 1 & 2 are the same calculation but in reverse order. I can get the code to work out the calculation in either order, but not both of the orders. In other words, if I type in field 1 it will input the answer into field 2. And if I type in field 2 it will input the answer into field 1. Here is my code (http://businessmobiles.com/comcalc/test.php). <script language="javascript"> function calculate2() { document.getElementById("monthly_discount_xQ" ).value=nan(document.getElementById("monthly_discount").value)*nan(document.getElementById("STqty").value); document.getElementById("monthly_discount" ).value=nan(document.getElementById("monthly_discount_xQ").value)/nan(document.getElementById("STqty").value); } function nan(value) { if(isNaN(value)) { return ""; } else { return value; } } </script> </head> <body> <form name="form1" > <input name="STqty" type="hidden" value="2" id="STqty" /> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td height="17" class="verdana_9" align="left"> £<input name="monthly_discount" type="text" size="5" class="verdana_10" height="10" value="" onchange="calculate2();" onkeyup="this.style.backgroundColor = \'#FFCCCC\';calculate2();" onblur="calculate2();" id="monthly_discount" /> </td> <td height="17" class="verdana_9" align="left"> £<input name="monthly_discount_xQ" type="text" size="5" class="verdana_10" height="10" value="" onchange="calculate2();" onkeyup="this.style.backgroundColor = \'#FFCCCC\';calculate2();" onblur="calculate2();" id="monthly_discount_xQ"/> </td> </tr> </table> </form> </body> I think this might have something to do with it using 'this' instead of 'document', but not to sure what. Thanks for your help. Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/ Share on other sites More sharing options...
jxrd Posted June 8, 2009 Share Posted June 8, 2009 Error: illegal character Source File: http://businessmobiles.com/comcalc/test.php Line: 1, Column: 29 Source Code: this.style.backgroundColor = \'#FFCCCC\';calculate2(); I get that on your page. Escaping incorrectly? Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851430 Share on other sites More sharing options...
spires Posted June 8, 2009 Author Share Posted June 8, 2009 How did you find that out? Thanks Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851432 Share on other sites More sharing options...
spires Posted June 8, 2009 Author Share Posted June 8, 2009 OK, I've fixed that issue. Calculating is still not working though. Any ideas? Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851433 Share on other sites More sharing options...
jxrd Posted June 8, 2009 Share Posted June 8, 2009 Probably because you're using the same function for the second input. THink about it, that function gives the second input a value of double the first. If there's nothing in the first, it'll just wipe it. Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851463 Share on other sites More sharing options...
spires Posted June 8, 2009 Author Share Posted June 8, 2009 I just tried: <script language="javascript"> function calculate2() { document.getElementById("monthly_discount_xQ" ).value=nan(document.getElementById("monthly_discount").value)*nan(document.getElementById("STqty").value); } function calculate3() { document.getElementById("monthly_discount" ).value=nan(document.getElementById("monthly_discount_xQ").value)/nan(document.getElementById("STqty").value); } function nan(value) { if(isNaN(value)) { return ""; } else { return value; } } </script> </head> <body> <form name="form1" > <input name="STqty" type="hidden" value="2" id="STqty" /> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td height="17" class="verdana_9" align="left"> £<input name="monthly_discount" type="text" size="5" class="verdana_10" height="10" value="" onchange="calculate3();" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate3();" onblur="calculate3();" id="monthly_discount" /> </td> <td height="17" class="verdana_9" align="left"> £<input name="monthly_discount_xQ" type="text" size="5" class="verdana_10" height="10" value="" onchange="calculate2();" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount_xQ"/> </td> </tr> </table> </form> </body> But this makes it worse, it keeps throwing each field to '0' Any other ideas? Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851469 Share on other sites More sharing options...
jxrd Posted June 8, 2009 Share Posted June 8, 2009 Try this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <script language="javascript"> var selected = 1; function calculate2() { if(selected == 1) { document.getElementById("monthly_discount_xQ" ).value=nan(document.getElementById("monthly_discount").value)*nan(document.getElementById("STqty").value); } else { document.getElementById("monthly_discount" ).value=nan(document.getElementById("monthly_discount_xQ").value)/nan(document.getElementById("STqty").value); } } function nan(value) { if(isNaN(value)) { return ""; } else { return value; } } </script> </head> <body> <form name="form1" > <input name="STqty" type="hidden" value="2" id="STqty" /> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td height="17" class="verdana_9" align="left"> £<input name="monthly_discount" type="text" size="5" class="verdana_10" height="10" value="" onchange="calculate2();" onfocus="selected = 1;" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount" /> </td> <td height="17" class="verdana_9" align="left"> £<input name="monthly_discount_xQ" type="text" size="5" class="verdana_10" height="10" value="" onchange="calculate2();" onfocus="selected = 2;" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount_xQ"/> </td> </tr> </table> </form> </body> </html> Because the onchange event sets off the function as well, the second input would be reset. I just made it update the one that wasn't focused. Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851533 Share on other sites More sharing options...
spires Posted June 8, 2009 Author Share Posted June 8, 2009 Thats perfect, thanks. I thought it would be something simple like that Quote Link to comment https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/#findComment-851600 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.