...

View Full Version : Changing Numbers in Forms



chewy
09-01-2010, 08:46 PM
Not sure if I should post this in javascript or HTML section, but I have what seems to be a pretty simple script that I'm stumped on.

Basically what I have to do is use onChange to make the second box equal 3 times the first and the third equal the cube of the first.


Here's what I have so far, it doesn't do anything:



<!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=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function recalcTextBoxes() {
// Make sure both boxes have a value
if (TextBox1.value != "" ) {
// if both boxes have a value calculate for box 3
TextBox2.value = TextBox1.value*3 ;
TextBox3.value = TextBox1.value*TextBox1.value*TextBox1.value;
}
}
function recalcTextBoxes2() {
if (TextBox2.value!=""){
TextBox1.value= Textbox2.value/3;
TextBox3.value=TextBox1.value*TextBox1.value*TextBox1.value;
}
}
function recalcTextBoxes3(){
if (TextBox3.value!=""){
TextBox1.value= Math.pow(TextBox3.value, 1/3);
TextBox2.value= Textbox1.value *3;
}
}
</script>

</head>

<body>
<FORM ACTION="../cgi-bin/mycgi.pl">

First
<input
type=TEXT
name="TextBox1"

onChange="recalcTextBoxes()"
>

Second
<INPUT
TYPE=TEXT
NAME="TextBox2"
onChange = "recalcTextBoxes2()"

>

Third
<INPUT
TYPE=TEXT
NAME="TextBox3"
onChange = "recalcTextBoxes3()"
>

</FORM>
</body>
</html>


Anybody have any hints on what I should do next? I'm really new with javascript and HTML so I don't really know what I'm doing.

Old Pedant
09-01-2010, 09:15 PM
<!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=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function recalcTextBoxes(form) {
// Make sure both boxes have a value
if (form.TextBox1.value != "" ) {
// if both boxes have a value calculate for box 3
form.TextBox2.value = form.TextBox1.value*3 ;
form.TextBox3.value = form.TextBox1.value*form.TextBox1.value*form.TextBox1.value;
}
}
function recalcTextBoxes2(form) {
if (form.TextBox2.value!=""){
form.TextBox1.value= form.TextBox2.value/3;
form.TextBox3.value=form.TextBox1.value*form.TextBox1.value*form.TextBox1.value;
}
}
function recalcTextBoxes3(form){
if (form.TextBox3.value!=""){
form.TextBox1.value= Math.pow(form.TextBox3.value, 1/3);
form.TextBox2.value= form.TextBox1.value *3;
}
}
</script>
</head>
<body>
<FORM ACTION="../cgi-bin/mycgi.pl">
First
<input type=TEXT name="TextBox1" onChange="recalcTextBoxes(this.form)" >

Second
<INPUT TYPE=TEXT NAME="TextBox2" onChange = "recalcTextBoxes2(this.form)" >

Third
<INPUT TYPE=TEXT NAME="TextBox3" onChange = "recalcTextBoxes3(this.form)" >
</FORM>
</body>
</html>

You can't reference the form field by its bare name. You must reference it "in context". So in the <form>. You could use the form name, but I chose to pass the form reference to each function from the onChange event.

chewy
09-01-2010, 09:30 PM
Thank you, that helps a ton.


All I had to do after that is change the third one so it creates a variable that is the same thing that is displayed in the first box and then use that as the third boxes calculation. I did it for the second box too just for good measure.

Here's the final code:

<!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=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function recalcTextBoxes(form) {
// Make sure both boxes have a value
if (form.TextBox1.value != "" ) {
// if both boxes have a value calculate for box 3
form.TextBox2.value = form.TextBox1.value*3 ;
form.TextBox3.value = form.TextBox1.value*form.TextBox1.value*form.TextBox1.value;
}
}
function recalcTextBoxes2(form) {
if (form.TextBox2.value!=""){
var tacoparty2 = form.TextBox2.value/3;
form.TextBox1.value= form.TextBox2.value/3;
form.TextBox3.value=tacoparty2*tacoparty2*tacoparty2;
}
}
function recalcTextBoxes3(form){
if (form.TextBox3.value!=""){
var tacoparty3= form.TextBox1.value= Math.pow(form.TextBox3.value, 1/3);
form.TextBox1.value= Math.pow(form.TextBox3.value, 1/3);
form.TextBox2.value= tacoparty3 *3;
}
}
</script>

</head>

<body>
<FORM ACTION="../cgi-bin/mycgi.pl">

First
<input
type=TEXT
name="TextBox1"

onChange="recalcTextBoxes(this.form)"
>

Second
<INPUT
TYPE=TEXT
NAME="TextBox2"
onChange = "recalcTextBoxes2(this.form)"

>

Third
<INPUT
TYPE=TEXT
NAME="TextBox3"
onChange = "recalcTextBoxes3(this.form)"
>

</FORM>
</body>
</html>


Once again thanks a bunch for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum