PDA

Click to See Complete Forum and Search --> : radio button validation help

shyra_ann
03-14-2005, 08:06 PM
Hi there. I have a code for radio validation. BUT my problem is that I have 2 forms on the page and only 1 needs to have the radio validation. But the validation tries to go for both forms and then my forms won't submit b/c of this. Here is my code, any suggesstions?

{
var
validationSucceed = false,
noRadioButtonChecked = true,
formHandle = document.forms[ 'form2' ],
formElementsCount = formHandle.elements.length

for( var i=0; i<formElementsCount; i++ )
{
var currentFormElement = formHandle.elements[ i ]

if(currentFormElement.type=="radio" &&

currentFormElement.name=="rating" )
{
if( currentFormElement.checked )
noRadioButtonChecked = false
}
}
if( !noRadioButtonChecked )
validationSucceed = true

if( !validationSucceed )
alert( "Please choose a rating" )

}

my professer suggested I make this into an if statement, but I'm not sure how. I am very new to JS! Thanks in advance to anyone who helps.
Jona
03-14-2005, 09:04 PM
The code you wrote indicates that you're only validating one form, but you said that it was taking two forms into consideration when the script ran. Which am I to believe?
shyra_ann
03-14-2005, 09:08 PM
I guess I didn't explain right.

I have 2 forms on my page. The first form has radio buttons. The second form doesn't. But that coding I have tries to validate radio buttons on both forms.

I need to get it to where it only works on the first form. I thought the formhandler being

formHandle = document.forms[ 'form2' ]

my forms are name form2 and form3

Would do that, but it's not keeping it to one form. My college professor suggessted I turn the code into an if statement, I'm not sure how to do that. I only started JS about a week ago so there is a lot I have to learn.
Jona
03-14-2005, 09:11 PM
That doesn't make sense. The code specifically refers to the second form and no other forms. Are you sure that you have separated the radio buttons in a separate FORM tag group?
shyra_ann
03-14-2005, 09:14 PM
Nope. Here Ill post my entire code for you. Maybe you can see what's going wrong.

<script type="text/javascript">

function hideAll() {
for (formNumber=1; formNumber<=3; formNumber++)
document.getElementById("form"+formNumber).style.display = 'none';
}

function show(formNumber) {
document.getElementById("form"+formNumber).style.display = 'block';
}
function validate(form) {

if (form.FromAddress.value == '') {
alert ('Please fill in your email');
event.returnValue=false;
}

if(form.Name.value =='') {
alert ('Please give your name.');
event.returnValue=false;
}

if (form.zipcode.value =='') {
alert('Please enter your zip code.');
event.returnValue=false;
}
if(form.Country.value =='') {
alert ('Please fill in your country');
event.returnValue=false;
}

if(form.name == 'form3' && (!form3.contact.checked && !form3.contact2.checked)) {
alert('Please choose how you wish to be contacted.');
event.returnValue=false;
}

{
var
validationSucceed = false,
noRadioButtonChecked = true,
formHandle = document.forms[ 'form2' ],
formElementsCount = formHandle.elements.length

for( var i=0; i<formElementsCount; i++ )
{
var currentFormElement = formHandle.elements[ i ]

if(currentFormElement.type=="radio" && currentFormElement.name=="rating" )
{
if( currentFormElement.checked )
noRadioButtonChecked = false
}
}
if( !noRadioButtonChecked )
validationSucceed = true

if( !validationSucceed )
alert( "Please choose a rating" )

}
{
return true;
}
}
</script>
</head>

<body bgcolor="#CCFFCC">


<h1 align="center">Forms</h1>


<p><b>Please make a selection</b></p>

<!-- form 0 -->
<form name="form0" action="">
<select name="frms"

onchange="hideAll();show(this.form.frms.options[this.form.frms.options.selectedIndex].value);">

<option value="1">Select a form</option>
<option value="2">Feedback</option>
<option value="3">Help Request</option>
</select>
</form>



<br />
<!-- form 1 -->
<form name="form1" style="display: none;" action="">
</form>

<!-- form 2 -->
<form style="display: none;" action="http://www2.esc.edu/jstoner/form-to-email.php"
method="post" name="form2" onsubmit=" return validate(this);">
<input type="hidden" name="ToAddress" value="" />
<input type="hidden" name="CCAddress" value="" />
<input type="hidden" name="Subject" value=""/>
<fieldset>
Email:<br /><input type="text" name="FromAddress" /><br />
Name:<br /><input type="text" name="Name" /><br />
Address:<br /><input type="text" name="Streetaddress" /><br />
Address 2:<br /><input type="text" name="Address2" /><br />
City:<br /><input type="text" name="City" /><br />
State:<br /><input type="text" name="State" /><br />
Zip code:<br /><input type="text" name="zipcode" /><br />
Country:<br /><input type="text" name="Country" /><br />
Rate my site from 1 to 5<br />
1 = :0( <br />
5 = :0) <br />
<input type="radio" name="rating" value="1" />1<br />
<input type="radio" name="rating" value="2" />2<br />
<input type="radio" name="rating" value="3" />3<br />
<input type="radio" name="rating" value="4" />4<br />
<input type="radio" name="rating" value="5" />5<br />
Comments:<br />
<textarea name="Comments" rows="10" cols="25" ></textarea><br />
<input type="submit" value="Submit" style="margin-top: 20px" />
<input type="reset" value="Reset Form" style="margin-top: 20px" />
</fieldset>
</form>


<!-- form 3 -->
<form style="display: none;" action="http://www2.esc.edu/jstoner/form-to-email.php"
method="post" name="form3" onsubmit=" return validate(this);">
<input type="hidden" name="ToAddress" value="" />
<input type="hidden" name="CCAddress" value="" />
<input type="hidden" name="Subject" value="" />
<fieldset>
Email:<br /><input type="text" name="FromAddress" /><br />
Name:<br /><input type="text" name="Name" /><br />
Address:<br /><input type="text" name="Streetaddress" /><br />
Address 2:<br /><input type="text" name="Address2" /><br />
City:<br /><input type="text" name="City" /><br />
State:<br /><input type="text" name="State" /><br />
Zip code:<br /><input type="text" name="zipcode" /><br />
Country:<br /><input type="text" name="Country" /><br />
Phone:<br /><input type="text" name="Number" /><br />
Would you like to be contacted by email or phone?<br />
<input type="checkbox" name="contact" value="email" />Email<br />
<input type="checkbox" name="contact2" value="phone" onClick="alert ('Please make sure your phone number is entered and correct');" />Phone<br /><br />
Give a explaination of your problem:<br />
<textarea name="huh" rows="15" cols="30" /></textarea><br />
<input type="submit" value="Submit" style="margin-top: 20px" />
<input type="reset" value="Reset Form" style="margin-top: 20px" />
</fieldset>
</form>

<br />

</body>
</html>
Jona
03-14-2005, 09:44 PM
Wow, your code is a complete mess! The hardest part of solving your problem was reading your code, the second hardest part was making it work in more than just IE. :rolleyes:


<script type="text/javascript">

function hideAll() {
for (formNumber=1; formNumber<3; formNumber++)
document.forms["form"+formNumber].style.display = 'none';
}

function show(formNumber) {
document.forms["form"+formNumber].style.display = 'block';
}
function validate(form) {
if (form.FromAddress.value == '') {
alert ('Please fill in your email');
event.returnValue=false;
}

if(form.Name.value =='') {
alert ('Please give your name.');
event.returnValue=false;
}

if (form.zipcode.value =='') {
alert('Please enter your zip code.');
event.returnValue=false;
}

if(form.Country.value =='') {
alert ('Please fill in your country');
event.returnValue=false;
}

if(form.name == 'form3' && (!form3.contact.checked && !form3.contact2.checked)) {
alert('Please choose how you wish to be contacted.');
event.returnValue=false;
}

if(form.name == "form3"){return};

var validationSucceed = false, noRadioButtonChecked = true, formHandle = document.forms[ 'form2' ], formElementsCount = formHandle.elements.length;

for( var i=0; i<formElementsCount; i++ ){
var currentFormElement = formHandle.elements[i];
if(currentFormElement.type=="radio" && currentFormElement.name=="rating"){
if(currentFormElement.checked) noRadioButtonChecked = false
}
}
if(!noRadioButtonChecked) validationSucceed = true;
if(!validationSucceed) alert("Please choose a rating");
}
</script>
</head>

<body bgcolor="#CCFFCC">


<h1 align="center">Forms</h1>


<p><b>Please make a selection</b></p>

<!-- form 0 -->
<form name="form0" action="">
<select name="frms"

onchange="hideAll();show(this.form.frms.options[this.form.frms.options.selectedIndex].value);">

<option value="1">Select a form</option>
<option value="2">Feedback</option>
<option value="3">Help Request</option>
</select>
</form>



<br />
<!-- form 1 -->
<form name="form1" style="display: none;" action="">
</form>

<!-- form 2 -->
<form style="display: none;" action="http://www2.esc.edu/jstoner/form-to-email.php"
method="post" name="form2" onsubmit=" return validate(this);">
<input type="hidden" name="ToAddress" value="" />
<input type="hidden" name="CCAddress" value="" />
<input type="hidden" name="Subject" value=""/>
<fieldset>
Email:<br /><input type="text" name="FromAddress" /><br />
Name:<br /><input type="text" name="Name" /><br />
Address:<br /><input type="text" name="Streetaddress" /><br />
Address 2:<br /><input type="text" name="Address2" /><br />
City:<br /><input type="text" name="City" /><br />
State:<br /><input type="text" name="State" /><br />
Zip code:<br /><input type="text" name="zipcode" /><br />
Country:<br /><input type="text" name="Country" /><br />
Rate my site from 1 to 5<br />
1 = :0( <br />
5 = :0) <br />
<input type="radio" name="rating" value="1" />1<br />
<input type="radio" name="rating" value="2" />2<br />
<input type="radio" name="rating" value="3" />3<br />
<input type="radio" name="rating" value="4" />4<br />
<input type="radio" name="rating" value="5" />5<br />
Comments:<br />
<textarea name="Comments" rows="10" cols="25" ></textarea><br />
<input type="submit" value="Submit" style="margin-top: 20px" />
<input type="reset" value="Reset Form" style="margin-top: 20px" />
</fieldset>
</form>


<!-- form 3 -->
<form style="display: none;" action="http://www2.esc.edu/jstoner/form-to-email.php"
method="post" name="form3" onsubmit=" return validate(this);">
<input type="hidden" name="ToAddress" value="" />
<input type="hidden" name="CCAddress" value="" />
<input type="hidden" name="Subject" value="" />
<fieldset>
Email:<br /><input type="text" name="FromAddress" /><br />
Name:<br /><input type="text" name="Name" /><br />
Address:<br /><input type="text" name="Streetaddress" /><br />
Address 2:<br /><input type="text" name="Address2" /><br />
City:<br /><input type="text" name="City" /><br />
State:<br /><input type="text" name="State" /><br />
Zip code:<br /><input type="text" name="zipcode" /><br />
Country:<br /><input type="text" name="Country" /><br />
Phone:<br /><input type="text" name="Number" /><br />
Would you like to be contacted by email or phone?<br />
<input type="checkbox" name="contact" value="email" />Email<br />
<input type="checkbox" name="contact2" value="phone" onClick="alert ('Please make sure your phone number is entered and correct');" />Phone<br /><br />
Give a explaination of your problem:<br />
<textarea name="huh" rows="15" cols="30" /></textarea><br />
<input type="submit" value="Submit" style="margin-top: 20px" />
<input type="reset" value="Reset Form" style="margin-top: 20px" />
</fieldset>
</form>

<br />

</body>
</html>
shyra_ann
03-14-2005, 09:54 PM
Thank you so much. It works like a dream. I am going to go over it now and see exactly what you did. Sorry my code was a mess. I am trying really hard to get a grip on JS. Thanks again.
Jona
03-14-2005, 09:59 PM
Happy to help.