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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Autocomplete form based on checked boxes

    I would like to use a JavaScript to fill in the total based on the responses given by the user in this form stub:
    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" xml:lang="en" lang="en">
    <head>
        <title>Formstub</title>
    
    </head>
    <body>
        <form id="theform" id="theform" action="formstub.html" method="post">
    			<table width="90%" border = "1
               " 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" id="skipperReg" value="30"  /></td>
    					<td width="12em">Registration Fee</td>
    					<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" value="30" style="text-align:right" /></td>
    					<td width ="20em">&nbsp;</td>
    				</tr>
    				<tr>
    					<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" /></td>
    					<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" value="8" style="text-align:right" /></td>
    					<td>&nbsp;&nbsp;# Guests&nbsp;<input type="text" name="guestQty" id="guestQty" size="2" /></td>
    				</tr>
    				<tr>
    					<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" /></td>
    					<td>Misc</td><td>$<input type="text" name="miscTotal" size ="2" style="text-align:right" /></td>
    					<td>&nbsp;&nbsp;List details&nbsp;<input type="text" name="miscDetails" size="35" /></td>
    				</tr>
    				<tr style="height:2em"><td >&nbsp;</td>
    					<td>Total</td><td>$<input type="text" id="total" name="total"  size ="2"  style="text-align:right" ></td>
    				</tr>
    			</table>    
        </form>
    </body>
    </html>
    The script should add the skipperfee to the total if the skipperReg box is checked, multiply the guestFee by the guestQty and add that to the total if the guestReg box is checked, and add the miscTotal to the total if the miscAmt box is checked.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This forum is not a free coding service. You should learn Javascript. However ....


    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" xml:lang="en" lang="en">
    <head>
        <title>Formstub</title>
    
    </head>
    <body>
        <form name="theform" id="theform" action="formstub.html" method="post">
    			<table width="90%" border = "1
               " 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" id="skipperReg"  onclick = "update()"/></td>
    					<td width="12em">Registration Fee</td>
    					<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" style="text-align:right" /></td>
    					<td width ="20em">&nbsp;</td>
    				</tr>
    				<tr>
    					<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" onclick = "update()" /></td>
    					<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" style="text-align:right" /></td>
    					<td>&nbsp;&nbsp;# Guests&nbsp;<input type="text" name="guestQty" id="guestQty" onchange = "update()" size="2" /></td>
    				</tr>
    				<tr>
    					<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" onclick = "update()"/></td>
    					<td>Misc</td><td>$<input type="text" name="miscTotal" id = "miscTotal"size ="2" style="text-align:right" onchange = "update()"/></td>
    					<td>&nbsp;&nbsp;List details&nbsp;<input type="text" name="miscDetails" size="35" /></td>
    				</tr>
    				<tr style="height:2em"><td >&nbsp;</td>
    					<td>Total</td><td>$<input type="text" id="total" name="total"  size ="2"  style="text-align:right" ></td>
    				</tr>
    			</table>    
        </form>
    
    <script type = "text/javascript">
    
    function update() {
    var tot = 0;
    
    if (document.getElementById("skipperReg").checked) {
    document.getElementById("skipperFee").value = 30;
    tot += 30;
    }
    else {
    document.getElementById("skipperFee").value = 0;
    }
    
    if (document.getElementById("guestReg").checked) {
    var gq = Number(document.getElementById("guestQty").value) || 0;
    document.getElementById("guestFee").value = gq *8;
    tot += gq*8;
    }
    else {
    document.getElementById("guestFee").value ="";
    }
    
    var mt = 0;
    if (document.getElementById("miscAmt").checked) {
    var mt =  Number(document.getElementById("miscTotal").value) || 0;
    }
    else {
    document.getElementById("miscTotal").value = "";
    }
    tot = tot + mt;
    
    document.getElementById("total").value = tot;
    
    }
    
    </script>
    
    
    </body>
    </html>

    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 01-21-2012 at 09:38 AM. Reason: Notice typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    NewHeart42108 (01-21-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, Philip. Your example goes a long way towards helping me "learn Javascript". The books I have seem determined to either make the process more difficult than it is, or show trivial examples that do not relate to the real world.

    Could you explain the purpose of the "or zero" part of the variable definition var mt = Number(document.getElementById("miscTotal").value) || 0;
    ?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by NewHeart42108 View Post
    Thanks, Philip. Your example goes a long way towards helping me "learn Javascript". The books I have seem determined to either make the process more difficult than it is, or show trivial examples that do not relate to the real world.

    Could you explain the purpose of the "or zero" part of the variable definition var mt = Number(document.getElementById("miscTotal").value) || 0;
    ?
    If the result of the Number() evaluation is NaN (not a number), make the value the number 0 instead. OK?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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