943,522 Members | Top Members by Rank

Ad:
You are currently viewing page 3 of this multi-page discussion thread; Jump to the first page
Jul 2nd, 2009
0

Re: Show price in field when radio button or checkbox is selected.

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jrconstance is offline Offline
15 posts
since May 2008
Jul 3rd, 2009
0

Re: Show price in field when radio button or checkbox is selected.

If we wil do that, then we'l have to add another field. Ok i'l post back again later...


essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 3rd, 2009
0

Re: Show price in field when radio button or checkbox is selected.

Here is it, this comes with a total price value field.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-Target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15. table {
  16. margin : 0 auto;
  17. color : #405060;
  18. letter-spacing : 2px;
  19. border : 1px solid #aaa;
  20. empty-cells : show;
  21. border-collapse : collapse;
  22. width : 98%; }
  23.  
  24. td {
  25. padding : .500em 1em .500em 1em;
  26. border-bottom : 1px solid #aaa; }
  27.  
  28. td:first-child {
  29. background-color : #f7f7f7;
  30. text-align : center;
  31. width : 25%;
  32. border-right : medium groove #aaa;
  33. padding : 0; }
  34.  
  35. tr { line-height : 1.6 }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script id="javascriptV15" type="text/javascript">
  40. // <![CDATA[
  41. var field1, field2, fieldTotal;
  42.  
  43. var price = { // Specify the following price value for this element.
  44.  
  45. reg3day_1 : "$210.00",
  46. reg3day_2 : "$315.00",
  47. reg3day_3 : "$140.00",
  48. regExhibits : "$25.00"
  49. };
  50.  
  51. var showValue = function( ids ) {
  52. field2 = (( document.getElementById ) ? document.getElementById("regExhibitsPrice") : document.all.regExhibitsPrice );
  53. fieldTotal = (( document.getElementById ) ? document.getElementById("regTotal") : document.all.regTotal );
  54. if ( this.checked && this.type === "radio" ) {
  55. field1.value = price[ this.id ];
  56. } else {
  57. if ( typeof ids !== "undefined" ) {
  58. field2.value = (( field2.value === price[ ids ] ) ? "" : price[ ids ] );
  59. }
  60. }
  61. var f1 = (( field1.value ) ? field1.value.substr( 1 ) : "" );
  62. var f2 = (( field2.value ) ? field2.value.substr( 1 ) : "" );
  63.  
  64. fieldTotal.value = "$" + parseFloat((( f1 ) * 1 ) + (( f2 ) * 1 ));
  65. };
  66. var getValue = function() {
  67. var check = true;
  68. field1 = (( document.getElementById ) ? document.getElementById("reg3dayPrice") : document.all.reg3dayPrice );
  69. var iRadio;
  70. try {
  71. if ( document.getElementsByName ) {
  72. iRadio = document.getElementsByName( "reg3day" );
  73. }
  74. } catch( e ) {
  75. check = false;
  76. iRadio = (( document.getElementsByTagName ) ? document.getElementsByTagName("input") : document.all.tags("input"));
  77. } for ( var x = 0; x < (( check ) ? iRadio.length : 3 ); x++ ) {
  78. if ( check ) {
  79. iRadio[ x ].onclick = showValue;
  80. } else {
  81. iRadio[ "reg3day_" + (( x ) + 1 ) ].onclick = showValue;
  82. }
  83. }
  84. };
  85. window.onload = getValue;
  86.  
  87. // ]]>
  88. </script>
  89. </head>
  90. <body>
  91. <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>">
  92. <table frame="void" rules="none" cellpadding="2" cellspacing="0" class="KT_tngtable" summary="JavaScript :: Live Demo!">
  93. <tr>
  94. <td class="KT_th">3-Day Package:</td>
  95. <td>Includes all general sessions, all exhibit events, lunches, and afternoon Breakout Sessions on Thursday, Friday, and Saturday.<td>
  96. </tr>
  97. <tr>
  98. <td width="20%" class="KT_th"><label for="reg3day_1"></label></td>
  99. <td><div>
  100. <input type="radio" name="reg3day" id="reg3day_1" value="ASCLS Member" />
  101. <label for="reg3day_1">ASCLS Professional I or II Member ($210.00)</label>
  102. </div>
  103. <div>
  104. <input type="radio" name="reg3day" id="reg3day_2" value="ASCLS Collaborative" />
  105. <label for="reg3day_2">ASCLS Collaborative Member ($315.00)</label>
  106. </div>
  107. <div>
  108. <input type="radio" name="reg3day" id="reg3day_3" value="ASCLS Student/Emeritus" />
  109. <label for="reg3day_3">ASCLS Student/Emeritus Member ($140.00)</label>
  110. </div>
  111. <td style="width : 25%; text-align : center"><input name="reg3dayPrice" type="text" id="reg3dayPrice" size="10" /></td>
  112. </tr>
  113. <tr>
  114. <td width="20%" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td>
  115. <td><input type="checkbox" name="regExhibits" id="regExhibits" value="Y" onclick="showValue( this.id );" />
  116. Entrance Fee - One Time Pass, includes food ($25.00)</td>
  117. <td style="width : 25%; text-align : center"><input name="regExhibitsPrice" type="text" id="regExhibitsPrice" size="10" /></td>
  118. </tr>
  119. <tr><td><label for="regTotal">Total Amount:</label></td><td colspan="2"><input type="text" id="regTotal" name="regTotal" size="10" value="" /></td></tr>
  120. <tr class="KT_buttons">
  121. <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" />
  122. </td>
  123. </tr>
  124. </table>
  125. <input type="hidden" name="regLate" id="regLate" value="" />
  126. </form>
  127. </body>
  128. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 3rd, 2009
0

Re: Show price in field when radio button or checkbox is selected.

This is awesome. Thanks so much.

I am going to work through this over the weekend and try to expand this functionality to all of the radio buttons and checkboxes and will let you know how that goes. Thanks so much for all the help.

JR.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jrconstance is offline Offline
15 posts
since May 2008
Jul 3rd, 2009
0

Re: Show price in field when radio button or checkbox is selected.

Hi JR..
Can you share the CSS for your form....
It looks pretty good....

thanks...
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 7th, 2009
0

Re: Show price in field when radio button or checkbox is selected.

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jrconstance is offline Offline
15 posts
since May 2008
Jul 9th, 2009
0

Re: Show price in field when radio button or checkbox is selected.

essential, have you had an opportunty to think about the questions that I asked. Specifically looking for how to extend the functionality you created to additional radio groups.

Thx
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jrconstance is offline Offline
15 posts
since May 2008
Jul 9th, 2009
0

Re: Show price in field when radio button or checkbox is selected.

Im on it and I am almost done with the code. I'll just post back your solution, when i completed the whole run...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 10th, 2009
0

Re: Show price in field when radio button or checkbox is selected.

This is a major headache, so please take extra caution when you declare your object (ids/names) inside the price = { /* OBJECT COLLECTION */ } .

Here's the code for the form.js

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /*******************************
  2.  - Simplified Form Access Script v7.9
  3. ********************************
  4. - This notice must remain intact for use :
  5. ********************************
  6. ~ Developed By DaniWeb USER : essential
  7.  
  8. ~ http://www.daniweb.com/forums/member383844.html
  9. ----------------------------------------
  10.  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 }
  11. ----------------------------------------
  12. Example:
  13. var price = {
  14. *OBJECT LABEL (name/id) * (radio's or checkboxe's names/ids) : *STRING/NUMBER* "price value" (string/integer)
  15. };
  16. *******************************/
  17.  
  18. var price = {
  19. /*
  20.  
  21. OBJECT NAME : reg3day group ~
  22.  
  23.   OBJECT IDS :
  24.   reg3day_1 => value => 210
  25.   reg3day_2 => value => 315
  26.   reg3day_3 => value => 140
  27.  
  28. */
  29.  
  30. reg3day : {
  31. reg3day_1 : 210,
  32. reg3day_2 : 315,
  33. reg3day_3 : 140
  34. },
  35.  
  36. /*
  37.  
  38. OBJECT NAME : reg3day1 group ~
  39.  
  40.   OBJECT IDS :
  41.   reg3day_01 => value => 210 * 2
  42.   reg3day_02 => value => 315 * 2
  43.   reg3day_03 => value => 140 * 2
  44. */
  45.  
  46. reg3day1 : {
  47. reg3day_01 : 420,
  48. reg3day_02 : 630,
  49. reg3day_03 : 280
  50. },
  51.  
  52. // OBJECT IDS :
  53.  
  54. regExhibits : 25,
  55. regExhibits1 : 50
  56. };
  57.  
  58. /* W-A-R-N-I-N-G-!
  59.   Do not edit anything below this line */
  60.  
  61.  
  62. var eLen;
  63. var fLen;
  64. var $form;
  65. var $element;
  66. var modern = Boolean( document.getElementById );
  67. var ie = Boolean( document.all && !modern );
  68. var node = Boolean( document.getElementsByTagName );
  69. var $ = function( FORMID, FORMELEMENT ) {
  70. if ( typeof FORMID !== "undefined" ) {
  71. var classes = typeof( FORMID );
  72. try {
  73. switch( classes ) {
  74. case "object" :
  75. try {
  76. $form = FORMID;
  77. $element = eval( "$form." + FORMELEMENT );
  78. } catch( e0 ) {
  79. $form = document.forms[ FORMID.id ];
  80. $element = $form.elements[ FORMELEMENT ];
  81. } break;
  82. case "string" :
  83. if ( document.forms ) {
  84. $form = document.forms[ FORMID ];
  85. $element = $form.elements[ FORMELEMENT ];
  86. } else {
  87. $form = (( modern ) ? document.getElementById( FORMID ) : (( ie ) ? document.all[ FORMID ] : (( document.layers ) ? document.layers[ FORMID ] : undefined )));
  88. $element = $form.children[ FORMELEMENT ];
  89. } break;
  90. case "number" :
  91. $form = (( node ) ? document.getElementsByTagName("form")[ FORMID ] : (( ie ) ? document.all.tags("form").item( FORMID ) : undefined ));
  92. $element = (( node ) ? $form.getElementsByTagName("input")[ FORMELEMENT ] : (( ie ) ? $form.all.tags("input").item( FORMELEMENT ) : undefined ));
  93. break;
  94. default : $form = undefined;
  95. break;
  96. }
  97. } catch( error ) {
  98. $form = undefined;
  99. } if ( typeof FORMELEMENT === "undefined" ) {
  100. return $form;
  101. } return $element;
  102. }
  103. };
  104. var $total = function() {
  105. var $overAll = [];
  106. for ( var $z = 0; $z < fLen; $z++ ) {
  107. $overAll[ $z ] = Number( String( $( $z, "reg3dayPrice" + $z ).value ).substr( 1 )) + Number( String( $( $z, "regExhibitsPrice" + $z ).value ).substr( 1 ));
  108. $( $z, "regTotal" + $z ).value = "$" + $overAll[ $z ] + ".00";
  109. $( $z, "regTotal" + $z ).value = (( $( $z, "regTotal" + $z ).value === "$0.00" ) ? "" : $( $z, "regTotal" + $z ).value );
  110. }
  111. };
  112. var showRadValue = function() {
  113. var $radPrice = "";
  114. if ( this.checked ) {
  115. $radPrice = price[ this.name ][ this.id ];
  116. for ( var $k = 0; $k < fLen; $k++ ) {
  117. if (( $( $k, "reg3dayPrice" + $k )) && ( $( $k, this.id ))) {
  118. $( $k, "reg3dayPrice" + $k ).style.textAlign = "center";
  119. $( $k, "reg3dayPrice" + $k ).value = "$" + $radPrice + ".00";
  120. continue;
  121. }
  122. }
  123. } $total();
  124. };
  125.  
  126. var showChkValue = function() {
  127. var $chkPrice = "";
  128. for ( var $i = 0; $i < fLen; $i++ ) {
  129. if (( $( $i, "regExhibitsPrice" + $i )) && ( $( $i, this.id ))) {
  130. $chkPrice = price[ this.id ];
  131. $( $i, "regExhibitsPrice" + $i ).style.textAlign = "center";
  132. if ( this.checked ) {
  133. $( $i, "regExhibitsPrice" + $i ).value = "$" + $chkPrice + ".00";
  134. } else {
  135. $( $i, "regExhibitsPrice" + $i ).value = "";
  136. } break;
  137. }
  138. } $total();
  139. };
  140.  
  141. var getValue = function() {
  142. var fnode = (( document.forms ) ? document.forms : (( node ) ? document.getElementsByTagName("form") : (( ie ) ? document.all.tags("form") : undefined )));
  143. if ( typeof fnode !== "undefined" ) {
  144. fLen = fnode.length;
  145. for ( var i = 0; i < fLen; i++ ) {
  146. var enode = (( document.forms ) ? fnode[ i ].elements : (( node ) ? fnode[ i ].getElementsByTagName("input") : (( ie ) ? fnode[ i ].all.tags("input") : undefined )));
  147. eLen = enode.length;
  148. for ( var x = 0; x < eLen; x++ ) {
  149. if ( $( i, x ).type === "radio" ) {
  150. $( i, x ).onclick = showRadValue;
  151. continue;
  152. } $( i, x ).onclick = showChkValue;
  153. }
  154. }
  155. }
  156. };
  157. window.onload = getValue;
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 10th, 2009
0

Re: Show price in field when radio button or checkbox is selected.

And here's the document sample:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15. table {
  16. margin : 0 auto;
  17. color : #405060;
  18. letter-spacing : 2px;
  19. border : 1px solid #aaa;
  20. empty-cells : show;
  21. border-collapse : collapse;
  22. width : 98%; }
  23.  
  24. td {
  25. padding : .500em 1em .500em 1em;
  26. border-bottom : 1px solid #aaa; }
  27.  
  28. td:first-child {
  29. background-color : #f7f7f7;
  30. text-align : center;
  31. width : 25%;
  32. border-right : medium groove #aaa;
  33. padding : 0; }
  34.  
  35. tr { line-height : 1.6 }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript" src="form.js"></script>
  40. </head>
  41. <body>
  42. <div id="main">
  43. <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>">
  44. <table frame="void" rules="none" cellpadding="2" cellspacing="0" class="KT_tngtable" summary="JavaScript :: Live Demo!">
  45. <tr>
  46. <td class="KT_th">3-Day Package:</td>
  47. <td>Includes all general sessions, all exhibit events, lunches, and afternoon Breakout Sessions on Thursday, Friday, and Saturday.<td>
  48. </tr>
  49. <tr>
  50. <td width="20%" class="KT_th"><label for="reg3day_1"></label></td>
  51. <td><div>
  52. <input type="radio" name="reg3day" id="reg3day_1" value="ASCLS Member" />
  53. <label for="reg3day_1">ASCLS Professional I or II Member ($210.00)</label>
  54. </div>
  55. <div>
  56. <input type="radio" name="reg3day" id="reg3day_2" value="ASCLS Collaborative" />
  57. <label for="reg3day_2">ASCLS Collaborative Member ($315.00)</label>
  58. </div>
  59. <div>
  60. <input type="radio" name="reg3day" id="reg3day_3" value="ASCLS Student/Emeritus" />
  61. <label for="reg3day_3">ASCLS Student/Emeritus Member ($140.00)</label>
  62. </div>
  63. <td style="width : 25%; text-align : center"><input name="reg3dayPrice0" type="text" id="reg3dayPrice0" size="10" /></td>
  64. </tr>
  65. <tr>
  66. <td width="20%" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td>
  67. <td><input type="checkbox" name="regExhibits" id="regExhibits" value="Y" />
  68. Entrance Fee - One Time Pass, includes food ($25.00)</td>
  69. <td style="width : 25%; text-align : center"><input name="regExhibitsPrice0" type="text" id="regExhibitsPrice0" size="10" /></td>
  70. </tr>
  71. <tr><td><label for="regTotal">Total Amount:</label></td><td colspan="2"><input type="text" id="regTotal0" name="regTotal0" size="10" value="" /></td></tr>
  72. <tr class="KT_buttons">
  73. <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" />
  74. </td>
  75. </tr>
  76. </table>
  77. <input type="hidden" name="regLate" id="regLate" value="" />
  78. </form>
  79. <form method="post" id="form2" action="#">
  80. <table frame="void" rules="none" cellpadding="2" cellspacing="0" class="KT_tngtable" summary="JavaScript :: Live Demo!">
  81. <tr>
  82. <td class="KT_th">3-Day Package:</td>
  83. <td>Includes all general sessions, all exhibit events, lunches, and afternoon Breakout Sessions on Thursday, Friday, and Saturday.<td>
  84. </tr>
  85. <tr>
  86. <td width="20%" class="KT_th"><label for="reg3day1"></label></td>
  87. <td><div>
  88. <input type="radio" name="reg3day1" id="reg3day_01" value="ASCLS Member" />
  89. <label for="reg3day_01">ASCLS Professional I or II Member ($420.00)</label>
  90. </div>
  91. <div>
  92. <input type="radio" name="reg3day1" id="reg3day_02" value="ASCLS Collaborative" />
  93. <label for="reg3day_02">ASCLS Collaborative Member ($630.00)</label>
  94. </div>
  95. <div>
  96. <input type="radio" name="reg3day1" id="reg3day_03" value="ASCLS Student/Emeritus" />
  97. <label for="reg3day_03">ASCLS Student/Emeritus Member ($280.00)</label>
  98. </div>
  99. <td style="width : 25%; text-align : center"><input name="reg3dayPrice1" type="text" id="reg3dayPrice1" size="10" /></td>
  100. </tr>
  101. <tr>
  102. <td width="20%" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td>
  103. <td><input type="checkbox" name="regExhibits1" id="regExhibits1" value="Y" />
  104. Entrance Fee - One Time Pass, includes food ($50.00)</td>
  105. <td style="width : 25%; text-align : center"><input name="regExhibitsPrice1" type="text" id="regExhibitsPrice1" size="10" /></td>
  106. </tr>
  107. <tr><td><label for="regTotal">Total Amount:</label></td><td colspan="2"><input type="text" id="regTotal1" name="regTotal1" size="10" value="" /></td></tr>
  108. <tr class="KT_buttons">
  109. <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" />
  110. </td>
  111. </tr>
  112. </table>
  113. <input type="hidden" name="regLate1" id="regLate1" value="" />
  114. </form>
  115. </div>
  116. </body>
  117. </html>

Try to study the naming system i used inside this document and run it first before you apply new modification.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: error handling for AJAX div
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Simple button swap linking different pages





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC