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

Question

jrconstance 0 Newbie Poster

14 Years Ago

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

javascript

3 Contributors
29 Replies
266 Views
2 Weeks Discussion Span
Latest Post 14 Years Ago Latest Post by essential

All 29 Replies

essential 84 Posting Shark

14 Years Ago

You could try this code:

<?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...

essential 84 Posting Shark

14 Years Ago

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.

essential 84 Posting Shark

14 Years Ago

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

essential

essential 84 Posting Shark

14 Years Ago

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:

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... :)

essential 84 Posting Shark

14 Years Ago

Ok here is it...
Note that i've excluded all the PHP block on this demo, so you'll need to put them back again in place.

<?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 {
  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 showValue = function() {
   var cel = (( this.type === "radio" ) ? this.parentNode.parentNode.nextSibling : this.parentNode.nextSibling );
   var eVal = (( isNaN( this.value )) ? this.value : this.value * 1 );
   if ( this.checked ) {
   cel.style.color = "#f80";
   cel.innerText = eVal;
   return;
   } cel.innerText = "";
};

var getValue = function() {
   var form;
   try {
   form = document.forms["form1"];
   } catch( e ) {
   form = (( "getElementsByName" in document ) ? document.getElementsByName( "form1" )[ 0 ] : (( "getElementById" in document ) ? document.getElementById("form1") : document.all[ "form1" ] ));
   } var elem = form.elements; 
   for ( var x = 0; x < elem.length; x++ ) {
      if ( elem[ x ].type === "radio" || elem[ x ].type === "checkbox" ) {
         try {
            if ( "addEventListener" in window ) {
            elem[ x ].addEventListener( "click", showValue, false );
            } else if ( "attachEvent" in window ) {
            elem[ x ].attachEvent( "onclick", showValue );
            }             
         } catch( er ) {
         elem[ x ].onclick = showValue;
         } continue;
      }
   }      
};

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"></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"></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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jrconstance 0 Newbie Poster · Answer 1 · 2009-06-20T21:27:55+00:00

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

jrconstance 0 Newbie Poster · Answer 2 · 2009-06-20T22:01:14+00:00

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:

<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

jrconstance 0 Newbie Poster · Answer 3 · 2009-06-20T22:13:54+00:00

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.

<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>

jrconstance 0 Newbie Poster · Answer 4 · 2009-06-21T00:22:50+00:00

jrconstance 0 Newbie Poster

14 Years Ago

Thanks so much.

jrconstance 0 Newbie Poster · Answer 5 · 2009-06-23T08:07:53+00:00

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.

jrconstance 0 Newbie Poster · Answer 6 · 2009-06-23T17:50:55+00:00

Thanks. I'll have to look at this later today.

J.R.

jrconstance 0 Newbie Poster · Answer 7 · 2009-06-24T23:52:42+00:00

I'm not seeing the right hand column where the $$values should be showing up. Am I missing something?

J.R.

jrconstance 0 Newbie Poster · Answer 8 · 2009-06-28T08:03:04+00:00

essential,

Not sure if you have moved on to something else or not. I am still trying to figure this out since the example you provided does not show the price in the right hand column. Any chance you can take a look at that and get back to me.

I appreciate your assistance with this. Thanks.

essential 84 Posting Shark Featured Poster · Answer 9 · 2009-06-28T16:54:29+00:00

Hi jrconstance,

sorry to keep u hanging on this thread. Im just busy with some new project here.

And regarding about displaying its price value, i really need some reference into it, so that i can display each of these values' on their specific field.

jrconstance 0 Newbie Poster · Answer 10 · 2009-06-28T18:02:17+00:00

Here is your original code with the added fields in the form for you to reference:

<?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 {
  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 showValue = function() {
   var cel = (( this.type === "radio" ) ? this.parentNode.parentNode.nextSibling : this.parentNode.nextSibling );
   var eVal = (( isNaN( this.value )) ? this.value : this.value * 1 );
   if ( this.checked ) {
   cel.style.color = "#f80";
   cel.innerText = eVal;
   return;
   } cel.innerText = "";
};

var getValue = function() {
   var form;
   try {
   form = document.forms["form1"];
   } catch( e ) {
   form = (( "getElementsByName" in document ) ? document.getElementsByName( "form1" )[ 0 ] : (( "getElementById" in document ) ? document.getElementById("form1") : document.all[ "form1" ] ));
   } var elem = form.elements; 
   for ( var x = 0; x < elem.length; x++ ) {
      if ( elem[ x ].type === "radio" || elem[ x ].type === "checkbox" ) {
         try {
            if ( "addEventListener" in window ) {
            elem[ x ].addEventListener( "click", showValue, false );
            } else if ( "attachEvent" in window ) {
            elem[ x ].attachEvent( "onclick", showValue );
            }             
         } catch( er ) {
         elem[ x ].onclick = showValue;
         } continue;
      }
   }      
};

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" />
            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 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>

essential 84 Posting Shark Featured Poster · Answer 11 · 2009-06-29T06:25:54+00:00

Try this again:

<?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 {
  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 form;
var showValue = function() { 
   var showPrice = form.reg3dayPrice;
   var exhibits = form.regExhibitsPrice;
   var eVal = this.parentNode.innerText.match( /\$.\d+\.\d+/i )[ 0 ];
   if ( this.checked ) {
      if ( this.type === "radio" ) { 
      showPrice.value = eVal;
      } else if ( this.type === "checkbox" ) {
      exhibits.value = eVal;
      } return;
   } showPrice.value = "";
exhibits.value = "";
}; var getValue = function() {  
   try {
   form = document.forms["form1"];
   } catch( e ) {
   form = (( "getElementsByName" in document ) ? document.getElementsByName( "form1" )[ 0 ] : (( "getElementById" in document ) ? document.getElementById("form1") : document.all[ "form1" ] ));
   } var elem = form.elements;
   for ( var x = 0; x < elem.length; x++ ) {
      if ( elem[ x ].type === "radio" || elem[ x ].type === "checkbox" ) {
         try {
            if ( "addEventListener" in window ) {
            elem[ x ].addEventListener( "click", showValue, false );
            } else if ( "attachEvent" in window ) {
            elem[ x ].attachEvent( "onclick", showValue );
            }             
         } catch( er ) {
         elem[ x ].onclick = showValue;            
         } continue;
      }
   } 
};
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" />
            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 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>

jrconstance 0 Newbie Poster · Answer 12 · 2009-06-30T19:16:55+00:00

Still not working, but I think I now understand how this is supposed to work. When you said:

"And regarding about displaying its price value, i really need some reference into it, so that i can display each of these values' on their specific field."

were you saying that you need both a hidden reference somewhere in the form with the actual price of the item, along with the field in which this price would be displayed? If that's the case, I am wondering how best to set up the reference fields, especially for the radio buttons. I can certainly create a hidden field for that but not sure how to do that with an array of buttons. Can we create an array with the costs somewhere in the javascript?

essential 84 Posting Shark Featured Poster · Answer 13 · 2009-07-01T17:05:26+00:00

Yes, that would be possible. I'll try to provide you with another example later....

essential 84 Posting Shark Featured Poster · Answer 14 · 2009-07-02T23:16:56+00:00

This comes with predefined price values:

<?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;

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 );
   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 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 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>

jrconstance 0 Newbie Poster · Answer 15 · 2009-07-03T06:42:45+00:00

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.

essential 84 Posting Shark Featured Poster · Answer 16 · 2009-07-03T09:09:10+00:00

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

essential

essential 84 Posting Shark Featured Poster · Answer 17 · 2009-07-03T15:35:46+00:00

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

<?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>

jrconstance 0 Newbie Poster · Answer 18 · 2009-07-03T19:52:36+00:00

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.

aashishn86 0 Junior Poster · Answer 19 · 2009-07-03T20:02:21+00:00

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

thanks...

jrconstance 0 Newbie Poster · Answer 20 · 2009-07-07T20:09:02+00:00

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.

jrconstance 0 Newbie Poster · Answer 21 · 2009-07-09T18:48:15+00:00

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

essential 84 Posting Shark Featured Poster · Answer 22 · 2009-07-09T21:54:40+00:00

Im on it and I am almost done with the code. I'll just post back your solution, when i completed the whole run...

essential 84 Posting Shark Featured Poster · Answer 23 · 2009-07-10T16:57:59+00:00

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

/*******************************
 - 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;

essential 84 Posting Shark Featured Poster · Answer 24 · 2009-07-10T17:04:35+00:00

And here's the document sample:

<?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.

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

Recommended Answers Collapse Answers

All 29 Replies

Recommended Answers