Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Form validation not working

Status
Not open for further replies.
lazyrunner50

lazyrunner50

Programmer
Joined
Jul 30, 2004
Messages
63
Location
US
Hey. I am having a problem with my form submitting even though I do not want it to. I am using a script that checks to see if three radio buttons are selected. If they are all selected, it will go on to the processing page, otherwise it is supposed to alert the user and stay on the same page. As it is, it will alert the user and when they click ok, it will take them to the processing page.

Here's my script:
Code: 
function validForm(signupForm) 
{	
	theReturnValue = true;
	radioNumber1 = -1
	for (i=0; i<signupForm.radioGroup1.length; i++)
	{
		if (signupForm.radioGroup1[i].checked)
		{
			radioNumber1 = i
		}
	}
	if(radioNumber1==-1)
	{
		alert ("You must fill out the form completely")
		signupForm.radioGroup1.focus()
		theReturnValue = false;
	}
	radioNumber2 = -1
	for (i=0; i<signupForm.radioGroup2.length; i++)
	{
		if (signupForm.radioGroup2[i].checked)
		{
			radioNumber2 = i
		}
	}
	if(radioNumber2==-1)
	{
		alert ("You must fill out the form completely")
		signupForm.radioGroup2.focus()
		theReturnValue = false;
	}
	radioNumber3 = -1
	for (i=0; i<signupForm.radioGroup3.length; i++)
	{
		if (signupForm.radioGroup3[i].checked)
		{
			radioNumber3 = i
		}
	}
	if(radioNumber3==-1)
	{
		alert ("You must fill out the form completely")
		signupForm.radioGroup3.focus()
		theReturnValue = false;
	}
	
	return theReturnValue;
}
Here's the calling code:
Code: 
<form name="feedbackForm" action="processFeedback.asp" method="post" onSubmit="return validForm(this)">

P.S. I tried to do this whole function with one for and if combination (instead of three), but I couldn't get it to work for some reason...so if anyone has any suggestions I'd really appreciate it.
 
Sort by date Sort by votes

You haven't said (or shown) how you are submitting the form. If it with a standard submit button, your code should work.... If it is with a button/link that calls the form's submit method, then this will bypass the onsubmit checks, and thus exhibit the behaviour you are seeing - so I'm guessing that this is what you have done.

So if you change your link/button to be a submit button, all should work as expected.

Hope this helps,
Dan
 
Upvote 0 Downvote
one more thing,
if the code encounters any javascript error(after the o.k part of it) insead of showing error it will submit the form...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Hey. Actually, I am using a submit button:

Code: 
<input type='submit' value='Submit your comments'>

As for the javascript errors, is there a way to log the error or at least see what it is? I am not sure if that is the problem, but I don't see any other problems...
 
Upvote 0 Downvote
sure enough, there is an error. I don't know what it is yet, but I see the little warning sign pop up in the bottom left of the browser right before it is redirected
 
Upvote 0 Downvote
thats it,
change the submit button to normal button and in its onclick call the validate function...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Alright, here's the whole thing....
Code: 
<%@ Language=VBScript %>
<%If Session("disableForm") = "" Then  
	Session("disableForm") = false
End If%>			
<html>
<head>	
	<script language="javascript" src="./scripts/functionPage.js"></script>
	<link rel="stylesheet" href="./scripts/styles.css">	
</head>
<body onLoad="getPicture()">
	<%If Session("disableForm") = false Then%>
	<form name="feedbackForm" action="processFeedback.asp" method="post" onSubmit="return validForm(this)">
	<%End If%>
	<table width="100%" height="100%" border="0">
		<tr>
			<td colspan="2" valign="top" align="center" height="170px">
				<img src = "images/bannerFeedback.jpg">
			</td>
		</tr>
		<tr>
			<td width="245px">
			</td>
			<td valign="top" align="center">
				<table width="80%" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td id="titleText">
						<%If Session("disableForm") = false Then%>
							Thank you for visiting our website.  Please tell us ways we can improve your experience!
							<br>
							<br>
						</td>
					</tr>
					<tr>
						<td id="bodyText">
							<ol>
							<li>
								First question here<br />
								<input type="radio" name="radioGroup1" value="good">
								Good<br/>
								<input type="radio" name="radioGroup1" value="medium">
								OK<br/>
								<input type="radio" name="radioGroup1" value="bad">
								Needs some work<br/><br/>
							</li>
							<li>
								Second question here<br />
								<input type="radio" name="radioGroup2" value="yes">
								Yes<br/>
								<input type="radio" name="radioGroup2" value="no">
								No<br/><br />
							</li>
							<li>
								Third question here<br />
								<input type="radio" name="radioGroup3" value="yes">
								Yes<br/>
								<input type="radio" name="radioGroup3" value="no">
								No<br/><br />
							</li>
							<li>
								General Comments:<br />
								<textarea name="commentsTextArea" rows="5" cols="42">
								</textarea>
							</li>
							</ol>
							<input type='submit' value='Submit your comments'>
						</td>
					</tr>
				</table>	
			</td>
		</tr>
	</table>
	</form>
	<%Else%>
				Thank you for your feedback!
				<br>
				<br>
			</td>
		</tr>
		<tr>
			<td>
				<a href="default.asp" align="center">Main Page</a>
			</td>
		</tr>
		</table>	
			</td>
		</tr>
	</table>		
	<%End If%>		
	<div id="menu">
	<iframe src="navigationFrame.asp" width="250px" height="280px" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
	</div>
</body>
</html>

As you have probably noticed, the javascript function is in a .js file. All the other functions work, so they should not be a problem.
 
Upvote 0 Downvote
As you have probably noticed, the javascript function is in a .js file
Click to expand...

Given that that is the case, and that it is a JS error, don't you think that posting the JS might be relevant to fixing the error?

Also, can you post the code the browser sees (view source) rather than the ASP source, please?

Incidentally, try double-clicking on the little yellow warning icon and seeing what error message is displayed.

Hope this helps,
Dan
 
Upvote 0 Downvote
Yeah, sorry for that, the .js code includes the function I listed along with other functions that I know work properly. I can post it if it would help, but as it is the only function that is giving me errors, I didn't think posting all of it was necessary.

The .js file:
Code: 
var height = window.screen.height;
var width = window.screen.width;

function getPicture()
{
	var theName;
	if	(height <= '768')
		theName='./images/background.jpg';
	else
		theName='./images/largeBackground.jpg'; 
	document.body.background = theName;
}


function createMenus()
{
	var picHeightPosition = 0;		//How far down each picture is located
	var textHeightPosition = 12;    //How far down the text is located
	var moveDown = 40;              //How far down to move the pictures (the height of the picture)
	var picLeftPosition = 0;        //How far right to move the pictures (it is added on the left hand side...so it moves it right) 
	var textleftPosition = 60;      //How far right to move the text (it is added on the left hand side...so it moves it right)
	var defaultButton = "./images/button.jpg";  //The default button for rollover
	var downButton = "./images/downButton.jpg"; //The down button for rollover
	var hrefArray = new Array("default", "page1", "page2", "page3", 
							  "page4", "page5", "page6") //array of webpage names
	var buttonTextArray = new Array("Home", "First Page", "Second Page", "Third Page",
							  "Fourth Page", "Fifth Page", "Sixth Page") //array of button text
	
	
	//create string for writing buttons 
	var buttonString = "<div style='z-index:3;'>"
	for (i=0; i<7; i++)
	{
		buttonString +=  "<a href = '" + hrefArray[i] + ".asp' target= '_parent' onMouseover=document." 
		 + hrefArray[i] + "Pic.src='" + downButton + "' onMouseout=document." + hrefArray[i] + "Pic.src='" + defaultButton + "'>"
				+ "<img src='" + defaultButton + "' style='position:absolute; top:" 
				+ (picHeightPosition+moveDown*i) + "px; left:" + picLeftPosition + "px;' name='" + hrefArray[i] + "Pic'>"
		 + "</a>"
	}
	buttonString += "</div>"  //complete buttonString for pictures
	
	
	//create string for writing button text
	buttonString += "<div style='z-index:4; cursor:hand' class='buttonText'>"
	for (i=0; i<7; i++)
	{
		buttonString += "<font style='position:absolute; top:" + (textHeightPosition+moveDown*i) + "px; left:" + textleftPosition + "px;'> "				
			+ "<a href='" + hrefArray[i] + ".asp' target='_parent'>" + buttonTextArray[i] + "</a>"
		+ "</font>"
	}	
	buttonString += "</div>" //complete buttonString

	document.write(buttonString)  //Write buttons and text
}

[B]function validForm(signupForm) 
{    
    theReturnValue = true;
    radioNumber1 = -1
    for (i=0; i<signupForm.radioGroup1.length; i++)
    {
        if (signupForm.radioGroup1[i].checked)
        {
            radioNumber1 = i
        }
    }
    if(radioNumber1==-1)
    {
        alert ("You must fill out the form completely")
        signupForm.radioGroup1.focus()
        theReturnValue = false;
    }
    radioNumber2 = -1
    for (i=0; i<signupForm.radioGroup2.length; i++)
    {
        if (signupForm.radioGroup2[i].checked)
        {
            radioNumber2 = i
        }
    }
    if(radioNumber2==-1)
    {
        alert ("You must fill out the form completely")
        signupForm.radioGroup2.focus()
        theReturnValue = false;
    }
    radioNumber3 = -1
    for (i=0; i<signupForm.radioGroup3.length; i++)
    {
        if (signupForm.radioGroup3[i].checked)
        {
            radioNumber3 = i
        }
    }
    if(radioNumber3==-1)
    {
        alert ("You must fill out the form completely")
        signupForm.radioGroup3.focus()
        theReturnValue = false;
    }
    
    return theReturnValue;
}
[/B]

Also, as I said before, I can't see the error since right after I click ok on the alert dialog box, it submits the form. I can see that there is the yellow warning sign in the corner, but can't click there fast enough to get it.

Here's the output of the asp source:

Code: 
<html>
<html>
<head>    
    <script language="javascript" src="./scripts/functionPage.js"></script>
    <link rel="stylesheet" href="./scripts/styles.css">    
</head>
<body onLoad="getPicture()">
    <form name="feedbackForm" action="processFeedback.asp" method="post" onSubmit="return validForm(this)">
    <table width="100%" height="100%" border="0">
        <tr>
            <td colspan="2" valign="top" align="center" height="170px">
                <img src = "images/bannerFeedback.jpg">
            </td>
        </tr>
        <tr>
            <td width="245px">
            </td>
            <td valign="top" align="center">
                <table width="80%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td id="titleText">
                            Thank you for visiting our website.  Please tell us ways we can improve your experience!
                            <br>
                            <br>
                        </td>
                    </tr>
                    <tr>
                        <td id="bodyText">
                            <ol>
                            <li>
                                First question here<br />
                                <input type="radio" name="radioGroup1" value="good">
                                Good<br/>
                                <input type="radio" name="radioGroup1" value="medium">
                                OK<br/>
                                <input type="radio" name="radioGroup1" value="bad">
                                Needs some work<br/><br/>
                            </li>
                            <li>
                                Second question here<br />
                                <input type="radio" name="radioGroup2" value="yes">
                                Yes<br/>
                                <input type="radio" name="radioGroup2" value="no">
                                No<br/><br />
                            </li>
                            <li>
                                Third question here<br />
                                <input type="radio" name="radioGroup3" value="yes">
                                Yes<br/>
                                <input type="radio" name="radioGroup3" value="no">
                                No<br/><br />
                            </li>
                            <li>
                                General Comments:<br />
                                <textarea name="commentsTextArea" rows="5" cols="42">
                                </textarea>
                            </li>
                            </ol>
                            <input type='submit' value='Submit your comments'>
                        </td>
                    </tr>
                </table>    
            </td>
        </tr>
    </table>
    </form>       
    <div id="menu">
    <iframe src="navigationFrame.asp" width="250px" height="280px" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
    </div>
</body>
</html>
 
Upvote 0 Downvote
did u try my suggestion???

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote

You see the focus() lines like this one: signupForm.radioGroup1.focus()

I'm not sure that's even valid - setting focus to a group I mean. Try removing or commenting-out those lines.
 
Upvote 0 Downvote
Hey vbkris, yeah I tried yours. The only thing is, it didn't do anything when I clicked the button. I was able to see the error message through. It seems that it doesn't like radioGroup1.length --> Error 'radioGroup1.length' is null or not an object. I'll get back to you on yours theboy...gotta get ready for work now though!
 
Upvote 0 Downvote
You can't test the length of a radiogroup. The length function is used only to test the length of strings.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
You can't test the length of a radiogroup. The length function is used only to test the length of strings.
Click to expand...

Wrong on that one, mate.
 
Upvote 0 Downvote
You see the focus() lines like this one: signupForm.radioGroup1.focus() I'm not sure that's even valid - setting focus to a group I mean. Try removing or commenting-out those lines.
Click to expand...

I got bored waiting for you to try it and tried it myself instead. :-) Works fine for me in IE and Mozilla with those lines removed.
 
Upvote 0 Downvote
Haha. Patients, patients...gotta go to work to pay the bills! :-) Now that I am home, I can try it out and see if it will work.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
680
gmmastros
gmmastros
rogerte
  • Locked
  • Question Question
Javascript updating form control not working
Replies
3
Views
594
rogerte
rogerte
JPSeo
  • Locked
  • Question Question
--How to implement req.body.param validation
Replies
0
Views
287
JPSeo
JPSeo
tonynsx
  • Locked
  • Question Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
374
ggriffit
ggriffit
HansMaulwurf
  • Locked
  • Question Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
417
HansMaulwurf
HansMaulwurf

Part and Inventory Search

Sponsor

Back
Top