Free Web Hosting Forum - View Single Post - Accessing Value (Usin JS) Submited By User (HTML form) And Assigning It To A Variable

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>