Jump to content

[SOLVED] Javascript form help

spires

By spires
in Javascript Help

Recommended Posts

spires Advanced Member

spires

Posted
Posted

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.  :)

Link to comment
https://forums.phpfreaks.com/topic/161344-solved-javascript-form-help/
Share on other sites
spires Advanced Member

spires

Posted
  • Author
Posted

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 Member

jxrd

Posted
Posted

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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.