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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Gathering userinput for a small javascript calculator (JS and <form>'s)

    Hey there CodingForums!
    I hope the subject of this post was ok (I read that you are having some problems with alot of strange subjects)

    What i am trying to do is the following:
    I read a tutorial on objects and thought i would try it out. The tutorial taught me how to make a function calculating the areal and circumspherence of the circle where the user input would be the radius.

    To sum up: I want to make it possible for the user to write, say, "2" in the form text field and click "Calculate" and then the text will appear w/o reloading the page. I could easily do this by removing the objects but as i am training my object skills i would like to know if it is possible to do this with objects?

    The problem is that i dont know how to take the user input. I know that in PHP it is "$_POST["name"]" but what is it in JS? And is it possible to jump into PHP and use $_POST inside the JS script or how can this be done?

    This is my code so far (It prolly looks strange but i really dont know how to get it to work).

    Code:
    <script type="text/javascript">
    function Circle(radius){
    	this.radius = radius;
    	this.getArea = function(){
    		return (this.radius*this.radius*3.14);
    	}
    	this.getOmkreds = function(){
    		var diameter = this.radius*2;
    		var omkreds = diameter*3.14;
    		return omkreds;
    	}
    }
    var bigCircle = new Circle(100);
    
    document.write("The areal of your circle is: "+bigCircle.getArea()+"<br>");
    document.write("The circumsference of your circle is: "+bigCircle.getOmkreds()+"<br>");
    </script>
    
    <form name="input" method="POST">
    	<input type="text" name="radius" />
    	<input type="button" value="Calculate" />
    </form>
    As you can see i have a predefined object: bigCircle. What i want to do is change the new Circle(100) to new Circle(USER INPUT HERE).

    Does any of this make sense and is it even possible?

    - BZeiler
    Last edited by BZeiler; 03-04-2009 at 07:08 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Try this:-

    Code:
    <script type="text/javascript">
    function Circle(){
    var circlerad = document.getElementById("radius").value;
    if (isNaN(circlerad) || circlerad <0 || circlerad == "") {
    alert ("Invalid input data!");
    document.getElementById("radius").value ="";
    return false;
    }
    var area = 2 * circlerad * 3.14;
    var circum = circlerad * circlerad * 3.14;
    
    
    document.getElementById("area").innerHTML = "The area of your circle is: " + area +"<br>";
    document.getElementById("circumference").innerHTML = "The circumference of your circle is: "+ circum + "<br>";
    
    }
    
    </script>
    
    Enter the radius of the circle <input type="text" name="radius" size = "4" id = "radius"/>
    <input type="button" value="Calculate" onclick = "Circle()"/>
    <br><br>
    <span id = "area"></span><br>
    <span id = "circumference"></span>

    Note that document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page.




    "When you've got a mountain to climb, you may as well throw everything into the kitchen sink straight away." - Football commentator.

  • Users who have thanked Philip M for this post:

    BZeiler (03-04-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey there Philip, thanks for you fast answer!
    As far as i can tell the code you put out for me there isn't very "object" minded but it was EXACTLY what i was looking for. I have got to use "getElementById" some more, it works like a charm!

    Thanks for the help, much love!

    - BZeiler

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by BZeiler View Post
    Hey there Philip, thanks for you fast answer!
    As far as i can tell the code you put out for me there isn't very "object" minded but it was EXACTLY what i was looking for. I have got to use "getElementById" some more, it works like a charm!

    Thanks for the help, much love!

    - BZeiler
    There is no point in using a sledgehammer to crack a nut. OOP is most appropriate where a piece of code must be re-used.

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    There is no point in using a sledgehammer to crack a nut
    You are very right, but... well... Yes. You are very right

    - Have a good day!


  •  

    Tags for this Thread

    Posting Permissions

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