| | |
Show price in field when radio button or checkbox is selected.
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: May 2008
Posts: 15
Reputation:
Solved Threads: 0
On first look this appears to be exactly what I was hopting for. I will work on taking this and plugging it into the registration page and expanding the functionality to the otherradio buttons.
What would need to be done to add back in the ability to total up all of the prices in the regTotal field so that it shows a total and updates as radio buttons or checkboxes are clicked?
Thanks for all of your work on this.
What would need to be done to add back in the ability to total up all of the prices in the regTotal field so that it shows a total and updates as radio buttons or checkboxes are clicked?
Thanks for all of your work on this.
Here is it, this comes with a total price value field.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <?xml-stylesheet type="text/css" href="#css21" media="screen"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://www.w3.org/2005/10/profile"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Window-Target" content="_top" /> <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" /> <title>Free Live Help!</title> <style id="css21" type="text/css" media="screen"> /* <![CDATA[ */ table { margin : 0 auto; color : #405060; letter-spacing : 2px; border : 1px solid #aaa; empty-cells : show; border-collapse : collapse; width : 98%; } td { padding : .500em 1em .500em 1em; border-bottom : 1px solid #aaa; } td:first-child { background-color : #f7f7f7; text-align : center; width : 25%; border-right : medium groove #aaa; padding : 0; } tr { line-height : 1.6 } /* ]]> */ </style> <script id="javascriptV15" type="text/javascript"> // <![CDATA[ var field1, field2, fieldTotal; var price = { // Specify the following price value for this element. reg3day_1 : "$210.00", reg3day_2 : "$315.00", reg3day_3 : "$140.00", regExhibits : "$25.00" }; var showValue = function( ids ) { field2 = (( document.getElementById ) ? document.getElementById("regExhibitsPrice") : document.all.regExhibitsPrice ); fieldTotal = (( document.getElementById ) ? document.getElementById("regTotal") : document.all.regTotal ); if ( this.checked && this.type === "radio" ) { field1.value = price[ this.id ]; } else { if ( typeof ids !== "undefined" ) { field2.value = (( field2.value === price[ ids ] ) ? "" : price[ ids ] ); } } var f1 = (( field1.value ) ? field1.value.substr( 1 ) : "" ); var f2 = (( field2.value ) ? field2.value.substr( 1 ) : "" ); fieldTotal.value = "$" + parseFloat((( f1 ) * 1 ) + (( f2 ) * 1 )); }; var getValue = function() { var check = true; field1 = (( document.getElementById ) ? document.getElementById("reg3dayPrice") : document.all.reg3dayPrice ); var iRadio; try { if ( document.getElementsByName ) { iRadio = document.getElementsByName( "reg3day" ); } } catch( e ) { check = false; iRadio = (( document.getElementsByTagName ) ? document.getElementsByTagName("input") : document.all.tags("input")); } for ( var x = 0; x < (( check ) ? iRadio.length : 3 ); x++ ) { if ( check ) { iRadio[ x ].onclick = showValue; } else { iRadio[ "reg3day_" + (( x ) + 1 ) ].onclick = showValue; } } }; window.onload = getValue; // ]]> </script> </head> <body> <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>"> <table frame="void" rules="none" cellpadding="2" cellspacing="0" class="KT_tngtable" summary="JavaScript :: Live Demo!"> <tr> <td class="KT_th">3-Day Package:</td> <td>Includes all general sessions, all exhibit events, lunches, and afternoon Breakout Sessions on Thursday, Friday, and Saturday.<td> </tr> <tr> <td width="20%" class="KT_th"><label for="reg3day_1"></label></td> <td><div> <input type="radio" name="reg3day" id="reg3day_1" value="ASCLS Member" /> <label for="reg3day_1">ASCLS Professional I or II Member ($210.00)</label> </div> <div> <input type="radio" name="reg3day" id="reg3day_2" value="ASCLS Collaborative" /> <label for="reg3day_2">ASCLS Collaborative Member ($315.00)</label> </div> <div> <input type="radio" name="reg3day" id="reg3day_3" value="ASCLS Student/Emeritus" /> <label for="reg3day_3">ASCLS Student/Emeritus Member ($140.00)</label> </div> <td style="width : 25%; text-align : center"><input name="reg3dayPrice" type="text" id="reg3dayPrice" size="10" /></td> </tr> <tr> <td width="20%" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td> <td><input type="checkbox" name="regExhibits" id="regExhibits" value="Y" onclick="showValue( this.id );" /> Entrance Fee - One Time Pass, includes food ($25.00)</td> <td style="width : 25%; text-align : center"><input name="regExhibitsPrice" type="text" id="regExhibitsPrice" size="10" /></td> </tr> <tr><td><label for="regTotal">Total Amount:</label></td><td colspan="2"><input type="text" id="regTotal" name="regTotal" size="10" value="" /></td></tr> <tr class="KT_buttons"> <td style="border-right : none; width : auto; padding : .500em 1em .500em 1em;" colspan="3"><input type="submit" name="KT_Insert1" id="KT_Insert1" value="Insert record" /> </td> </tr> </table> <input type="hidden" name="regLate" id="regLate" value="" /> </form> </body> </html>
•
•
Join Date: May 2008
Posts: 15
Reputation:
Solved Threads: 0
essential
Thanks again for all the work you have done on this. I was able to transfer the functionality you created to my original form without any problems. Next question:
Since I have several groups of radio buttons, how do I get the functionality that you created for reg3day - reg3dayPrice to work for the other radio groups? Here's an example of what I have:
reg3day -> reg3dayPrice
reg1day -> reg1dayPrice
regSday -> regSdayPrice
each one of these has 5 different pricing options. There are also a couple of additional radio groups that only have two price options.
J.R.
Thanks again for all the work you have done on this. I was able to transfer the functionality you created to my original form without any problems. Next question:
Since I have several groups of radio buttons, how do I get the functionality that you created for reg3day - reg3dayPrice to work for the other radio groups? Here's an example of what I have:
reg3day -> reg3dayPrice
reg1day -> reg1dayPrice
regSday -> regSdayPrice
each one of these has 5 different pricing options. There are also a couple of additional radio groups that only have two price options.
J.R.
This is a major headache, so please take extra caution when you declare your object (ids/names) inside the
Here's the code for the form.js
price = { /* OBJECT COLLECTION */ } .Here's the code for the form.js
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
/******************************* - Simplified Form Access Script v7.9 ******************************** - This notice must remain intact for use : ******************************** ~ Developed By DaniWeb USER : essential ~ http://www.daniweb.com/forums/member383844.html ---------------------------------------- In able for this to work, you must explicitly declare all (names or ids) of existing radio/checkboxes inside the ( price = { Object : ( names : value ) collection } ---------------------------------------- Example: var price = { *OBJECT LABEL (name/id) * (radio's or checkboxe's names/ids) : *STRING/NUMBER* "price value" (string/integer) }; *******************************/ var price = { /* OBJECT NAME : reg3day group ~ OBJECT IDS : reg3day_1 => value => 210 reg3day_2 => value => 315 reg3day_3 => value => 140 */ reg3day : { reg3day_1 : 210, reg3day_2 : 315, reg3day_3 : 140 }, /* OBJECT NAME : reg3day1 group ~ OBJECT IDS : reg3day_01 => value => 210 * 2 reg3day_02 => value => 315 * 2 reg3day_03 => value => 140 * 2 */ reg3day1 : { reg3day_01 : 420, reg3day_02 : 630, reg3day_03 : 280 }, // OBJECT IDS : regExhibits : 25, regExhibits1 : 50 }; /* W-A-R-N-I-N-G-! Do not edit anything below this line */ var eLen; var fLen; var $form; var $element; var modern = Boolean( document.getElementById ); var ie = Boolean( document.all && !modern ); var node = Boolean( document.getElementsByTagName ); var $ = function( FORMID, FORMELEMENT ) { if ( typeof FORMID !== "undefined" ) { var classes = typeof( FORMID ); try { switch( classes ) { case "object" : try { $form = FORMID; $element = eval( "$form." + FORMELEMENT ); } catch( e0 ) { $form = document.forms[ FORMID.id ]; $element = $form.elements[ FORMELEMENT ]; } break; case "string" : if ( document.forms ) { $form = document.forms[ FORMID ]; $element = $form.elements[ FORMELEMENT ]; } else { $form = (( modern ) ? document.getElementById( FORMID ) : (( ie ) ? document.all[ FORMID ] : (( document.layers ) ? document.layers[ FORMID ] : undefined ))); $element = $form.children[ FORMELEMENT ]; } break; case "number" : $form = (( node ) ? document.getElementsByTagName("form")[ FORMID ] : (( ie ) ? document.all.tags("form").item( FORMID ) : undefined )); $element = (( node ) ? $form.getElementsByTagName("input")[ FORMELEMENT ] : (( ie ) ? $form.all.tags("input").item( FORMELEMENT ) : undefined )); break; default : $form = undefined; break; } } catch( error ) { $form = undefined; } if ( typeof FORMELEMENT === "undefined" ) { return $form; } return $element; } }; var $total = function() { var $overAll = []; for ( var $z = 0; $z < fLen; $z++ ) { $overAll[ $z ] = Number( String( $( $z, "reg3dayPrice" + $z ).value ).substr( 1 )) + Number( String( $( $z, "regExhibitsPrice" + $z ).value ).substr( 1 )); $( $z, "regTotal" + $z ).value = "$" + $overAll[ $z ] + ".00"; $( $z, "regTotal" + $z ).value = (( $( $z, "regTotal" + $z ).value === "$0.00" ) ? "" : $( $z, "regTotal" + $z ).value ); } }; var showRadValue = function() { var $radPrice = ""; if ( this.checked ) { $radPrice = price[ this.name ][ this.id ]; for ( var $k = 0; $k < fLen; $k++ ) { if (( $( $k, "reg3dayPrice" + $k )) && ( $( $k, this.id ))) { $( $k, "reg3dayPrice" + $k ).style.textAlign = "center"; $( $k, "reg3dayPrice" + $k ).value = "$" + $radPrice + ".00"; continue; } } } $total(); }; var showChkValue = function() { var $chkPrice = ""; for ( var $i = 0; $i < fLen; $i++ ) { if (( $( $i, "regExhibitsPrice" + $i )) && ( $( $i, this.id ))) { $chkPrice = price[ this.id ]; $( $i, "regExhibitsPrice" + $i ).style.textAlign = "center"; if ( this.checked ) { $( $i, "regExhibitsPrice" + $i ).value = "$" + $chkPrice + ".00"; } else { $( $i, "regExhibitsPrice" + $i ).value = ""; } break; } } $total(); }; var getValue = function() { var fnode = (( document.forms ) ? document.forms : (( node ) ? document.getElementsByTagName("form") : (( ie ) ? document.all.tags("form") : undefined ))); if ( typeof fnode !== "undefined" ) { fLen = fnode.length; for ( var i = 0; i < fLen; i++ ) { var enode = (( document.forms ) ? fnode[ i ].elements : (( node ) ? fnode[ i ].getElementsByTagName("input") : (( ie ) ? fnode[ i ].all.tags("input") : undefined ))); eLen = enode.length; for ( var x = 0; x < eLen; x++ ) { if ( $( i, x ).type === "radio" ) { $( i, x ).onclick = showRadValue; continue; } $( i, x ).onclick = showChkValue; } } } }; window.onload = getValue;
And here's the document sample:
Try to study the naming system i used inside this document and run it first before you apply new modification.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <?xml-stylesheet type="text/css" href="#css21" media="screen"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://www.w3.org/2005/10/profile"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Window-target" content="_top" /> <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" /> <title>Free Live Help!</title> <style id="css21" type="text/css" media="screen"> /* <![CDATA[ */ table { margin : 0 auto; color : #405060; letter-spacing : 2px; border : 1px solid #aaa; empty-cells : show; border-collapse : collapse; width : 98%; } td { padding : .500em 1em .500em 1em; border-bottom : 1px solid #aaa; } td:first-child { background-color : #f7f7f7; text-align : center; width : 25%; border-right : medium groove #aaa; padding : 0; } tr { line-height : 1.6 } /* ]]> */ </style> <script type="text/javascript" src="form.js"></script> </head> <body> <div id="main"> <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>"> <table frame="void" rules="none" cellpadding="2" cellspacing="0" class="KT_tngtable" summary="JavaScript :: Live Demo!"> <tr> <td class="KT_th">3-Day Package:</td> <td>Includes all general sessions, all exhibit events, lunches, and afternoon Breakout Sessions on Thursday, Friday, and Saturday.<td> </tr> <tr> <td width="20%" class="KT_th"><label for="reg3day_1"></label></td> <td><div> <input type="radio" name="reg3day" id="reg3day_1" value="ASCLS Member" /> <label for="reg3day_1">ASCLS Professional I or II Member ($210.00)</label> </div> <div> <input type="radio" name="reg3day" id="reg3day_2" value="ASCLS Collaborative" /> <label for="reg3day_2">ASCLS Collaborative Member ($315.00)</label> </div> <div> <input type="radio" name="reg3day" id="reg3day_3" value="ASCLS Student/Emeritus" /> <label for="reg3day_3">ASCLS Student/Emeritus Member ($140.00)</label> </div> <td style="width : 25%; text-align : center"><input name="reg3dayPrice0" type="text" id="reg3dayPrice0" size="10" /></td> </tr> <tr> <td width="20%" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td> <td><input type="checkbox" name="regExhibits" id="regExhibits" value="Y" /> Entrance Fee - One Time Pass, includes food ($25.00)</td> <td style="width : 25%; text-align : center"><input name="regExhibitsPrice0" type="text" id="regExhibitsPrice0" size="10" /></td> </tr> <tr><td><label for="regTotal">Total Amount:</label></td><td colspan="2"><input type="text" id="regTotal0" name="regTotal0" size="10" value="" /></td></tr> <tr class="KT_buttons"> <td style="border-right : none; width : auto; padding : .500em 1em .500em 1em;" colspan="3"><input type="submit" name="KT_Insert1" id="KT_Insert1" value="Insert record" /> </td> </tr> </table> <input type="hidden" name="regLate" id="regLate" value="" /> </form> <form method="post" id="form2" action="#"> <table frame="void" rules="none" cellpadding="2" cellspacing="0" class="KT_tngtable" summary="JavaScript :: Live Demo!"> <tr> <td class="KT_th">3-Day Package:</td> <td>Includes all general sessions, all exhibit events, lunches, and afternoon Breakout Sessions on Thursday, Friday, and Saturday.<td> </tr> <tr> <td width="20%" class="KT_th"><label for="reg3day1"></label></td> <td><div> <input type="radio" name="reg3day1" id="reg3day_01" value="ASCLS Member" /> <label for="reg3day_01">ASCLS Professional I or II Member ($420.00)</label> </div> <div> <input type="radio" name="reg3day1" id="reg3day_02" value="ASCLS Collaborative" /> <label for="reg3day_02">ASCLS Collaborative Member ($630.00)</label> </div> <div> <input type="radio" name="reg3day1" id="reg3day_03" value="ASCLS Student/Emeritus" /> <label for="reg3day_03">ASCLS Student/Emeritus Member ($280.00)</label> </div> <td style="width : 25%; text-align : center"><input name="reg3dayPrice1" type="text" id="reg3dayPrice1" size="10" /></td> </tr> <tr> <td width="20%" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td> <td><input type="checkbox" name="regExhibits1" id="regExhibits1" value="Y" /> Entrance Fee - One Time Pass, includes food ($50.00)</td> <td style="width : 25%; text-align : center"><input name="regExhibitsPrice1" type="text" id="regExhibitsPrice1" size="10" /></td> </tr> <tr><td><label for="regTotal">Total Amount:</label></td><td colspan="2"><input type="text" id="regTotal1" name="regTotal1" size="10" value="" /></td></tr> <tr class="KT_buttons"> <td style="border-right : none; width : auto; padding : .500em 1em .500em 1em;" colspan="3"><input type="submit" name="KT_Insert1" id="KT_Insert1" value="Insert record" /> </td> </tr> </table> <input type="hidden" name="regLate1" id="regLate1" value="" /> </form> </div> </body> </html>
Try to study the naming system i used inside this document and run it first before you apply new modification.
![]() |
Similar Threads
- radio button looses the selected state after validation (JavaScript / DHTML / AJAX)
- make a radio button checked if it was selected before (PHP)
- problem in checking focus of radio button (JavaScript / DHTML / AJAX)
- checkbox or radio button value cant keep during recordset paging function (ASP)
- Validating radio button selection for login redirect (JavaScript / DHTML / AJAX)
- need help how to add multiple email addresses on a radio button (ASP)
- Function to Create Radio Button (JavaScript / DHTML / AJAX)
- Testing Which Radio Button is selected (ASP.NET)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: error handling for AJAX div
- Next Thread: Simple button swap linking different pages
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt hiddenvalue hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal php player position problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n





