SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display running total

    I have the following form segment:
    Code:
    			<table width="90%" border = "0" style="margin-left:40px; 	font-family: helvetica, ariel, sans-serif; font-size: 0.95em; color: #2D8AB9;">
    				<tr style="height:3em">
    					<td width="2em"><input type="checkbox" name="skipperReg" value="<?php echo $skipperFee ?>" /></td>
    					<td width="12em">Registration Fee</td>
    					<td width="4em" style="text-align:right">$<input type="text" name="total" readonly="readonly" size ="2" value="<?php echo $skipperFee ?>" /></td>
    					<td width ="20em">&nbsp;</td>
    				</tr>
    				<tr>
    					<td ><input type="checkbox" name="guestReg" value="<?php echo $guestFee ?>" /></td>
    					<td>Guest Fee</td><td style="text-align:right">$<input type="text" name="total" readonly="readonly" size ="2" value="<?php echo $guestFee ?>" /></td>
    					<td>&nbsp;&nbsp;# Guests&nbsp;<input type="text" name="GuestQty" size="2" /></td>
    				</tr>
    				<tr>
    					<td ><input type="checkbox" name="miscAmt"/></td>
    					<td>Misc</td><td style="text-align:right">$<input type="text" name="miscTotal" size ="2" /></td>
    					<td>&nbsp;&nbsp;List details&nbsp;<input type="text" name="miscDetails" size="15" /></td>
    				</tr>
    				<tr style="height:2em"><td >&nbsp;</td>
    					<td>Total</td><td style="text-align:right">$<input type="text" name="total" readonly="readonly" size ="2"></td>
    				</tr>
    			</table>
    I need a JavaScript that will
    If skipperReg is checked, add skipperFee value to the total
    If guestReg is checked, add guestFee value times guestQty to the total
    If miscAmt is checked, add miscTotal value to the total
    Display the new total each time the other inputs are changed.

    TIA,
    --Doug

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by NewHeart42108 View Post
    I need a JavaScript that will
    • If skipperReg is checked, add skipperFee value to the total
    • If guestReg is checked, add guestFee value times guestQty to the total
    • If miscAmt is checked, add miscTotal value to the total
    • Display the new total each time the other inputs are changed.
    You can attach a function to the form that will be run whenever something in the form changes.

    So if the form had an id of "booking", such as:

    HTML Code:
    <form id="booking" ...>
        ...
    </form>
    you could then attach a function to whenever the form changes, with:

    Code javascript:
    var updateForm = function () {
        ...
    };
    var form = document.getElementById('booking');
    form.onchange = updateForm;

    That way, you can specify what needs to be done within that function, for example:


    Code javascript:
    var updateForm = function () {
        var form = this,
            total = 0;
        if (form.elements.skipperReg.checked) {
            total += Number(form.elements.skipperReg.value);
        }
        ...
        form.elements.total = total;
    };

    There's also other ways of doing this with less repetition, such as placing the boxes to be checked in an array and looping through that array adding the appropriate results to the total.

    Code javascript:
    var updateForm = function () {
        var form = this,
            total = 0,
            fieldsToCheck = ['skipperReg', ...],
            i,
            checkbox;
        for (i = 0; i < fieldsToCheck.length; i += 1) {
            checkbox = form.elements[fieldsToCheck[i]];
            if (checkbox.checked) {
                total += Number(checkbox.value);
            }
        }
        form.elements.total = total;
    };

    Or if you have access to JavaScript 1.6 (or you can use the compatibility code from Array.forEach()) you can simplify this even further with:

    Code javascript:
    var updateForm = function () {
        var form = this,
            fieldsToCheck = ['skipperReg', ...],
            total = 0;
        fieldsToCheck.forEach(function () {
            var checkbox = form.elements[this];
            total += (checkbox.checked) ? Number(checkbox.value) : 0;
        });
        form.elements.total = total;
    };

    Or if you have access to JavaScript 1.8 you can use Array.reduce() on the array instead (helped by the compatibility code for lesser web browsers):

    Code javascript:
    var updateForm = function () {
        this.elements.total =  ['skipperReg', ...].reduce(function () {
            var checkbox = form.elements[this];
            return (checkbox.checked) ? Number(checkbox.value) : 0;
        }, 0);
    };

    There's pretty much a vast number of ways of doing this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul, for the information.
    I added the following script to my page:
    Code:
    <script type="text/javascript">
    var updateForm = function () {
        var form = this,
            total = 0;
        if (form.elements.skipperReg.checked) {
            total += Number(form.elements.skipperReg.value);
    		document.write("Skipper Registration")
        }
    /*    if (form.elements.guestReg.checked) {
            total += Number(form.elements.guestReg.value) * Number(form.elements.guestQty.value);
        }*/
        if (form.elements.miscAmt.checked) {
            total += Number(form.elements.miscAmt.value);
        }
        form.elements.total = total;
    };
    
    var form = document.getElementById("theform")
    form.onchange = updateForm;
    </script>
    If the commented line is left in, I get a blank page. If left out, I see my page correctly, but the expected change from the JS is not seen.

    I put in the document.write line to see if I could make the script do anything.

    Is there something obviously wrong that you can see in my script? What is the best way to troubleshoot the problem?

    --Doug

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by NewHeart42108 View Post
    Is there something obviously wrong that you can see in my script? What is the best way to troubleshoot the problem?
    The best way to troubleshoot is to check your assumptions about the form. Are the form fields that you're trying to access actually called what you think they are?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realize that you are trying to "teach" me, rather than "tell" me, and I appreciate that. But, unfortunately, my knowledge level is so low, I can't process your last hint. Could you make it a little more specific? Thanks.

    --Doug

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by NewHeart42108 View Post
    I realize that you are trying to "teach" me, rather than "tell" me, and I appreciate that. But, unfortunately, my knowledge level is so low, I can't process your last hint. Could you make it a little more specific? Thanks.
    Sure thing.

    Code:
    <input type="text" name="GuestQty" size="2" />
    
    ...
    
    ... * Number(form.elements.guestQty.value);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •