Jump to content

Passing radio buttons values to text boxes


cutz
 Share

Recommended Posts

Hello all:I need help with a form that has several questions. Each question has seven options. Each option is a radio button. The values of radio buttons go from 1 to 7. I have a text box that suppose to accumulate the value of radio buttons. Then, the checked buttons, their individual score and total score are passed to a php file.How do I pass the value of a checked button to a text box?HERE IS MY HTML (sample)

<html><head> <script language="javascript" type="text/jscript" src="sample_Buttons.js"> </script></head><body > <form name="myProgress" action="PEP_buttons.php" method="post" onClick="totalProgress()"/><table width="600"><tr><!--question 1--><td colspan="7">1. I am able to state my values or what's important to me.</td></tr><tr align="center">          <td> 1 <input checked="checked" type="radio" name="quest_1" value="1" onClick="totalProgress()"  /></td>                    <td> 2 <input type="radio" name="quest_1" value="2" onClick="totalProgress()" /> </td>                    <td> 3 <input type="radio" name="quest_1" value="3"  onClick="totalProgress()"/> </td>                   <td> 4 <input type="radio" name="quest_1" value="4"  onClick="totalProgress()" /> </td>                    <td> 5 <input type="radio" name="quest_1" value="5"  onClick="totalProgress()" /></td>          <td> 6 <input type="radio"  name="quest_1" value="6" onClick="totalProgress()"  /></td>          <td> 7 <input type="radio" name="quest_1" value="7"  onClick="totalProgress()" /> </td>        </tr><tr align="center">          <td>Not at all</td>          <td>Not well</td>          <td>Somewhat</td>          <td>Well</td>          <td>Very well</td>          <td>Very good</td>          <td>Excellent</td></tr><input type="submit" submit="submit" value="Submit Evaluation" /> </td><input type="text" name="totalPoints" size="2" /></tr></table>      

HERE IS MY JAVASCRIPT that doesn't work yet.

function totalProgress()     {     for (var i=0; i < form.myProgress.quest_1.length; i++)        {        if (form.myProgress.quest_1[i].checked){	   var question1=form.myProgress.quest_1[i].value;	   }	     return true;       } 				var question1= (form.myProgress.quest_1[i].value);      	  form.myProgress.totalPoints.value=question1;	        }      //}

HERE IS MY PHP

<?php$buttonSelected1 = $_POST["quest_1"];echo "The score of question 1 is :"  .$buttonSelected1. "<br />";$totalScore=$_POST["totalPoints"];echo "Your Evaluation Score is: " .$totalScore. "<br />";?>

Link to comment
Share on other sites

There are A LOT of problems here. I could list them all or rewrite your script, but you wouldn't learn anything.Let's start with the way a learner like you needs to build programs. Check your work every step of the way. I mean, when you write a line of javascript, and you're not 100% sure if you know what you're doing, don't go on to the next line. Test what you have so far. The simplest debugging device is the alert message. So we'll add a temporary alert. As your function progresses, you'll move the alert and check different things. But to start off, this means beginning with a function that looks like this:

function totalProgress(){   var myForm = form;   alert(myForm); // this is your test.}

Yeah, that's it. I chose form because it is the first object your function tries to reference. You do use dot notation to try to reference properties of form (the complete reference is form.myProgress.quest_1.length), but that's already getting too far ahead. If the reference to form is bad, nothing else will work. Your function will simply terminate.If all is well, the alert message should look something like [object HTMLFormElement] . If not, try to figure out what went wrong. You might start by asking yourself, "What made me think that was right? Was I looking in my textbook somewhere? Did I borrow the code from a sample? Is there a reference that I can look at?"

Edited by Deirdre's Dad
Link to comment
Share on other sites

don't use onclick for form element, as it can be bypassed by the user filling all the required inputs and hitting the enter key, use onsubmit instead.Also the form tag uses a closing form tag<form>..... </form> which must surround all input elements.

Edited by dsonesuk
Link to comment
Share on other sites

Deird's Dad:Your comments were well taken. I'm having hard time validating more than one group of radio buttons. Can you please check my function and tell me what is wrong? Later, I'll be passing the value of each radio button to a textbox, kind of a total score (once I'm able to validate buttons).HERE IS MY FORM

<form nanme="myProgress" action="#" method="post" /><table width="600"><tr><!--question 1--><td colspan="7">1. I am able to state my values or what's important to me.</td></tr><tr align="center">          <td> 1 <input type="radio" name="quest_1" id="q1_1"value="1" onchange="totalProgress(this)"  /></td>                    <td> 2 <input type="radio" name="quest_1" value="2" id="q1_2" onchange="totalProgress(this)" /> </td>                    <td> 3 <input type="radio" name="quest_1" value="3"  id="q1_3" onchange="totalProgress(this)"/> </td>                   <td> 4 <input type="radio" name="quest_1" value="4"  id="q1_4" onchange="totalProgress(this)" /> </td>                    <td> 5 <input type="radio" name="quest_1" value="5"  id="q1_5" onchange="totalProgress(this)" /></td>          <td> 6 <input type="radio"  name="quest_1" value="6" id="q1_6" onchange="totalProgress(this)"  /></td>          <td> 7 <input type="radio" name="quest_1" value="7"  id="q1_7" onchange="totalProgress(this);" /> </td>        </tr><tr align="center">          <td>Not at all</td>          <td>Not well</td>          <td>Somewhat</td>          <td>Well</td>          <td>Very well</td>          <td>Very good</td>          <td>Excellent</td></tr><tr><!--question 2--><td colspan="7">2.	I use " I " statements to let others know how I am thinking and feeling.</td></tr><tr align="center">          <td> 1 <input type="radio" name="quest_2" value="1" id="q2_1" onchange="totalProgress(this);" /></td>                    <td> 2 <input type="radio" name="quest_2" value="2"  id="q2_2" onchange="totalProgress(this);"/> </td>                    <td> 3 <input type="radio" name="quest_2" value="3" id="q2_3" onchange="totalProgress(this);"/> </td>                   <td> 4 <input type="radio" name="quest_2" value="4" id="q2_4" onchange="totalProgress(this);" /> </td>                    <td> 5 <input type="radio" name="quest_2" value="5" id="q2_5" onchange="totalProgress(this);" /></td>          <td> 6 <input type="radio"  name="quest_2" value="6" id="q2_6" onchange="totalProgress(this);" /></td>          <td> 7 <input type="radio" name="quest_2" value="7" id="q2_7" onchange="totalProgress(this);" /> </td>        </tr>        <tr align="center">          <td>Not at all</td>          <td>Not well</td>          <td>Somewhat</td>          <td>Well</td>          <td>Very well</td>          <td>Very good</td>          <td>Excellent</td></tr><td colspan="7">2.	I use " I " statements to let others know how I am thinking and feeling.</td></tr><tr align="center">          <td> 1 <input type="radio" name="quest_3" value="1" id="q3_1" onchange="totalProgress(this);" /></td>                    <td> 2 <input type="radio" name="quest_3" value="2"  id="q3_2" onchange="totalProgress(this);"/> </td>                    <td> 3 <input type="radio" name="quest_3" value="3" id="q3_3" onchange="totalProgress(this);"/> </td>                   <td> 4 <input type="radio" name="quest_3" value="4" id="q3_4" onchange="totalProgress(this);" /> </td>                    <td> 5 <input type="radio" name="quest_3" value="5" id="q3_5" onchange="totalProgress(this);" /></td>          <td> 6 <input type="radio"  name="quest_3" value="6" id="q3_6" onchange="totalProgress(this);" /></td>          <td> 7 <input type="radio" name="quest_3" value="7" id="q3_7" onchange="totalProgress(this);" /> </td>        </tr>        <tr align="center">          <td>Not at all</td>          <td>Not well</td>          <td>Somewhat</td>          <td>Well</td>          <td>Very well</td>          <td>Very good</td>          <td>Excellent</td></tr><input type="submit"  value="Submit Evaluation" onsubmit= "totalProgress(this);"/> </td><input type="text" name="totalPoints" id="Bpoints" size="20" onchange="totalProgress(this);"/></tr></table>      </form>

HERE IS MY JAVASCRIPT

var radiogroups=['quest_1','quest_2', 'quest_3'];function totalProgress(){var btnChecked=[];for (var i=0; i<document.myProgress.length; i++){var radobjs=document.myProgress.elements[radiogroups[i]];var val=false;for (var i_1=0; i_1<radobjs.length; i_1++){if (radobjs[i_1].checked){val=true;}}if (!val){btnChecked.push('Please answer question '+(radobjs[0].title||radobjs[0].name));}}if (btnChecked.length>0){alert(btnChecked.join('\n'));return false;}return true;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...