Onsubmit not working!


#1

My onsubmit function is not working.

My PHP file has two forms. Both form tags have an onsubmit attribute that links to the same javascript file. The first form's onsubmit is working. The function being called by the second form has been simplified to this:

function UserDataCheck()
{
return false;
}

The form tag is

echo "<form name='user_form' method='post' onsubmit='return UserDataCheck();'>";

Please help. This is driving me crazy! Earlier I was doing some data checking in the UserDataCheck() but I stripped all of that away to see if I could even use onsubmit to stop the user from submitting! NO SUCCES


#2
  1. I think you are doing something else wrong because the above does not make sense. The onsubmit event handler usually runs some js, not link to a js file. Post the code for the opening form tag for your first form.

  2. This is not a PHP issue and so should not be in the PHP forum. Just because you echo the html for the form tag doesn't make this a PHP issue.


#3

onsubmit is Javascript, not php. Also, when you use onsubmit, you dont put the javascript file that you want to link to. You put all the javascript files you want to link to in script tags inside the head of the document.
Example:
<head>
<script src="javascriptfile.js"></script>
</head>


#4

Correction.

These days script files are preferred to be placed at the end of the body, which speeds up the apparant loading time of the web page (scripts block page loading) and also nicely allows you to work with elements on the page without needing to use onload techniques, which also helps to speed things up, as compared with their requirement when they are done from the head.

<html>
<head>
    ...
</head>
<body>
    ...
    <script src="script.js"></script>
</body>
</html>


#5

** Correction to the Correction **

Not by me they're not and certainly not by everyone smile

I prefer to put my javascript in the head so I don't have to scroll down to the bottom of the page to get at it or to see the name of the js file.

The amount of javascript I have is small and so users, even those on slow connections, won't notice any difference in "apparent" page loading time.

Like you said, where you put the js is a preference and so is not a rule cast in stone.


#6

Sorry, I am new to this. I guess I should have posted this in the javascript or HTML forum. Anyway, I already have the script tag in the head.

echo "<html>"; 
echo "<head>"; 
echo "<title>Survey Form</title>"; 
echo "<link link rel='stylesheet' href='examples.css' type='text/css'>"; 
echo "<script type='javascript' src='validation.js'></script>"; 
echo "</head>";

I changed the form tags to the following on somebody's suggestion

echo "<form name='admin_form' method='post' onsubmit='AdminDataCheck();'>";
echo "<form name='user_form' method='post' onsubmit='Userdatacheck();'>"; 

Still no success. I am also using onblur in all my labels. For ex.

 echo "<p>Name of Officer <label style='color:red'><strong>*</strong></label><br/> </label><input type='text' name='name' value='' size='40' id='Name' onblur='checkName()'/><label id='labelName'></label></p>";

And everything was working a while ago but now its not! And all I did was clear the history in the browser and restart the server. Looks like my PHP file can't even connect to the javascript file!

Here is the javascript file.

function checkScopeofService()
    {
    var ScopeofService = document.getElementById('ScopeofService').value;
        var element = document.getElementById('labelScopeofService');
        var alphaExp = /^[A-Za-z ]+$/;     
                  
        if(ScopeofService.length == 0)
        {
        element.innerHTML = "Please enter a Scope of Service.";
        element.style.color = "red";
        }
else
{
if(ScopeofService.match(alphaExp))
{
element.innerHTML = null;
}
else
{
element.innerHTML = "Please enter valid characters.";
element.style.color = "red";
}
}
}

function checkProjectNumber()
{
var ProjectNumber = document.getElementById('ProjectNumber').value;
        var elementPNo = document.getElementById('labelProjectNumber');
var numericExpression = /^[0-9]+$/;
if(ProjectNumber.length == 0)
{
elementPNo.innerHTML = "Please enter a Project Number.";
elementPNo.style.color = "red";
}
else
{
if(ProjectNumber.match(numericExpression))
{
elementPNo.innerHTML = null;
}
else
{
elementPNo.innerHTML = "Please enter valid characters.";
elementPNo.style.color = "red";
}
}
}

function checkEmail()
{
var Email = document.getElementById('Email').value;
    var elementEmail = document.getElementById('labelEmail');
var emailExp = /^[\\w\\-\\.\\+]+\\@[a-zA-Z0-9\\.\\-]+\\.[a-zA-z0-9]{2,4}$/;
if(Email.length == 0)
{
elementEmail.innerHTML = "Please enter an Email address.";
elementEmail.style.color = "red";
}
else
{
if(Email.match(emailExp))
{
elementEmail.innerHTML = null;
}
else
{
elementEmail.innerHTML = "Please enter a valid Email address.";
elementEmail.style.color = "red";
}
}
}

 function checkName()
    {
    var Name = document.getElementById('Name').value;
        var element = document.getElementById('labelName');
        var alphaExp = /^[A-Za-z ]+$/;     
                  
        if(Name.length == 0)
        {
        
element.innerHTML = "Please enter a name.";
        
element.style.color = "red";
        }
else if(Name.length >= 6 && Name.length <= 30)
{
if(Name.match(alphaExp))
{
element.innerHTML = null;
}
else
{
element.innerHTML = "Please enter valid characters.";
element.style.color = "red";
}
}
else if(Name.length < 6)
{
if(Name.match(alphaExp))
{
element.innerHTML = "Name too short.";
element.style.color = "red";
}
else
{
element.innerHTML = "Please enter valid characters.";
element.style.color = "red";
}
}
else if(Name.length > 30)
{
element.innerHTML = "Name too long.";
element.style.color = "red";
}
else
{
element.innerHTML = null;
}
}

 function checkDesignation()
    {
    
var Designation = document.getElementById('Designation').value;
        var element = document.getElementById('labelDesignation');
        var alphaExp = /^[A-Za-z ]+$/;     
                  
        if(Designation.length == 0)
        {
        
element.innerHTML = "Please enter a designation.";
        
element.style.color = "red";
        }
else if(Designation.length >= 7 && Designation.length <= 20)
{
if(Designation.match(alphaExp))
{
element.innerHTML = null;
}
else
{
element.innerHTML = "Please enter valid characters.";
element.style.color = "red";
}
}
else if(Designation.length < 7)
{
if(Designation.match(alphaExp))
{
element.innerHTML = "Designation too short.";
element.style.color = "red";
}
else
{
element.innerHTML = "Please enter valid characters.";
element.style.color = "red";
}
}
else if(Designation.length > 20)
{
element.innerHTML = "Designation too long.";
element.style.color = "red";
}
else
{
element.innerHTML = null;
}
}

function checkPhone()
{
var Phone = document.getElementById('Phone').value;
        
var elementPNo = document.getElementById('labelPhoneNumber');
var numericExpression = /^[0-9]+$/;
if(Phone.length == 0)
{
elementPNo.innerHTML = "Please enter a phone number.";
elementPNo.style.color = "red";
}
else if(Phone.length < 8)
{
if(Phone.match(numericExpression))
{
elementPNo.innerHTML = "Phone Number too short.";
elementPNo.style.color = "red";
}
else
{
elementPNo.innerHTML = "Please enter valid characters.";
elementPNo.style.color = "red";
}
}
else
{
if(Phone.match(numericExpression))
{
elementPNo.innerHTML = null;
}
else
{
elementPNo.innerHTML = "Please enter valid characters.";
elementPNo.style.color = "red";
}
}
}

function addInput() 
{
	if(document.getElementById('AreastoImprove1').checked)
	{
		document.getElementById('textbelow').style.display = "none";
	}
	if(document.getElementById('AreastoImprove2').checked)
	{
		document.getElementById('textbelow').style.display = "block";
		document.getElementById('textbelow').innerHTML = "";
		document.getElementById('textbelow').innerHTML += "<input type='text' name='seebelow' value='' /><br />";
	}
}

function AdminDataCheck()
{
var SoS = document.getElementById('ScopeofService').value;
var PNumber = document.getElementById('ProjectNumber').value;
var numericExp = /^[0-9]+$/;
var alphaExp = /^[A-Za-z ]+$/; 
var Email = document.getElementById('Email').value;
var emailExp = /^[\\w\\-\\.\\+]+\\@[a-zA-Z0-9\\-]+\\.[a-zA-z0-9]{2,4}$/;

if (!(SoS.match(alphaExp)))
{	
alert("Invalid Scope");
return false;
}
else if(!(PNumber.match(numericExp)))
{
alert("Invalid Project Number.");
return false;
}
else if(!(Email.match(emailExp)))
{
alert("Invalid Email.");
return false;
}
else
{
return true;
}
}

function UserDataCheck()
{
return false;
}

}


#7

What is the code of your first form's opening form tag in which you say the onsubmit works?

Edit:


ok, I see you updated your previous post.

#8

echo "<form name='admin_form' method='post' onsubmit='AdminDataCheck();'>";

Btw, its not working anymore. The same thing was working a while ago!


#9

The suggestion was probably from another forum? But why have you now left our the return statement in the onsubmit statement when you had it in in your first post?


#10

Should I add the return back? Cos that doesn't work either.

Why don't you reverse your onsubmit button. You never reach the function call UserDataCheck(); because the return statement comes first. Or just remove the "return" all together.

onsubmit = "UserDataCheck(); return false;"

Yeah this suggestion was from an HTML forum.


#11

Also you have

function UserDataCheck()

and

<font color='#000000'><font color='#DD0000'>onsubmit='Userdatacheck();'</font></font>

The error is obvious smile


#12

Thanks for pointing that out. But that doesn't really matter. Cos even AdminDataCheck() is not being called, nor are any of the functions in the onblur attributes. And UserDataCheck() only comes into the picture later, when I actually submit the first form. :S I feel like pulling my hair out cos all of that was working earlier!

Btw, is it possible that when I update my php file, the browser might not pick up the changes immediately? I mean do I need to clear the cache everytime or restart the server (XAMPP on localhost) everytime I make a change? No, right?


#13

It does matter and very much so, because js is case sensitive and you have no chance at all of calling that function (even when you fix your other problems) because

UserDataCheck() is not the same as Userdatacheck()

Good luck smile


#14

Yes, I know. I'm sorry I meant thats not the bigger picture here. Like, it doesn't really matter cos validation.js is not being linked to, so whats the point of correcting function names. I corrected that, and still nothing! Could you clarify my doubt about restarting the server/emptying the cache every time I make a change.

Ok, I feel very stupid admitting this but the <body> and <html> tags in my PHP file hadn't being closed! So I fixed that, but still not working. I wonder how it was all working at one point and what changed!


#15

I'm amazed you even asked that question because I answered it in my previous post with

It does matter and very much so, because js is case sensitive and you have no chance at all of calling that function (even when you fix your other problems) because

UserDataCheck() is not the same as Userdatacheck()

Hopefully someone else will come along to fix your other problems.


#16

Oh man, you are getting the wrong idea. I do get the point of correcting the function name, but is the script being complied and executed? I doubt it! Thanks for your help.


#17

Then I don't see why you said

.... so whats the point of correcting function names.....

I'm starting to think you are making this up as you go along and I have spent enough time on this one.

Like I said, hopefully someone else will come along to fix your other problems - good luck smile


#18