hi how do i make a text field value change when a radio button is clicked

**LarryLive** · 04-09-2012, 10:37 AM

Like a situation where a user wants to register for a gym, and the gym has a membership type, which includes gym, zumba lesson, and taekwando..each membership type has a value(i.e amount)..and when selected, a value should appear on the text filled called Program fee.There is also an option that says membership term..with options 1 month, 3 months, 6 months, and 12 months..all of this should be calculated if a user ticks a particular filled.. Lets say each membership cost $20 per month, and a user selects 2 membership options and selects 3 months, can you help me create a code to generate an output in the text filled (Program fee)..i.e

gym = $20 per month
taekwando = $20 per month

user selects both options

and selects 3 months membership term

Program fee should produce:

20 + 20 = 40 * 3 months = $120

Please i need immediate help...Thanks in advance

**WolfShade** · 04-09-2012, 11:05 AM

Just threw this together. Tested and works (at least in FF).

Code:

<script type="text/javascript">
function calculateFee() {
	var df = document.forms["membership"], total = 0;
	var gym = df.gym, zumba = df.zumba, tk = df.taekwando, months = df.months, pf = df.programFee;
	if(gym.checked) {total = total + parseInt(gym.value);}
	if(zumba.checked) {total = total + parseInt(zumba.value);}
	if(tk.checked) {total = total + parseInt(tk.value);}
	total = total * parseInt(months.value);
	pf.value = total;
	}
</script>

HTML Code:

<form name="membership" id="membership">
<input type="checkbox" name="gym" id="gym" value=20 onChange="calculateFee();" /> Gym
<br /><input type="checkbox" name="zumba" id="zumba" value=20 onChange="calculateFee();" /> Zumba
<br /><input type="checkbox" name="taekwando" id="taekwando" value=20 onChange="calculateFee();" /> TaeKwando
<br /><select name="months" id="months" onChange="calculateFee();">
		<option value=0>Months</option>
	  	<option value=1>1</option>
	  	<option value=2>2</option>
	  	<option value=3>3</option>
	  	<option value=4>4</option>
	  	<option value=5>5</option>
	  	<option value=6>6</option>
	  	<option value=7>7</option>
	  	<option value=8>8</option>
	  	<option value=9>9</option>
	  	<option value=10>10</option>
	  	<option value=11>11</option>
	  	<option value=12>12</option>
      </select>
<br /><input type="text" name="programFee" id="programFee" readonly="readonly" value="Program Fee" size=20 />
</form>

**LarryLive** · 04-09-2012, 01:15 PM

i have done my code...can you review it, and correct me..cos this is the formate i want it to be in..Then when i select the membership term, it displays a different program fee

<?xml version= "1.0" encoding= "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">

var total = 0;

function ShowPFee(obj)
{

var price; var i;

if (obj.checked) //user must have selected the box

total = total + eval(obj.value);

else //user must have DEselected the box

total = total - eval(obj.value);

document.getElementById("gymForm").ProgramFee.value = total;

return;

}

</script>
</head>

<body>

<form name="gymForm" id="gymForm" action="www.jamesspenser.hotmail.com" method="post" onsubmit="return validateForm()">

<p><b>  Membership Type:</b><br /> <input type="checkbox" name="MembershipType1" value="20" onclick="ShowPFee(this)" class="check-1" /> Gym
  <input type="checkbox" name="MembershipType2" value="20" onclick="ShowPFee(this)" class="check-2" /> Group Fitness <br />
<input type="checkbox" name="MembershipType3" value="20" onclick="ShowPFee(this)" class="check-1" /> Boxing
<input type="checkbox" name="MembershipType4" value="20" onclick="ShowPFee(this)" class="check-2" /> Taekwondo <br /></p>

<p><b>  Membership Term: </b><br /> <input type="radio" name="MembershipTerm" class="check-1" onclick="ShowPFee1(this)" /> 1 Month<input type="radio"
name="MembershipTerm" class="check-2" onclick="ShowPFee1(this)" /> 6 Months <br /> <input type="radio" name="MembershipTerm" class="check-1"
onclick="ShowPFee1(this)"/> 3 Months   <input type="radio" name="MembershipTerm" onclick="ShowPFee1(this)" /> 12 Months </p>

<p> Program Fee $ <input type="text" name="ProgramFee" value="0" style="width:2cm; color:black; background-color:white" /> </p>

</form>
</body>
</html>

Thanks in advance

**LarryLive** · 04-09-2012, 01:46 PM

Thanks..what if i try my coding style can you make it work from my code?

<?xml version= "1.0" encoding= "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">

var total = 0;

function ShowPFee(obj)
{

var price; var i;

if (obj.checked) //user must have selected the box

total = total + eval(obj.value);

else //user must have DEselected the box

total = total - eval(obj.value);

document.getElementById("gymForm").ProgramFee.value = total;

return;

}

</script>
</head>

<body>

<form name="gymForm" id="gymForm">

<p><b>  Membership Type:</b><br /> <input type="checkbox" name="MembershipType1" value="20" onclick="ShowPFee(this)" class="check-1" /> Gym
  <input type="checkbox" name="MembershipType2" value="20" onclick="ShowPFee(this)" class="check-2" /> Group Fitness <br />
<input type="checkbox" name="MembershipType3" value="20" onclick="ShowPFee(this)" class="check-1" /> Boxing
<input type="checkbox" name="MembershipType4" value="20" onclick="ShowPFee(this)" class="check-2" /> Taekwondo <br /></p>

<p><b>  Membership Term: </b><br /> <input type="radio" name="MembershipTerm" class="check-1" onclick="ShowPFee1(this)" /> 1 Month<input type="radio"
name="MembershipTerm" class="check-2" onclick="ShowPFee1(this)" /> 6 Months <br /> <input type="radio" name="MembershipTerm" class="check-1"
onclick="ShowPFee1(this)"/> 3 Months   <input type="radio" name="MembershipTerm" onclick="ShowPFee1(this)" /> 12 Months </p>

<p> Program Fee $ <input type="text" name="ProgramFee" value="0" style="width:2cm; color:black; background-color:white" /> </p>

</form>
</body>
</html>

Thread: hi how do i make a text field value change when a radio button is clicked

Thread Tools

Display

hi how do i make a text field value change when a radio button is clicked

thanks wolfshade

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions