Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2006
    Location
    Lawrence, KS
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb How can I update a form in real-time?

    I'm making a survey where every question has a numeric value assigned to it, and as the user clicks on a checkmark button to approve (or uncheck to disapprove) the values add or subtract to give a total at the bottom of the page.

    Basically, it's a spreadsheet but with fixed values for each row instead of being able to type them in.

    I can do this easily with php, but only if the user clicks the submit button. I was hoping to find a way to do this real-time.

    I'm not looking for someone to do this for me, but can someone point me in the right direction of a tutorial or something that is similar so I can build this into my program?

    Thanks.

    RS

  • #2
    New Coder
    Join Date
    Oct 2006
    Location
    Lawrence, KS
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice!

    Thanks, I'll give that a try. I was actually using radio buttons to start off with anyway, so perhaps I'm moving in the right direction.

    RS

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Could be something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    function calculate(){
    var allinp=document.getElementById('myForm').getElementsByTagName('input');
    var tot=0, i=0, c
    while(c=allinp[i++]){
    c.type=='checkbox'&&c.checked?tot+=Number(c.value):null;
    document.getElementById('total').value=tot;
    }
    }
    onload=function(){
    var allinp=document.getElementById('myForm').getElementsByTagName('input');
    var i=0, c
    while(c=allinp[i++]){
    c.type=='checkbox'?c.onclick=function(){calculate()}:null;
    }
    }
    </script>
    </head>
    <body>
    <form id="myForm">
    <input type="checkbox" value="10">10
    <br>
    <input type="checkbox" value="50">50
    <br>
    <input type="checkbox" value="100">100
    <br>
    <br>
    TOTAL: <input type="text" readonly="readonly" id="total">
    </form>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Oct 2006
    Location
    Lawrence, KS
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's almost perfect, thanks! One question, how can I get the total to format with commas? I'm actually using some pretty big numbers, up to 10 million.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Yes, that is easy, on using Regular Expressions:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    function calculate(){
    var allinp=document.getElementById('myForm').getElementsByTagName('input');
    var tot=0, i=0, c
    while(c=allinp[i++]){
    c.type=='checkbox'&&c.checked?tot+=Number(c.value):null;
    }
    tot=tot.toString()
    var re=/(-?\d+)(\d{3})/;
    while(re.test(tot)){
    tot=tot.replace(re,'$1,$2')
    }
    document.getElementById('total').value=tot;
    }
    onload=function(){
    var allinp=document.getElementById('myForm').getElementsByTagName('input');
    var i=0, c
    while(c=allinp[i++]){
    c.type=='checkbox'?c.onclick=function(){calculate()}:null;
    }
    }
    </script>
    </head>
    <body>
    <form id="myForm">
    <input type="checkbox" value="10000000">10000000
    <br>
    <input type="checkbox" value="500000">500000
    <br>
    <input type="checkbox" value="700000000">700000000
    <br>
    <br>
    TOTAL: <input type="text" readonly="readonly" id="total">
    </form>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Oct 2006
    Location
    Lawrence, KS
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved - Thanks, Kor!

    Kor, you are amazing.

    Easy maybe ... if you're familiar enough. Regular expressions give me heartburn.

    You've encouraged me to dive into JavaScript much more. Thanks so much!


  •  

    Posting Permissions

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