Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Changing Numbers in Forms

    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:

    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() {  
       // 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.
    Last edited by chewy; 09-01-2010 at 08:31 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    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!=""){
            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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chewy (09-01-2010)

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •