SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inputs from a form

    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>

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Member abhishekkaushik's Avatar
    Join Date
    May 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;

  5. #5
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info, what is the *1 for at the end of this statement?
    var second = $('second').value * 1;

  7. #7
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);


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
  •