Accessing Value (Usin JS) Submited By User (HTML form) And Assigning It To A Variable

Peeyush

I am a newbie and i am trying to make a calculator using JS, I have seen online tutorials which show how to make a caluculator which actually looks like a calculator (like on in MS windows) , but i dont want to make that as i am not able to understand that script. i wanna make a simpler or as it may seem to you, more 'complicated' calculator, in which there are two input fields, in which user enters two numbers he desires to calculate, and chooses mathematical operator to apply to those 2 numbers, if you are not getting it, form is simply ready: http://peeyush.tk/Eucli.html . and when user clicks submit button, it would launch a function which will get numbers entered in textboxes, assign it to variables, lets say x and y, get the operator user selected and do the calculation and show the result, but The Main Problem Is I Don't Know How To Get The Values User Has Entered In The Form And Submitted And Assign It To Variables So I Can Mathematically Operate Them....

If you did not get the assigning to variable part, here is how it'd work:

Code:

function add()
{
 x + y = sum
 document.getElementById("result").innerHTML = sum ;
}

Code Explained: Function will start when submit button is clicked, first it will get user entered value from textbox1 and assign it to x (i dont know how to do it) then it will get user entered value from textbox2 and assign it to y ( dont know how to do it) , then it will ad them, and display sum in a predefined space.

I hope i have made myself clear, if you still have any doubts please ask me, thanks for help and taking time to read all this.

nikolaos91 · 04-30-2012, 03:20 PM

try youtube if you find something or try any other kind of tutorial

Mate · 04-30-2012, 05:32 PM

Try this..

Code:

function add() {
   var x = document.forms["form_name"]["field_name_1"].value;
   var y = document.forms["form_name"]["field_name_2"].value;
   var sum = x + y;
   document.getElementById("result").innerHTML = sum ;
}

tmiris · 03:07 PM

Building on what Mate has to say.... if you gave your x, y input textfields id attributes
eg id="x" id="y" you could then access them via
var x=document.getElementById("x").value;

You don't need to use the submit button to perform the addition, you can use any button,
and attach the add function to it, thus, in html...

<input type="button" id = "myAddButton" value="Add" onclick="add" />

(in fact you don't need form tags either, if you not sending user submitted data to your
server)

aaa · 05-02-2012, 08:31 PM

You should check out jQuery. (Maybe check out a tutorial on how to use it.)

Once you have jQuery on a page, you can use this...

Code:

var x = $("#x").val ();

To retrieve the value of an input field, which has the id="x".

(it does the same thing as this one, but shorter:

Code:

var x = document.getElementById("x").value;

)

One of the great powers of jQuery is that in this code

Code:

var x = $("#x").val ();

instead of the "#x" you can use any kind of CSS selector.

Also since you are going to work with numbers, it's important to convert the numbers to actual "Number" values. By default the values that you get from an input field are always going to be "String" values which are just pieces of text (even if they contain digits). You can convert a text string of numbers into an actual number using the function "parseInt" :

Code:

var mytext = "55"; // this is just a text string

var mynumber = parseInt (mytext, 10);  // now "mynumber" is an actual number

The difference between adding 2 strings and adding 2 numbers is this:

Code:

var result1 = "55" + "10"; // adding strings, result1 now contains "5510"

var result2 = 55 + 10; // adding numbers, result2 now contains 65

(Note the lack of " " quotes in the second example. "55" is a string, but 55 is a number.)

Here is a complete example that uses jQuery:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

$(function ()
{	// runs when the page is loaded
	
	
	$('#calc').click (function ()
	{	// this runs every time the user clicks on the "Calculate" button
		
			// get x
			var x = $('#x').val (); // x is a string
			x = parseInt (x, 10); // now x is a number

			// get y
			var y = $('#y').val (); // y is a string
			y = parseInt (y, 10); // now y is a number
			
			// get the currently selected operation
			var op = $('#op :selected').attr ('value');
			
			// the result text will be placed in this variable
			var result_text = '';
			
			// decide what to do based on the operation
			switch (op)
			{
				case 'plus' : result_text = x + ' + ' + y + ' = ' + (x + y); break;
				case 'minus': result_text = x + ' - ' + y + ' = ' + (x - y); break;
				case 'div'  : result_text = x + ' &divide; ' + y + ' = ' + (x / y); break;
				case 'mult' : result_text = x + ' &times; ' + y + ' = ' + (x * y); break;
			}
			
			// places the 'result_text' into the "#result" box
			$('#result').html (result_text);
	});
	
});

</script>
</head>
<body>
x: <input id="x" type="text" /><br/>
y: <input id="y" type="text" /><br/>
operation:
<select id="op"><option value="plus">+</option><option value="minus">-</option><option value="div">&divide;</option><option value="mult">&times;</option></select><br/>
<br/>
<input id="calc" type="button" value="Calculate" /><br/>
<br/>
Result:<br/>
<div id="result" style="padding: 3px; border: 1px solid black; margin: 3px; min-width: 100px; float: left;">&nbsp;</div>
</body>
</html>

tmiris · 08-27-2012, 02:09 PM

Having had a chance to look at jQuery I can thoroughly recommend it. Thanks for the tip aaa