www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Apr 2012
    Posts
    4

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

    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

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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>
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Apr 2012
    Posts
    4

    thanks wolfshade

    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>&nbsp; Membership Type:</b><br /> <input type="checkbox" name="MembershipType1" value="20" onclick="ShowPFee(this)" class="check-1" /> Gym
    &nbsp; <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>&nbsp; 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 &nbsp; <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

  4. #4
    Join Date
    Apr 2012
    Posts
    4
    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>&nbsp; Membership Type:</b><br /> <input type="checkbox" name="MembershipType1" value="20" onclick="ShowPFee(this)" class="check-1" /> Gym
    &nbsp; <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>&nbsp; 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 &nbsp; <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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles