AJAX

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

Last »

•

Join Date: May 2008

Posts: 15

Reputation: jrconstance is an unknown quantity at this point

Solved Threads: 0

jrconstance jrconstance is offline

Offline

Newbie Poster

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

Jun 19th, 2009

I am working on a registration form for a conference. The form has several sections of radio buttons and checkboxes and I would like to have it set up so that if a radio button or checkbox is selected the price related to that selection shows up in the rigjt column of the form and can then be totaled up at the bottom of the page.

So, looking for assistance with the javascript (assuming javascript is the best way to do this) for:

1. Show price in field.
2. Total up all of the prices at the bottom of the page.

Any help would be greatly appreciated.

You can view the registration form at:

http://asclsregionviii.org/wpi/imss_09_reg.php

J.R. Constance

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Online

Posting Shark

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

Jun 20th, 2009

You could try this code:

 Help with Code Tags 
 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 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 {
   border : none;
   border-collapse : collapse;
   color : #708090;
   width : 80%; }
th {
   padding : .300em;
   border-bottom : 1px solid #aaa;
   border-top : 1px solid #aaa; } 
td {
   border-bottom : 1px solid #aaa;
   background-color : #f5f5f5;
   padding : .200em;
   letter-spacing : 3px;
   text-align : center;
   vertical-align : middle; }
/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[
var showPrice = function() {
   var numspan = (( "getElementsByTagName" in document ) ? document.getElementsByTagName("span") : document.all.tags("span") );
 
   var ids = this.id.match(/\d+/)[ 0 ];
   var span = (( "getElementById" in document ) ? document.getElementById("tot" + ids ) : document.all[ "tot" + ids ] );
   var overallAmount = (( "getElementById" in document ) ? document.getElementById("overall") : document.all.overall );
   span.innerHTML = "";
   var amt = this.value * 1;
   var qty = (( "getElementById" in document ) ? document.getElementById("item" + ids ) : document.all[ "item" + ids ] ).value *1;
   var total = ""; 
   total = (( !qty ) ? 0 : (( qty ) * amt ));
 
   if ( this.checked && qty ) {
   span.innerHTML = "<span style=\"color : #E00;\">" + total + "</span>";
   overallAmount.innerHTML = (( numspan["tot0"].innerText * 1 ) + numspan["tot1"].innerText * 1 );
   return true; } 
   alert( "Please specify the quantity of selected ( item #" + (( ids * 1 ) + 1 ) + " )." );
   this.checked = false;
   return false;
};
 
var products = function() {
   var form;
   try { 
   form = document.forms.testform;
   } catch( e ) {
   form = (( "getElementById" in document ) ? document.getElementById("testform") : document.all.testform );
   }
   var oLen = form.elements.length;
   for ( var x = 0; x < oLen; x++ ) {
      if ( "addEventListener" in window ) {
         if ( form.elements[ x ].type === "checkbox" ) {
         form.elements[ x ].addEventListener( "click", showPrice, false );
         continue
         }
      } else if ( "attachEvent" in window ) {
         if ( form.elements[ x ].type === "checkbox" ) {
         form.elements[ x ].attachEvent( "onclick", showPrice );
         continue
         } 
      } if ( form.elements[ x ].type === "checkbox" ) {
      form.elements[ x ].onclick = showPrice;
      continue;
      } 
   } 
};
 
window.onload = products;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="#" onsubmit="return false;">
<table id="testtable" frame="void" rules="none" summary="Javascript :: Live Demo!">
<tr>
<th>Add</th><th>Item</th><th>Qty.</th><th>Amount</th></tr>
<tr>
<td><input type="checkbox" id="chb0" name="chb0" value="1.25" /></td>
<td>Sample Item #1</td>
<td><input type="text" id="item0" name="item0" value="" size="6" maxlength="5" /></td>
<td><span id="tot0"></span></td>
</tr>
<tr>
<td><input type="checkbox" id="chb1" name="chb1" value="3.25" /></td>
<td>Sample Item #2</td>
<td><input type="text" id="item1" name="item1" value="" size="6" maxlength="5" /></td>
<td><span id="tot1"></span></td>
</tr>
<tr>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"><span id="overall" style="color : #E00; font-weight : bold; border : none;"></span></td>
</tr>
</table>
</form>
</div>
</body>
</html>
<?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 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 {
   border : none;
   border-collapse : collapse;
   color : #708090;
   width : 80%; }
th {
   padding : .300em;
   border-bottom : 1px solid #aaa;
   border-top : 1px solid #aaa; } 
td {
   border-bottom : 1px solid #aaa;
   background-color : #f5f5f5;
   padding : .200em;
   letter-spacing : 3px;
   text-align : center;
   vertical-align : middle; }
/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[
var showPrice = function() {
   var numspan = (( "getElementsByTagName" in document ) ? document.getElementsByTagName("span") : document.all.tags("span") );

   var ids = this.id.match(/\d+/)[ 0 ];
   var span = (( "getElementById" in document ) ? document.getElementById("tot" + ids ) : document.all[ "tot" + ids ] );
   var overallAmount = (( "getElementById" in document ) ? document.getElementById("overall") : document.all.overall );
   span.innerHTML = "";
   var amt = this.value * 1;
   var qty = (( "getElementById" in document ) ? document.getElementById("item" + ids ) : document.all[ "item" + ids ] ).value *1;
   var total = ""; 
   total = (( !qty ) ? 0 : (( qty ) * amt ));

   if ( this.checked && qty ) {
   span.innerHTML = "<span style=\"color : #E00;\">" + total + "</span>";
   overallAmount.innerHTML = (( numspan["tot0"].innerText * 1 ) + numspan["tot1"].innerText * 1 );
   return true; } 
   alert( "Please specify the quantity of selected ( item #" + (( ids * 1 ) + 1 ) + " )." );
   this.checked = false;
   return false;
};

var products = function() {
   var form;
   try { 
   form = document.forms.testform;
   } catch( e ) {
   form = (( "getElementById" in document ) ? document.getElementById("testform") : document.all.testform );
   }
   var oLen = form.elements.length;
   for ( var x = 0; x < oLen; x++ ) {
      if ( "addEventListener" in window ) {
         if ( form.elements[ x ].type === "checkbox" ) {
         form.elements[ x ].addEventListener( "click", showPrice, false );
         continue
         }
      } else if ( "attachEvent" in window ) {
         if ( form.elements[ x ].type === "checkbox" ) {
         form.elements[ x ].attachEvent( "onclick", showPrice );
         continue
         } 
      } if ( form.elements[ x ].type === "checkbox" ) {
      form.elements[ x ].onclick = showPrice;
      continue;
      } 
   } 
};

window.onload = products;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="#" onsubmit="return false;">
<table id="testtable" frame="void" rules="none" summary="Javascript :: Live Demo!">
<tr>
<th>Add</th><th>Item</th><th>Qty.</th><th>Amount</th></tr>
<tr>
<td><input type="checkbox" id="chb0" name="chb0" value="1.25" /></td>
<td>Sample Item #1</td>
<td><input type="text" id="item0" name="item0" value="" size="6" maxlength="5" /></td>
<td><span id="tot0"></span></td>
</tr>
<tr>
<td><input type="checkbox" id="chb1" name="chb1" value="3.25" /></td>
<td>Sample Item #2</td>
<td><input type="text" id="item1" name="item1" value="" size="6" maxlength="5" /></td>
<td><span id="tot1"></span></td>
</tr>
<tr>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"><span id="overall" style="color : #E00; font-weight : bold; border : none;"></span></td>
</tr>
</table>
</form>
</div>
</body>
</html>

hope it helps...

•

Join Date: May 2008

Posts: 15

Reputation: jrconstance is an unknown quantity at this point

Solved Threads: 0

jrconstance jrconstance is offline

Offline

Newbie Poster

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

Jun 20th, 2009

Thanks. This works well for the checkbox that I have that has a quantity.

A couple more questions, though:

1. How to do this if the quantity is always going to be 1. Wouldn't need to have a field to add quantity.

2. How to do this for an array of radio buttons where the $$ value would be different for each radio button.

Thx

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Online

Posting Shark

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

Jun 20th, 2009

It depends' in the concept of your needs.

Try to post a short form sample code, including some of the elements you need that will take part in the entire form processing including detailed instructions.

Then i'll handle all the coding into it.

•

Join Date: May 2008

Posts: 15

Reputation: jrconstance is an unknown quantity at this point

Solved Threads: 0

jrconstance jrconstance is offline

Offline

Newbie Poster

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

Jun 20th, 2009

Thanks.

OK, first off, this is a php page with a form that gathers information that is written to a MySQL database. All buiilt using Adobe Dreamweaver Developer's Toolbox. That php/MySQL functionality all works and everything writes to the db as required.

Here is a sample of the code:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
    <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>">
      <table width="720" cellpadding="2" cellspacing="0" class="KT_tngtable">
       <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="180" class="KT_th"><label for="reg3day_1"></label></td>
          <td><div>
              <input <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['reg3day']),"ASCLS Member"))) {echo "CHECKED";} ?> 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 <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['reg3day']),"ASCLS Collaborative"))) {echo "CHECKED";} ?> type="radio" name="reg3day" id="reg3day_2" value="ASCLS Collaborative" />
                <label for="reg3day_2">ASCLS Collaborative Member ($315.00)</label>
              </div>
            <div>
                <input <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['reg3day']),"ASCLS Student/Emeritus"))) {echo "CHECKED";} ?> type="radio" name="reg3day" id="reg3day_3" value="ASCLS Student/Emeritus" />
                <label for="reg3day_3">ASCLS Student/Emeritus Member ($140.00)</label>
            </div>
            <?php echo $tNGs->displayFieldError("registrant", "reg3day"); ?> 
        <td>
        </tr>
         <tr>
          <td width="180" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td>
          <td><input  <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['regExhibits']),"Y"))) {echo "checked";} ?> type="checkbox" name="regExhibits" id="regExhibits" value="Y" />
            Entrance Fee - One Time Pass, includes food ($25.00)              <?php echo $tNGs->displayFieldError("registrant", "regExhibits"); ?> </td>
          <td>&nbsp;</td>
          </tr>
          </table>
      <input type="hidden" name="regLate" id="regLate" value="<?php echo KT_escapeAttribute($row_rsregistrant['regLate']); ?>" />
    </form>
    <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>">
      <table width="720" cellpadding="2" cellspacing="0" class="KT_tngtable">
       <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="180" class="KT_th"><label for="reg3day_1"></label></td>
          <td><div>
              <input <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['reg3day']),"ASCLS Member"))) {echo "CHECKED";} ?> 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 <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['reg3day']),"ASCLS Collaborative"))) {echo "CHECKED";} ?> type="radio" name="reg3day" id="reg3day_2" value="ASCLS Collaborative" />
                <label for="reg3day_2">ASCLS Collaborative Member ($315.00)</label>
              </div>
            <div>
                <input <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['reg3day']),"ASCLS Student/Emeritus"))) {echo "CHECKED";} ?> type="radio" name="reg3day" id="reg3day_3" value="ASCLS Student/Emeritus" />
                <label for="reg3day_3">ASCLS Student/Emeritus Member ($140.00)</label>
            </div>
            <?php echo $tNGs->displayFieldError("registrant", "reg3day"); ?> 
        <td>
        </tr>
         <tr>
          <td width="180" class="KT_th"><label for="regExhibits">Exhibits Only:</label></td>
          <td><input  <?php if (!(strcmp(KT_escapeAttribute($row_rsregistrant['regExhibits']),"Y"))) {echo "checked";} ?> type="checkbox" name="regExhibits" id="regExhibits" value="Y" />
            Entrance Fee - One Time Pass, includes food ($25.00)              <?php echo $tNGs->displayFieldError("registrant", "regExhibits"); ?> </td>
          <td>&nbsp;</td>
          </tr>
          </table>
      <input type="hidden" name="regLate" id="regLate" value="<?php echo KT_escapeAttribute($row_rsregistrant['regLate']); ?>" />
    </form>

This includes one array of radio buttons (althought there are several sections of these on the complete form), and also one example of a checkbox that has a $$ value but not a quantity.

Thanks

•

Join Date: May 2008

Posts: 15

Reputation: jrconstance is an unknown quantity at this point

Solved Threads: 0

jrconstance jrconstance is offline

Offline

Newbie Poster

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

Jun 20th, 2009

In looking at what I submitted I realized I had left off the submit function for the form. Here is the correct code for the last few lines of the form.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
        <tr class="KT_buttons">
          <td 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="<?php echo KT_escapeAttribute($row_rsregistrant['regLate']); ?>" />
    </form>
        <tr class="KT_buttons">
          <td 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="<?php echo KT_escapeAttribute($row_rsregistrant['regLate']); ?>" />
    </form>

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Online

Posting Shark

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

Jun 20th, 2009

Ok i'll post back your solution later, it's a bit getting late here...

essential

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: May 2008

Posts: 15

Reputation: jrconstance is an unknown quantity at this point

Solved Threads: 0

jrconstance jrconstance is offline

Offline

Newbie Poster

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

Jun 20th, 2009

Thanks so much.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Online

Posting Shark

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

Jun 20th, 2009

Hi there,

You can thanked me when we finished this.

If you need some quick brief regarding about getting all the values specified in your radio buttons, then you might want to check back on the showPrice() function provided in my recent sample code.
It deals on the same process and the only difference is the type's of element that we are getting.

You can easily referenced form elements using this method:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var form = document.forms[ /* index or id will work here */ ];
 
   for ( var x = 0; x < form.elements.length; x++ ) { // Looping throughout the entire form elements.
      if ( form.elements[ x ].type === 'radio' ) { // Let's check/get if this type of element belongs to the radio class.
      form.elements[ x ].onclick = function() { // Break the loop and get those radio types'
      alert( "The value of this radio button is, " + this.value ); // Alerting its value.
 
      // you may apply more things from here.
      }; // Closing function.
      continue; // continues the loop.
      } // You can get other form elements from here. But not getting the radio types.
   // Coz it was filtered inside the 1st if() block statement.
      alert( form.elements[ x ].type );
   } // End Loop
var form = document.forms[ /* index or id will work here */ ];

   for ( var x = 0; x < form.elements.length; x++ ) { // Looping throughout the entire form elements.
      if ( form.elements[ x ].type === 'radio' ) { // Let's check/get if this type of element belongs to the radio class.
      form.elements[ x ].onclick = function() { // Break the loop and get those radio types'
      alert( "The value of this radio button is, " + this.value ); // Alerting its value.

      // you may apply more things from here.
      }; // Closing function.
      continue; // continues the loop.
      } // You can get other form elements from here. But not getting the radio types.
   // Coz it was filtered inside the 1st if() block statement.
      alert( form.elements[ x ].type );
   } // End Loop

hope it does explain things clearly, knowing that i am not good on explaining things...

Last edited by essential; Jun 20th, 2009 at 4:07 pm.

•

Join Date: May 2008

Posts: 15

Reputation: jrconstance is an unknown quantity at this point

Solved Threads: 0

jrconstance jrconstance is offline

Offline

Newbie Poster

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

#10

Jun 22nd, 2009

I can certainly follow the code, and see what you're doing, but I doubt that I would be able to take this and make it work on my own. I just don't have the experience with javascript to be able to do that.

J.R.