www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: [RESOLVED] Arithmetic Operation on HTML form element

  1. #1
    Join Date
    May 2008
    Posts
    9

    resolved [RESOLVED] Arithmetic Operation on HTML form element

    Dear friends,
    Please consider the following concern.

    Suppose I have a 5 rows 3 columns form fields. When I will put any values in Col1 and Col2; Sum Column will calculate sum operation like Col1+Col2. Due to PHP and MySql issue, I had to make the input field as array element. But entry time the sum value will generate by JavaScript.

    <form method="post" action="process.php" id="frmArithmetic">
    <input name="txtCol1[]" type="text" onBlur="doSum()" />
    <input name="txtCol2[]" type="text" onBlur="doSum()" />
    <input name="txtTotal[]" type="text" value="" readonly=readonly/>
    <input type="Submit" name="btnSave" id="btnSave" value="Save"/>
    </form>
    ---------------------------------------
    Col1 Col2 Sum
    ----- ----- ------
    1 --------- 2 --------- 3
    2 --------- 5 --------- 7

    [Save]
    -----------------------------------------

    Any JavaScript solution will be appreciated.

    Regards,
    Iqbal

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  3. #3
    Join Date
    May 2008
    Posts
    9
    Thanks for your reply. But I did not want your link.
    I wan to know the JavaScript solution for array element handling what I mentioned in my post.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use this as a starting point and guide:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--
     
    function 
    doSum() {
    var 
    col1 isNaN(parseFloat(document.getElementById('txtCol1[]').value))? parseFloat(document.getElementById('txtCol1[]').value);
    var 
    col2 isNaN(parseFloat(document.getElementById('txtCol2[]').value))? parseFloat(document.getElementById('txtCol2[]').value);
     
    document.getElementById("txtTotal[]").value col1 col2;
    }
     
    //-->
    </script>
    </head>
    <body>

    <form method="post" action="process.php" id="frmArithmetic">
             <input name="txtCol1[]" type="text" onBlur="doSum()" />
             <input name="txtCol2[]" type="text" onBlur="doSum()" />
             <input name="txtTotal[]" type="text" value="" readonly='readonly' />
              <input type="Submit" name="btnSave" id="btnSave" value="Save"/>
    </form>

    </body>
    </html> 

  5. #5
    Join Date
    May 2008
    Posts
    9
    Thank you for your post. But script not working...

  6. #6
    Join Date
    May 2008
    Posts
    9
    Quote Originally Posted by tirna View Post
    maybe use this as a starting point and guide:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--
     
    function 
    doSum() {
    var 
    col1 isNaN(parseFloat(document.getElementById('txtCol1[]').value))? parseFloat(document.getElementById('txtCol1[]').value);
    var 
    col2 isNaN(parseFloat(document.getElementById('txtCol2[]').value))? parseFloat(document.getElementById('txtCol2[]').value);
     
    document.getElementById("txtTotal[]").value col1 col2;
    }
     
    //-->
    </script>
    </head>
    <body>

    <form method="post" action="process.php" id="frmArithmetic">
             <input name="txtCol1[]" type="text" onBlur="doSum()" />
             <input name="txtCol2[]" type="text" onBlur="doSum()" />
             <input name="txtTotal[]" type="text" value="" readonly='readonly' />
              <input type="Submit" name="btnSave" id="btnSave" value="Save"/>
    </form>

    </body>
    </html> 
    Thank you for your post. But script not working...

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Under an XHTML Doctype, javascript events must be written in lowercase. same as all the HTML/XHTML attributes. Thus: onblur, not onBlur

    Another error, tirna : Form's elements have only names, not ids, thus getElementById() will refer nothing. (Except, probably in IE, which, incorrectly, is able to take the name as id, if id is missing)
    Last edited by Kor; 06-29-2010 at 04:48 AM.

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    my sincerest apologies

    I have given my code tester a good spanking and told them if it happens again they're fired - basically id's were not added to the input elements

    This now works in IE8 and FF3.6

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--
     
    function 
    doSum() {
    var 
    col1 isNaN(parseFloat(document.getElementById('txtCol1').value))? parseFloat(document.getElementById('txtCol1').value);
    var 
    col2 isNaN(parseFloat(document.getElementById('txtCol2').value))? parseFloat(document.getElementById('txtCol2').value);
     
    document.getElementById("txtTotal").value col1 col2;
    }
    //-->
    </script>
    </head>
    <body>
     
    <form method="post" action="process.php" id="frmArithmetic">
             <input name="txtCol1[]" id="txtCol1" type="text" onBlur="doSum()" />
             <input name="txtCol2[]" id="txtCol2"  type="text" onBlur="doSum()" />
             <input name="txtTotal[]" id="txtTotal"  type="text" value="" readonly='readonly' />
              <input type="Submit" name="btnSave" id="btnSave" value="Save"/>
    </form>
     
    </body>
    </html> 

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function doSum(f){
    var v1=Number(f['txtCol1[]'].value);
    var v2=Number(f['txtCol2[]'].value);
    f['txtTotal[]'].value=v1+v2;
    }
    </script>
    </head>
    <body>
    <form method="post" action="process.php" id="frmArithmetic">
    <input name="txtCol1[]" type="text" onblur="doSum(this.form)">
    <input name="txtCol2[]" type="text" onblur="doSum(this.form)">
    <input name="txtTotal[]" type="text" value="" readonly="readonly">
    <input type="Submit" name="btnSave" id="btnSave" value="Save">
    </form>
    </body>
    </html>

  10. #10
    Join Date
    May 2008
    Posts
    9
    Quote Originally Posted by Kor View Post
    Under an XHTML Doctype, javascript events must be written in lowercase. same as all the HTML/XHTML attributes. Thus: onblur, not onBlur

    Another error, tirna : Form's elements have only names, not ids, thus getElementById() will refer nothing. (Except, probably in IE, which, incorrectly, is able to take the name as id, if id is missing)
    In my script there is no problem with onblur or onBlur. Tirna's script is okay but the script is not appropriate with my case.

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    document.getElementById("txtTotal").value = col1 * col2;
    We suppose do perform an addition (a sum) , not to multiply the values

  12. #12
    Join Date
    May 2008
    Posts
    9
    Quote Originally Posted by tirna View Post
    my sincerest apologies

    I have given my code tester a good spanking and told them if it happens again they're fired - basically id's were not added to the input elements

    This now works in IE8 and FF3.6

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--
     
    function 
    doSum() {
    var 
    col1 isNaN(parseFloat(document.getElementById('txtCol1').value))? parseFloat(document.getElementById('txtCol1').value);
    var 
    col2 isNaN(parseFloat(document.getElementById('txtCol2').value))? parseFloat(document.getElementById('txtCol2').value);
     
    document.getElementById("txtTotal").value col1 col2;
    }
    //-->
    </script>
    </head>
    <body>
     
    <form method="post" action="process.php" id="frmArithmetic">
             <input name="txtCol1[]" id="txtCol1" type="text" onBlur="doSum()" />
             <input name="txtCol2[]" id="txtCol2"  type="text" onBlur="doSum()" />
             <input name="txtTotal[]" id="txtTotal"  type="text" value="" readonly='readonly' />
              <input type="Submit" name="btnSave" id="btnSave" value="Save"/>
    </form>
     
    </body>
    </html> 
    Sorry dear, Nothing happened. Would you understand my problem dear?

  13. #13
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Iqbal Hossain View Post
    Sorry dear, Nothing happened. Would you understand my problem dear?
    I recopied and pasted the posted code (second version) into a html file and it works in my IE8 and FF3.6

    What errors are you getting?

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Iqbal Hossain View Post
    In my script there is no problem with onblur or onBlur.
    It is simply a matter of standard. XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive.

    http://www.w3.org/TR/xhtml1/#h-4.2

    Some browsers might be not so tolerant with the "camel case".

  15. #15
    Join Date
    May 2008
    Posts
    9
    Quote Originally Posted by Kor View Post
    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function doSum(f){
    var v1=Number(f['txtCol1[]'].value);
    var v2=Number(f['txtCol2[]'].value);
    f['txtTotal[]'].value=v1+v2;
    }
    </script>
    </head>
    <body>
    <form method="post" action="process.php" id="frmArithmetic">
    <input name="txtCol1[]" type="text" onblur="doSum(this.form)">
    <input name="txtCol2[]" type="text" onblur="doSum(this.form)">
    <input name="txtTotal[]" type="text" value="" readonly="readonly">
    <input type="Submit" name="btnSave" id="btnSave" value="Save">
    </form>
    </body>
    </html>
    Both trina and your code only works at last but only for one row. It is not working the next rows.... Just one row is working. And this is my main problem dear.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles