Inputs from a form

**calamine** · May 30, 2007, 02:31

What is the code to take an input from a form and assign it to a variable? Such as the in the form below with input "first".

Also, how do I display the result of a math operation back to the "result" value of the form?

<body>
<form name = "comparison" action = "">
<table border = "1">
<caption>Integer Comparison</caption>
<tr><td>Input First Integer</td>
<td><input name = "first" type = "text" />
</td></tr>
<tr><td>Input Second Integer</td>
<td><input name = "second" type = "text" />
</td></tr>
<tr><td><input type = "button" value = "Compare Inputs"
onclick = "comparison()" /></td></tr>

<tr><td>The First Integer is

/td>
<td><input name = "result" type = "text" /></td></tr>
</table>
</form>
</body>

**hexburner** · May 30, 2007, 03:28

The function comparison seems predefined or something, I renamed it.

HTML Code:

<html>
<head>
    <script language="javascript">
        function $(v){return document.getElementById(v)}
        
        function compare() {
            var first = parseInt($('first').value);
            var second = $('second').value * 1;
            
            $('result').value = first+second;
        }
    </script>
</head>
<body>
<form name="comparison" action="">
    <table border="1">
        <caption>Integer Comparison</caption>
        <tr>
            <td>Input First Integer</td>
            <td><input id="first" name="first" type="text" /></td>
        </tr>
        <tr>
            <td>Input Second Integer</td>
            <td><input id="second" name="second" type="text" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="Compare Inputs" onclick="compare();" /></td>
        </tr>
        <tr>
            <td>The First Integer is</td>
            <td><input id="result" name="result" type="text"/></td>
        </tr>
    </table>
</form>
</body>
</head>

**abhishekkaushik** · May 30, 2007, 03:59

Whole form must be passed to a JavaScript comparison function whatever is the result instead of returning it set the value of result's initial value attribute to this. All this can be done by JS

**calamine** · May 30, 2007, 05:20

HexB,
Could you explain these statements to me? newbie here.....

function $(v){return document.getElementById(v)}

var first = parseInt($('first').value);
var second = $('second').value * 1;

**CommanderZ** · May 30, 2007, 06:09

This function call

Code:

document.getElementById

is pretty lengthy, so you make simple customfunction which is named $ (the shortest possible function name, takes advantage of fact. that JS can handle dollar sign as function name) and is used instead of document.getElementById. So these two expressions are exactly the same:

Code:

$('first').value

and

Code:

document.getElementById("first").value

ParseInt is used to turn something into integer (whole number), so this statement

Code:

parseInt($('first').value)

Gets value of field called 'first' and makes sure it is a number. It will attempt to turn nonumbers into number, but it usually ends as zero.

The third line is self-explanatory.

**calamine** · May 30, 2007, 08:44

Thanks for the info, what is the *1 for at the end of this statement?
var second = $('second').value * 1;

**CommanderZ** · May 30, 2007, 10:19

I don't know exactly, but it may be another way how to convert variable to number. PHP tries to retype vars automatically, so it attampts to canovrt them to numbers when they are part of mathematical statement. You can multiply them by one ore simply increment them by zero, it works too.

**muazzez** · May 30, 2007, 12:37

As far as I know, it converts the string to number.

Code:

 
<html>
<head>
    <script language="javascript">
        function $(v){return document.getElementById(v)}
        
        function compare() {
            var first = parseInt($('first').value);
            alert("typeof(first) : "+typeof(first));
            var second = $('second').value ;
            alert("typeof(second) : "+typeof(second));
            alert(first + second);
            second = $('second').value * 1;
            alert(typeof(second));
            alert(first + second);
            $('result').value = first+second;
        }
    </script>
</head>
<body>
<form name="comparison" action="">
    <table border="1">
        <caption>Integer Comparison</caption>
        <tr>
            <td>Input First Integer</td>

            <td><input id="first" name="first" type="text" /></td>
        </tr>
        <tr>
            <td>Input Second Integer</td>
            <td><input id="second" name="second" type="text" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="Compare Inputs" onclick="compare();" /></td>

        </tr>
        <tr>
            <td>The First Integer is</td>
            <td><input id="result" name="result" type="text"/></td>
        </tr>
    </table>
</form>
</body>
</html>

Converting to Number
http://www.jibbering.com/faq/faq_not...e_convert.html
var numValue = stringValue - 0;
/* or */
var numValue = stringValue * 1;
/* or */
var numValue = stringValue / 1;

var numValue = Number(stringValue);

The SitePoint Forums have moved.

User Tag List

Thread: Inputs from a form

Thread Tools

Display

Inputs from a form

Bookmarks

Bookmarks

Posting Permissions