Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Radio Buttons and Javascript 1

Status
Not open for further replies.
Apr 12, 2010
1
US
Hi,
I am working on an online group order form where the user/customer selects the date for the performance they would like to attend (which is a radio button on a calender) that changes the price bracket of the tickets for the event. I have tables with the two different price brackets for the 4 different seating zones, but I do not know how to have the form calculate the price of the tickets depending on which time the customer chooses. If anyone could help me out with somehow allowing the form to change the price applied to tickets when a user selects a different radio button and the value associated with it, it would be greatly appreciated.

I originally thought using radio buttons would make this easier to dynamically switch between the two price brackets, but if there is a simpler way to do this, please let me know!
 
Make the Radio Button's value the bracket to which it refers.
Then on its click you can make a hidden field have that value so you can use it to calculate.

For instance:

Code:
<script>
function set_pricetag(Rad_Obj){
var myhidden=document.getElementById('hiddenfield');
myhidden.value=Rad_obj.Value;

}
</script>

<input type=radio value="100" OnClick="set_pricetag(this);">
<input type=radio value="200" OnClick="set_pricetag(this);">
<input type=radio value="300" OnClick="set_pricetag(this);">

Then your calculation script can use the value.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Thanks a bunch Vacunita, just one more question on the same topic. Is it possible to have each radio button assign several values? For example, something along the lines of

<input type=radio value="145.5" OnClick="set_pricetag1(this); set_pricetag2(this) - 20; set_pricetag3(this) - 40;">

or

function set_pricetag(Rad_Obj)
{
var myhidden1=document.getElementById('hiddenfield');
myhidden1.value= Rad_obj.value;
if (myhidden1.value == 0)
{
myhidden2.value = o;
myhidden3.value = 0;
}
else
{
myhidden2.value= myhidden1.value - 20;
myhidden3.value= myhidden1.value - 40;
}

}

I realize that neither of these work, but they embody what I am trying to do, with the radio buttons setting a "price bracket" to change several prices at once for each event
 
Sure, you can just pass the values you want to send to each hidden input or whatever you are putting them in:

For instance:

Code:
<script>
function set_pricetag(rad_obj){
var price1=document.getElementById('value1');
var price2=document.getElementById('value2');
var price3=document.getElementById('value3');

var values=rad_obj.value.split(',');

price1.value=values[0];
price2.value=values[1];
price3.value=values[2];


}


</script>


<input type=radio value="100,200,300" name="values" onClick="set_pricetag(this);">
<input type=radio value="25,50,75" name="values" onClick="set_pricetag(this);">


<input type=text id="value1">
<input type=text id="value2">
<input type=text id="value3">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Wow that works perfect. For calling the resulting values to be multiplied against user inputed text box values (to determine the quantity of each price the customer wants), I used a button to calculate it, where amount# is the quantity wanted, however nothing shows up in the 'total' box.

<form action="#" name=calc>
<td valign="top" align="center" width="95"><input type=text name="amount1"></td>
<td valign="top" align="center" width="95"><input type=text name="amount2"></td>
<td valign="top" align="center" width="95"><input type=text name="amount3"></td>
<td valign="top" align="center" width="95"><input type=text name="amount4"></td>

<td><td valign="top" align="center" width="95"><input type="button" value="Calculate Total" onclick="document.calc.total.value= (document.calc.amount1.value*145.50) + (document.calc.amount2.value*value1) + (document.calc.amount3.value*value2)+ (document.calc.amount4.value*value3)">
<td valign="top" align="center" width="95"><text area name=total></text area></td>
 
Code:
<text[red]_[/red]area name=total></text[red]_[/red]area>

Your text area is wrong, it is: <textarea name="total"> (notice there's no space between 'text' and 'area')
Or there's an <input type=text>

Choose one and it will work.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top