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 12 of 12
  1. #1
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Popup to allow amounts

    I have a web form that has an input text box to enter a total dollar amount of checks counted.
    Is there a way for javascript to pop up a window that will allow the user to enter each individual check amounts and then have that grand total then go in the input text box on the html page?
    Would also not know how many checks there is to enter, so the amount of individual input boxes would vary and the user would have to have a way to add an additional five or other means to add more if need be.

    Or would dhtml be a better way to do this?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Or would dhtml be a better way to do this?
    Ummm...what do you think you were describing in the first paragraph? That's 100% DHTML you are talking about there.
    http://en.wikipedia.org/wiki/Dynamic_HTML

    Anyway, I really don't think that popping up a separate input box for each check would be a very effective human interface. It would be very distracting to see a box pop up, enter an amount, and then wait for another to pop up, etc.

    Oh, wait! You want the popup to show *MANY* places for many check amounts? Yes, that could work. And as for not knowing how many boxes to have: Easy. Just let the user enter an amount and then you automatically display the next box for the next amount. When the user hits just the ENTER key (no amount entered) that means "end of checks".

    Will that work?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Yes that would be great, can you point me in the direction of finding out how to do this?
    Last edited by nca; 07-07-2013 at 04:01 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Okay...try something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#POPON {
        position: absolute;
        display: none;
        top: 100px; left: 100px;
        border: solid brown 3px;
        background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="POPON">
        <form>
            Enter check numbers and amounts:<br/><br/>
            <table id="checks" border="1" cellpadding="3">
            <tr><th>Check #</th><th>Amount</th></tr>
            </table>
        </form>
    </div>
    
    <form id="myform">
        Name: <input name="username" /><br/>
        Phone: <input name="phone" /><br/>
        Amount deposited: <input name="total" />
        &nbsp;&nbsp;&nbsp;<input type="button" value="Enter checks" name="showEnter" /><br/>
        <input type="submit" value="submit" />
    
        <input xtype="hidden" size="300" name="checkList" />
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("myform");
    var popper = document.getElementById("POPON");
    
    form.showEnter.onclick = function( )
    {
        addrow();
        popper.style.display = "block";
    }
    
    function addrow( )
    {
        var tb = document.getElementById("checks");
        var newrow = tb.insertRow(-1);
        var cell0 = newrow.insertCell(-1);
        var inp0 = document.createElement("input");
        inp0.name = "checknum";
        inp0.onkeyup = function(e) { donecheck( e, this ); }
        cell0.appendChild(inp0);
    
        var cell1 = newrow.insertCell(-1);
        var inp1 = document.createElement("input");
        inp1.name = "amount";
        inp1.onchange = tally;
        cell1.appendChild(inp1);
        inp0.focus( );
    }
    
    function tally( )
    {
        var amounts = this.form.amount;
        var checknums = this.form.checknum;
        var sum = 0;
        var clist = [];
        if ( amounts.length == null )
        { 
            sum = Number(amounts.value);
            clist.push( "Check " + checknums.value + "::" + amounts.value );
            
        } else {
            for ( var a = 0; a < amounts.length; ++a )
            {
                sum += Number(amounts[a].value);
                clist.push( "Check " + checknums[a].value + "::" + amounts[a].value );
            }
        }
        if ( ! isNaN(sum) ) 
        { 
            form.total.value = sum.toFixed(2);
            form.checkList.value = clist.join("##");
            addrow( );
        }
    }
    
    function donecheck( evt, This )
    {
        // was enter key pressed but no check # entered?  If so, we are done
        var key = ( evt || window.event ).keyCode;
        if ( key === 13 && This.value.length === 0 ) 
        {
            popper.style.display = "none";
        }
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    nca (07-08-2013)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    You didn't ask for it, but I added in the ability to collect the full list of check numbers and amounts.

    That is, on the popon, as the user enters check numbers and amounts, not only is the total of the check amounts shown in the "total" field, but a list of checks is stored in the checkList field. That field would normally be a hidden field (so you would change xtype= to type=), but it is purposely displayed here so you can see what it looks like.

    If you really don't want that, and you don't want to input the check numbers, it's a fairly easy change.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you so much! I will ask you though, how can I add a "Done" button to the bottom of the yellow entering window, that will close the yellow window instead of hitting enter while cursor is in the check # box?
    Last edited by nca; 07-08-2013 at 12:57 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Try it out before you thank me. <grin/>

    Tell me what is wrong with it, from your perspective.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I will ask you though, how can I add a "Done" button to the bottom of the yellow entering window, that will close the yellow window instead of hitting enter while cursor is in the check # box?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Actually, that's easier and more stable than the enter in blank box.

    Just a moment.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Maybe this?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#POPON {
        position: absolute;
        display: none;
        top: 100px; left: 100px;
        border: solid brown 3px;
        background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="POPON">
        <form>
            Enter check numbers and amounts:<br/><br/>
            <table id="checks" border="1" cellpadding="3">
            <tr><th>Check #</th><th>Amount</th></tr>
            </table>
        </form>
        <input type="button" id="popdone" value="Done"/>
    </div>
    
    <form id="myform">
        Name: <input name="username" /><br/>
        Phone: <input name="phone" /><br/>
        Amount deposited: <input name="total" />
        &nbsp;&nbsp;&nbsp;<input type="button" value="Enter checks" name="showEnter" /><br/>
        <input type="submit" value="submit" />
    
        <input xtype="hidden" size="300" name="checkList" />
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("myform");
    var popper = document.getElementById("POPON");
    
    form.showEnter.onclick = function( )
    {
        addrow();
        popper.style.display = "block";
    }
    
    function addrow( )
    {
        var tb = document.getElementById("checks");
        var newrow = tb.insertRow(-1);
        var cell0 = newrow.insertCell(-1);
        var inp0 = document.createElement("input");
        inp0.name = "checknum";
        cell0.appendChild(inp0);
    
        var cell1 = newrow.insertCell(-1);
        var inp1 = document.createElement("input");
        inp1.name = "amount";
        inp1.onchange = tally;
        cell1.appendChild(inp1);
        inp0.focus( );
    }
    
    function tally( )
    {
        var amounts = this.form.amount;
        var checknums = this.form.checknum;
        var sum = 0;
        var clist = [];
        if ( amounts.length == null )
        { 
            sum = Number(amounts.value);
            clist.push( "Check " + checknums.value + "::" + amounts.value );
            
        } else {
            for ( var a = 0; a < amounts.length; ++a )
            {
                sum += Number(amounts[a].value);
                clist.push( "Check " + checknums[a].value + "::" + amounts[a].value );
            }
        }
        if ( isNaN(sum) ) 
        {
            this.style.backgroundColor = "pink";
            this.focus( );
        } else {
            this.style.backgroundColor = "white";
            form.total.value = sum.toFixed(2);
            form.checkList.value = clist.join("##");
            if ( amounts.length == null || amounts[amounts.length-1].value != "" )
            {
                addrow( );
            }
        }
    }
    
    document.getElementById("popdone").onclick = function( )
    {
        popper.style.display = "none";
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    IE requires

    Code:
    form.showEnter.onclick = function( )
    {
        popper.style.display = "block";
        addrow();
    }
    to allow focus of inp0
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Old Pedant (07-08-2013)

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Ahhh...yes, that makes sense. Thanks, Vic.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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