SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    value disappears

    i have one function named calculate. actually i was checking my input should be less than 220.

    so i have placed one condition. and it checking my values too
    but problem is that when i enter suppose 678. so it is invalid it show the message than if i click on ok and just remove the 8 from 678. for second, it shows the values with 67 but disappears afterward. i have tried but don't know why it is disappearing.
    here is my function:
    Code JavaScript:
    function calculate() {
     
    var w = document.cal.age.value;
     
    function isaN(str) {
    	if(parseInt(str) != str){
    	     return false;
      	}
      	return true;
    }
     
    if (document.cal.age.value == "") {
    alert("Please enter an age")
    document.cal.age.focus()
    return false
    }
    else if((document.cal.age.value !="") && (isaN(document.cal.age.value)==false) )
    	{
    		alert("Please enter your valid Age");
    		document.cal.age.focus();
    		return false;
    	}
    	 else if( (w > 220)){
     
    			alert("Invalid Age, Please enter your proper age");
    			document.cal.age.focus();
    			return false;
    	}
     
    else {
    var age = 0;
    var max = 0;
    var a = 0;
    var b = 0;
    var c = 0;
     
    document.getElementById("max").innerHTML= "";
    document.getElementById("a").innerHTML= "";
    document.getElementById("b").innerHTML= "";
    document.getElementById("c").innerHTML= "";
     
     
        age = document.cal.age.value * 1;
     
    max = 220 - age;
    a = Math.round(max * .65)   ;
    b = Math.round(max * .75);
    c = Math.round(max * .85);
     
     
    document.getElementById("max").innerHTML= "<b>" + max + "</b>";
    document.getElementById("a").innerHTML= "<b>" + a +  "</b>";
    document.getElementById("b").innerHTML= "<b>" + b + "</b>";
    document.getElementById("c").innerHTML= "<b>" + c + "</b>";
     
    }
    }
     
    function clearIt() {
    document.getElementById("max").innerHTML= "";
    document.getElementById("a").innerHTML= "";
    document.getElementById("b").innerHTML= "";
    document.getElementById("c").innerHTML= "";
     
    }

    please anyone, tell me whats wrong with my code?
    thanks in advance.

  2. #2
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote this, you have to download prototype, I guest the changes do not alter the logic, check if it ok

    Code:
    <html>
    <head><script src="prototype-1.6.0.2.js" language="JavaScript" type="text/javascript"></script>
    <script type="text/javascript" language="JavaScript">
    
    function calculate() { 
    var w =$F('age'); 
    if ($F('age')== "")
     {alert("Please enter an age");
    $('age').focus();
    return false;}
    else if($F('age') !="" && isaN($F('age'))==false )  
      {        alert("Please enter your valid Age");   
         $('age').focus();    
        return false;    }   
      else if( w > 220){  
    
                  alert("Invalid Age, Please enter your proper age");   
            $('age').focus();    
            return false;    }    
    else {
    var age = 0;var max = 0;var a = 0;var b = 0;var c = 0; 
    $("max").innerHTML= "";
    $("a").innerHTML= "";
    $("b").innerHTML= "";
    $("c").innerHTML= "";  
        age = $F('age') * 1; 
    max = 220 - age;a = Math.round(max * .65)   ;
    b = Math.round(max * .75);
    c = Math.round(max * .85); 
     
    $("max").innerHTML= "<b>" + max + "</b>";
    $("a").innerHTML= "<b>" + a +  "</b>";
    $("b").innerHTML= "<b>" + b + "</b>";
    }
    } 
    function isaN(str) {    
    if(parseInt(str) != str){      
       return false;    }   
     return true;} 
    function clearIt() {document.getElementById("max").innerHTML= "";document.getElementById("a").innerHTML= "";document.getElementById("b").innerHTML= "";document.getElementById("c").innerHTML= ""; 
    }</script>
       </head>
    <body>
    <form name="cal" id="cal" ><input type='text' id="age" name="age">
    <input type="button" onclick="javascript: calculate()">
    </form>
    <div id='a'> </div><div id='b'> </div><div id='c'> </div><div id='max'> </div>
       </body>
    </html>

  3. #3
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello dimis283,

    thanks for your reply. i have downloaded the prototupe1.6.0.2.js. and kept that code in the same folder where my this code is there. but no luck. still facing the same problem.

    any new suggestion??

  4. #4
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am pasting here my full code so anyone can see what exactly happening.


    PHP Code:
    <?php
    //ini_set( "display_errors", 0);

    ?>
    Code JavaScript:
    <html>
    <head>
    <script type="text/javascript" language="JavaScript">// Main Math Function
    function calculate(form) {
     
    var w = document.cal.age.value;
     
    function isaN(str) {
    	if(parseInt(str) != str){
    	     return false;
      	}
      	return true;
    }
     
     
    if (document.cal.age.value == "") {
    alert("Please enter an age")
    document.cal.age.focus()
    return false
    }
    else if((document.cal.age.value !="") && (isaN(document.cal.age.value)==false) )
    	{
    		alert("Please enter your valid Age");
    		document.cal.age.focus();
    		return false;
    	}
    	 else if( (w > 220)){
     
    			alert("Invalid Age, Please enter your proper age");
    			document.cal.age.focus();
    			return false;
    	}
     
    else {
    var age = 0;
    var max = 0;
    var a = 0;
    var b = 0;
    var c = 0;
     
    document.getElementById("max").innerHTML= "";
    document.getElementById("a").innerHTML= "";
    document.getElementById("b").innerHTML= "";
    document.getElementById("c").innerHTML= "";
     
     
        age = document.cal.age.value * 1;
     
    max = 220 - age;
    a = Math.round(max * .65)   ;
    b = Math.round(max * .75);
    c = Math.round(max * .85);
     
     
    document.getElementById("max").innerHTML= "<b>" + max + "</b>";
    document.getElementById("a").innerHTML= "<b>" + a +  "</b>";
    document.getElementById("b").innerHTML= "<b>" + b + "</b>";
    document.getElementById("c").innerHTML= "<b>" + c + "</b>";
     
    }
    }
     
    function clearIt() {
    document.getElementById("max").innerHTML= "";
    document.getElementById("a").innerHTML= "";
    document.getElementById("b").innerHTML= "";
    document.getElementById("c").innerHTML= "";
     
    }
     
    // Stop Hiding -->
    </script>
     
     
    </head>
     
    <body>
    <h1 align=center>Heart Rate Calculator</h1>
    <p>
     
    </p>
    <p>
     
    </p>
    <center>
    <div class="ptext">
    <center>
    <div class=hcalc>
    <form action="" method="POST" form name=cal onSubmit="calculate(this.form)">
    <table border="0" width="100%" align=center>
    <table>
    <td width="50%">
    <p align="center"><b>Enter your age</b></p>
    </td>
    <td width="50%">
    <input type="text" name="age" size="8">
    </td></tr>
    <tr><td width="50%" align=right><b>Max Heart Rate: </b></td><td width="50%"><div id="max"></div></td></tr>
    <tr><td width="50%" align=right><b>65% target: </b></td><td width="50%"><div id="a"></div></td>
    <tr><td width="50%" align=right><b>75% target: </b></td><td width="50%"><div id="b"></div></td>
    <tr><td width="50%" align=right><b>85% target: </b></td><td width="50%"><div id="c"></div></td>
    </tr>
    </table>
    <p align="center"><input type="button" value="Calculate" name="B1" onClick="calculate(this.form)">
    <input type="reset" value="Reset" name="B2" onClick="clearIt()"></p>
    </form>
    </div>
    </div>
    </center>
    </center>
    </body>

  5. #5
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you please see the following link which is having same problem like me.
    but the solution they have given for it ,not working for me it seems.

    http://www.codingforums.com/archive/...p?t-73391.html

    please tell me, what is wrong in my code?
    thanks in advance

  6. #6
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deepson2 View Post
    Hello dimis283,

    thanks for your reply. i have downloaded the prototupe1.6.0.2.js. and kept that code in the same folder where my this code is there. but no luck. still facing the same problem.

    any new suggestion??
    My code work here again.
    Does it work at your machine?
    Test if the code is properly writen

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but problem is that when i enter suppose 678. so it is invalid it show the message than if i click on ok and just remove the 8 from 678. for second, it shows the values with 67 but disappears afterward. i have tried but don't know why it is disappearing.
    First let me say that it all works fine.

    The reason it's disappearing like this is because you press enter after entering or correcting the age value. The default action of pressing enter is to submit the form, which will basically reload the page.

    Try changing the action parameter of the form tag to "somepageIdonthave.asp" and you'll see more clearly what's going on.

    The solution is to change the onsubmit attribute of the form tag to:
    onSubmit="calculate(this);return false;"

  8. #8
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dimis283-

    No its not working in my machine.i don't know why its not working.

    jimfraser -

    Did you mean to say that my code is working on your machine without the problem i am facing here?
    i newbie with java script so i didn't get what you r trying to tell me with this:
    Try changing the action parameter of the form tag to "somepageIdonthave.asp" and you'll see more clearly what's going on.
    and the last solution which you have given to me
    The solution is to change the onsubmit attribute of the form tag to:
    onSubmit="calculate(this);return false;"
    its not even giving me anything. means function is not working with this.

    i want to ask question to both of you here is that, i am calling function twice

    like this
    <form action="" method="POST" form name=cal onSubmit="calculate(cal)">

    <p align="center"><input type="button" value="Calculate" name="B1" onClick="calculate(cal)">
    so is it because function is getting called twice so values are disappearing?
    please do reply, i found it really weird that why its not working.

    thanks in advance.

  9. #9
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey.

    i got it what i was doing i was pressing enter button for my result. I should have to click on calculate button.

    can we keep like this onClick = Press Enter would work as same?

  10. #10
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code works when I put calculate
    Code:
    function calculate(form) {
     
    var w = document.cal.age.value;
     
    function isaN(str) {
        if(parseInt(str) != str){
             return false;
        }
        return true;
    }
    function calculate(form) has not a } why?
    The problem is here when I push "enter", all values are not there!

  11. #11
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello dimis283,

    I think logically user should click on the calculate button. because i was search.
    and got this

    http://www.halls.md/ideal-weight/body.htm

    see, you need to have click on button. just to press enter your values wont come.

    isnt it?

    and my function calculate is closed properly.
    still the question remains can we do onClick = press enter ?

  12. #12
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to return false from the onsubmit handler so that the page will not post to the server. See my last comment.


Bookmarks

Posting Permissions

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