Jump to content

Passing radio buttons values to text boxes

cutz

By cutz
in JavaScript

Recommended Posts

cutz Newbie

cutz

Posted
Posted

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
jeffman w3schools Guru

jeffman

Posted
Posted

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

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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.

Link to comment
Share on other sites
cutz Newbie

cutz

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...