[SOLVED] Javascript form help

spires · 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.

jxrd · 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?

spires · June 8, 2009

How did you find that out?

Thanks

spires · June 8, 2009

OK, I've fixed that issue.

Calculating is still not working though.

Any ideas?

jxrd · 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.

spires · 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?

jxrd · 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.

spires · June 8, 2009

Thats perfect, thanks.

I thought it would be something simple like that

Sign In

[SOLVED] Javascript form help

Recommended Posts

spires

Link to comment

Share on other sites

jxrd

Link to comment

Share on other sites

spires

Link to comment

Share on other sites

spires

Link to comment

Share on other sites

jxrd

Link to comment

Share on other sites

spires

Link to comment

Share on other sites

jxrd

Link to comment

Share on other sites

spires

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information