/    Sign up×
Community /Pin to ProfileBookmark

Radio button validation

I’m having a problem with some code, here’s the code below:

<script language=”JavaScript”>

function ValidateForm(form){
ErrorText= “”;
if ( ( form.Consent[0].checked == false ) && ( form.Consent[1].checked == false ) ) { alert ( “Please choose your Yes or NO for our Electronic Signature” ); return false; }
if (ErrorText= “”) { form.submit() }
}

</script>

[code=html] <form action=”congratulations_aff.php” method=”post” name=”congratulations_aff”> <input type=”submit” value=”submit” value=”Submit” onClick=”ValidateForm(this.form)” /><input type=”reset” value=”Reset”>
[/code]

If someone hits submit without selecting yes or no the validation pops up asking them to make the selection. After they close out the pop up box the form action still passes them along to the congratulations_aff.php page.

How and why is that passing them on even if they didn’t make a selection with the radio buttons?

to post a comment
JavaScript

19 Comments(s)

Copy linkTweet thisAlerts:
@JunkMaleOct 28.2011 — Where is the radio set?

Besides, checking if something is checked has been covered here recently in another post.

http://www.webdeveloper.com/forum/showpost.php?p=1176758&postcount=4
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — here's the

<table>

<tr>

<td colspan="3" valign="top"><p>

<input type="radio" name="Consent" value="Y" />

Yes<br />

<br />

<input type="radio" name="Consent" value="N" />

No</p>

</td></tr></table>


FYI, I used the code in the link and i got it working.
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — So if I'm using a script like this:

[code=html]<script>

function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above

// return str;
}

function checkForm() {
var chosen = getRBtnName('test');
if (chosen < 0) {
alert( "Please choose one answer when you are asked to select a number." );
return false;
} else { return true; }
// Note: Could also choose to return selection, if needed
}

</script>[/code]




How can i add multiple radio button name validations? Thanks in advance.
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — like so:

[code=html]function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var b=0; b<sel.length; b++) {
if (sel[b].checked == true) { str = sel[b].value; fnd = b; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above

// return str;
}

function checkForm() {
var chosen = getRBtnName('USPersonYesNo');
if (chosen < 0) {
alert( "For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?" );
return false;
} else { return true; }
// Note: Could also choose to return selection, if needed
}
[/code]



Using the variable 'b' just cancels out 'i' and only one or the other works.
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — anybody?
Copy linkTweet thisAlerts:
@JunkMaleOct 28.2011 — The script [CODE]
var sel = document.getElementsByName(GrpName);[/CODE]

That bit grabs the radio button group name.
[CODE]
for (var b=0; b<sel.length; b++) {
if (sel[b].checked == true) { str = sel[b].value; fnd = b; }
}
[/CODE]

That bit loops through each radio button in that GrpName and tests to see which radio button is checked and returns the value of that button. You could just as easily test to see if a button was checked and return a boolean from the function.

So if all your needing is to check if a button is checked, you use something like this.


[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Radio Check</title>
<script>
<!--
function checkChecked( btnGrpName ) {
var radioSet = document.getElementsByName( btnGrpName ); // grab the radio group
for (var btn=0; btn<radioSet.length; btn++)
if ( radioSet[btn].checked == true)
return true; // We return true on the first instance of a radio button checked
return false; // return false as we didn't find one
}

function processForm(){
var ok = checkChecked( 'USPersonYesNo' ); // returns true or false
if (!ok){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
}
return ok; // we are returning either a true or false..
}
//-->
</script>
</head>

<body><form action="#" name="radiocheck" id="radiocheck" onsubmit="return processForm();">
<table>
<tr>
<td colspan="3" valign="top"><p>
<input type="radio" name="USPersonYesNo" value="Y" />
Yes<br />
<br />
<input type="radio" name="USPersonYesNo" value="N" />
No</p>
<input name="submit" value="Submit" type="submit" />
</td></tr></table></form>
</body>
</html>[/code]


You need to watch your naming convention. You had Consent where you were looking for USPersonYesNo as a property.

careful ordering limits the need for variable creation.
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — It's validating for 'USPersonYesNo' but that's it... I'm looking to get a validation for more than just one question.. ie.. 'Consent' as well.


&lt;script&gt;

function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i&lt;sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; <br/>
}

function checkForm() {
var chosen = getRBtnName('Consent');
if (chosen &lt; 0) {
alert( "Please choose one answer when you are asked to select a number." );
return false;
} else { return true; }
}

&lt;/script&gt;


&lt;form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()"&gt;

&lt;table border="0" cellspacing="1" cellpadding="0"&gt;

&lt;tr&gt;
&lt;td colspan="3"&gt;I consent to providing my electronic signature.&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="3" valign="top"&gt;
&lt;input type="radio" name="Consent" value="Y" /&gt;
Yes

<i> </i> &lt;input type="radio" name="Consent" value="N" /&gt;
<i> </i> No

<i> </i> &lt;table border="0" cellspacing="1" cellpadding="0"&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;I consent to electronic receipt of my information reporting documentation.&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td valign="top"&gt;
<i> </i> &lt;input type="radio" name="Consent1099YesNo" value="Y" /&gt;
<i> </i> Yes

<i> </i> &lt;input type="radio" name="Consent1099YesNo" value="N" /&gt;
<i> </i> No&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td valign="top"&gt;
<i> </i> For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
<i> </i> &lt;input type="radio" name="USPersonYesNo" value="Y" /&gt;
<i> </i> Yes

<i> </i> &lt;input type="radio" name="USPersonYesNo" value="N" /&gt;
<i> </i> No&lt;/tr&gt;
<i> </i> &lt;/table&gt;


&lt;input type="submit" value="submit" value="Submit" /&gt;
&lt;/form&gt;



Something that can validate more than one radio box questionaire.
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — With your script, shouldn't i be able to add all the field names somewhere in this function

<i>
</i>
function processForm(){
var ok = checkChecked( 'USPersonYesNo' ); // returns true or false
if (!ok){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
}
return ok; // we are returning either a true or false..
}





ie. [ 'Consent' , 'Consent1099YesNo' , 'USPersonYesNo' ] or something similar syntax?

[ 'Consent' ] , [ 'Consent1099YesNo' ] , [ 'USPersonYesNo' ]

than just have a common alert

?
Copy linkTweet thisAlerts:
@JunkMaleOct 28.2011 — You stack the calls to the function that checks the button group.

[CODE]var ok = checkChecked( 'USPersonYesNo'); // returns true or false
if (!ok){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
return ok;
}
var ok = checkChecked( 'otherUSPersonYesNo'); // returns true or false
if (!ok){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
return ok;
}[/CODE]
Copy linkTweet thisAlerts:
@JunkMaleOct 28.2011 — Or simpler
[CODE]
if (!checkChecked( 'USPersonYesNo')){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
return false;
}

if (!checkChecked( 'otherUSPersonYesNo')){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
return false;
}

return true; // get here and were doing OK
[/CODE]
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — It's not working properly, it's loading after the button is being submitted.

&lt;script&gt;

function checkChecked( btnGrpName ) {
var radioSet = document.getElementsByName( btnGrpName ); // grab the radio group
for (var btn=0; btn&lt;radioSet.length; btn++)
if ( radioSet[btn].checked == true)
return true; // We return true on the first instance of a radio button checked
return false; // return false as we didn't find one
}

function processForm(){
var ok = checkChecked( 'USPersonYesNo' ); // returns true or false
if (!ok){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
}
return ok; // we are returning either a true or false..
}

{
var ok = checkChecked( 'Consent' ); // returns true or false
if (!ok){
alert("For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
}
return ok; // we are returning either a true or false..
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@JunkMaleOct 28.2011 — OK, I modified the functions so that... [CODE]function checkChecked( btnGrpName , msg ) {
var radioSet = document.getElementsByName( btnGrpName ); // grab the radio group
for (var btn=0; btn<radioSet.length; btn++)
if ( radioSet[btn].checked == true)
return true; // We return true on the first instance of a radio button checked
alert( msg );
return false; // return false as we didn't find one
}

function processForm(){
var ok = checkChecked( "USPersonYesNo" ,"For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
if (!ok) return ok
var ok = checkChecked( "otherUSPersonYesNo" ,"For tax purposes are you a NON U.S. citizen, NON U.S. resident, NON U.S. partnership, or NON U.S. corporation?");
if (!ok) return ok

return ok; // we are returning either a true or false..
}[/CODE]
you pass a second parameter, the warning message you want displayed on failure. Stacking the elements that need checking for radio inputs, with modification you could expand the checking scope to include other grouped elements.
Copy linkTweet thisAlerts:
@JunkMaleOct 28.2011 — It's not working properly, it's loading after the button is being submitted.[/QUOTE]

How can that be? Its in the head of the document, tested on my system here 100&#37; fine.
Copy linkTweet thisAlerts:
@SupplementauthorOct 28.2011 — <i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"&gt;
&lt;head&gt;

&lt;link rel="stylesheet" type="text/css" href="ew/style.css" /&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
function checkChecked( btnGrpName , msg ) {
var radioSet = document.getElementsByName( btnGrpName ); // grab the radio group
for (var btn=0; btn&lt;radioSet.length; btn++)
if ( radioSet[btn].checked == true)
return true; // We return true on the first instance of a radio button checked
alert( msg );
return false; // return false as we didn't find one
}

function processForm(){
var ok = checkChecked( "USPersonYesNo" ,"For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?");
if (!ok) return ok
var ok = checkChecked( "otherUSPersonYesNo" ,"For tax purposes are you a NON U.S. citizen, NON U.S. resident, NON U.S. partnership, or NON U.S. corporation?");
if (!ok) return ok

<i> </i>return ok; // we are returning either a true or false..
}

&lt;/script&gt;


&lt;!--[if IE 7]&gt;
&lt;link rel="stylesheet" type="text/css" href="css/ie7.css"&gt;
&lt;![endif]--&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action="congratulations_aff.php" method="post" name="congratulations_aff"&gt;

&lt;table border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;p align="center"&gt;&lt;h1&gt;Consent for Electronic Signature&lt;/h1&gt;&lt;/p&gt;&lt;/td&gt;

<i> </i>&lt;td colspan="3" valign="top"&gt;&lt;p&gt;
<i> </i> &lt;input type="radio" name="Consent" value="Y" /&gt;
<i> </i> Yes&lt;br /&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;input type="radio" name="Consent" value="N" /&gt;
<i> </i> No&lt;/p&gt;

<i> </i> &lt;td&gt;&lt;p align="center"&gt;&lt;h1&gt;Consent for Electronic 1099 Form&lt;/h1&gt;&lt;/p&gt;&lt;/td&gt;

<i> </i> &lt;td valign="top"&gt;&lt;p&gt;
<i> </i> &lt;input type="radio" name="Consent1099YesNo" value="Y" /&gt;
<i> </i> Yes&lt;br /&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;input type="radio" name="Consent1099YesNo" value="N" /&gt;
<i> </i> No&lt;/p&gt;&lt;/td&gt;
<i> </i> For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
<i> </i> &lt;input type="radio" name="USPersonYesNo" value="Y" /&gt;
<i> </i> Yes&lt;br /&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;input type="radio" name="USPersonYesNo" value="N" /&gt;
<i> </i> No&lt;br /&gt;
<i> </i> &lt;/p&gt;&lt;/td&gt;
<i> </i> &lt;/tr&gt;

<i> </i> &lt;/table&gt;

&lt;input type="submit" value="submit" value="Submit" onSubmit="return checkForm()" /&gt;
&lt;/form&gt; <br/>
&lt;/body&gt;
&lt;/html&gt;



It's passing on the data to the database and not validating anything.
Copy linkTweet thisAlerts:
@SupplementauthorOct 29.2011 — Never mind, I changed my function to this and it's working now:

function getRBGroupValue( RBGroup )
{
if ( RBGroup.length == null ) { return RBGroup.checked ? RBGroup.value : null; }
for (var i=0; i &lt; RBGroup.length; i++ )
{
if ( RBGroup[i].checked ) return RBGroup[i].value;
}
return null;
}

function checkForm(form)
{
var chosen = getRBGroupValue( form.Consent );
if (chosen == null) {
alert( "Consent for Electronic Signature" );
return false;
}
chosen = getRBGroupValue( form.Consent1099YesNo );
if ( chosen == null ) {
alert( "Consent for Electronic 1099 Form." );
return false;
}
chosen = getRBGroupValue( form.USPersonYesNo );
if ( chosen == null ) {
alert( "For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?" );
return false;
}
chosen = getRBGroupValue( form.USPersonYesNo );
if ( chosen == null ) {
alert( "Individual or Business?" );
return false;
}


<i> </i>// other form validation goes here

<i> </i>return true; // only do this if everything validates
}

&lt;/script&gt;



thanks for the help though.
Copy linkTweet thisAlerts:
@JunkMaleOct 29.2011 — And that because your not observing typos, name conventions, the function I posted worked fine, you neglected to rename the primary function to processForm from checkForm.

It would serve you well if you were to check for errors you introduce in to your code when dealing with programming problems that you seek help with, it is very common for people to come here with an issue and they have cobbled together a pseudo type of code, it is fixed or altered to work by the person answering the query to then be told the code does not work because the person copies and pastes and expects things to just go and as soon as an error occurs the knee jerk response is that "Your code does not work"

So from a development aspect, most of the errors people encounter are because they are expecting a fully working script when we generally will advise, point in the right direction and give examples that do similar or return the expected result but will require some input from the person having an issue in figuring out the missing bits for themselves, thats the idea of giving someone a leg up on the scripting ladder.

Personally I prefer to give examples or point people in the right direction and have people "Learn" how to do it rather than complain that something does not work when it very well does...
Copy linkTweet thisAlerts:
@SupplementauthorOct 29.2011 — And that because your not observing typos, name conventions, the function I posted worked fine, you neglected to rename the primary function to processForm from checkForm.

It would serve you well if you were to check for errors you introduce in to your code when dealing with programming problems that you seek help with, it is very common for people to come here with an issue and they have cobbled together a pseudo type of code, it is fixed or altered to work by the person answering the query to then be told the code does not work because the person copies and pastes and expects things to just go and as soon as an error occurs the knee jerk response is that "Your code does not work"

So from a development aspect, most of the errors people encounter are because they are expecting a fully working script when we generally will advise, point in the right direction and give examples that do similar or return the expected result but will require some input from the person having an issue in figuring out the missing bits for themselves, thats the idea of giving someone a leg up on the scripting ladder.

Personally I prefer to give examples or point people in the right direction and have people "Learn" how to do it rather than complain that something does not work when it very well does...[/QUOTE]



JunkMale,

I see exactly what you're saying, I was working on a bunch of things earlier and getting frustrated with that bit of code. I really appreciate your help my friend. Thank you.

It's easy to overlook things, which i did, I wanted to pound my head on the desk.
Copy linkTweet thisAlerts:
@JunkMaleOct 29.2011 — NP, Ur Welcome & Good Luck.
×

Success!

Help @Supplement spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...