html - Javascript onsubmit="" not working

I'm not sure if my error es from submitting the form to itself via PHP but it is just not hitting my function and submits anyway no matter what is returned. I'm not sure what I'm missing here. This is my form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".dtd">
<html>
<head>
    <title>Login Page</title>
    <script type="text/javascript" src="js/functions.js"></script>
    <!--Internal for simplicity or until bigger page -->
    <style type="text/css"> 
        #login div{display:inline;color:red;}
        input{margin-right:20px;}
    </style>
</head>
<body>
<form name="login" id="login" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST" onsubmit="return CheckLogin()">
    <?php if($_POST && $win == false): ?>
        <div>Login Unsuccessful. Please Try Again</div><br />
    <?php endif ?>
        <input type="text" size="10" name="username" /><div></div>
            <br />
        <input type="password" size="10" name="password" /><div></div>
            <br />
    <input type="submit" text="Submit" />
</form>
<a href="register.php">Registration Page</a>
</body>
</html>

Really I'm just checking if username/password are empty but it just submits anyway going right through this function:

function CheckLogin()
{
    window.alert("made it here");
    var login = document.forms["login"];
    var user = login["username"].value;
    var pass = login["password"].value;

    if(user == null || user == "")
    {
        window.alert("user");
        return false;
    }  

    return false;
}

I'm sure it's something stupid that I'm missing so before I submitted this I double checked the function names and to see if I was getting any javascript errors but neither turned out to be the problem. Does anybody see my error?

The point being I do not want the PHP to run or the form to be submitted to itself if username or password is empty or null.

EDIT Added full html page minus the PHP functionality. Also noted that for some reason my javascript link does not 'link' instead I can view the contents of it directly in the header like it is embedded via inspect element or firebug. This might be the root of the problem but not sure why.

EDIT Added doctype just incase, but still no help. It is automatically embedding my javascript into my page and putting it into CDATA like you would normally instead of actually linking it. It does this in IE, Firefox & Chrome...

if anyone thinks my PHP might have something to do with it I could post it, but I don't see how server side code could interact with client side code without being posted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Login Page</title>
    <script type="text/javascript" src="js/functions.js"></script>
    <!--Internal for simplicity or until bigger page -->
    <style type="text/css"> 
        #login div{display:inline;color:red;}
        input{margin-right:20px;}
    </style>
</head>
<body>
<form name="login" id="login" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST" onsubmit="return CheckLogin()">
    <?php if($_POST && $win == false): ?>
        <div>Login Unsuccessful. Please Try Again</div><br />
    <?php endif ?>
        <input type="text" size="10" name="username" /><div></div>
            <br />
        <input type="password" size="10" name="password" /><div></div>
            <br />
    <input type="submit" text="Submit" />
</form>
<a href="register.php">Registration Page</a>
</body>
</html>

Really I'm just checking if username/password are empty but it just submits anyway going right through this function:

function CheckLogin()
{
    window.alert("made it here");
    var login = document.forms["login"];
    var user = login["username"].value;
    var pass = login["password"].value;

    if(user == null || user == "")
    {
        window.alert("user");
        return false;
    }  

    return false;
}

The point being I do not want the PHP to run or the form to be submitted to itself if username or password is empty or null.

if anyone thinks my PHP might have something to do with it I could post it, but I don't see how server side code could interact with client side code without being posted.

Share Improve this question edited Dec 4, 2011 at 20:01 asked Dec 4, 2011 at 8:23 Howdy_McGee 10.7k30 gold badges116 silver badges191 bronze badges

The problem, as ajreal said, is that your function never returns "true". It's also good practice to always use a semicolon in your onSubmit functions: "return CheckLogin();" – paulsm4 Commented Dec 4, 2011 at 8:33
I copied the exact same code to a local .html file and it works (called the function and stopped the submit). It has to be some of your php var which in effect breaks format of the html output. Can you post exactly what the server echos ? – Jim Jose Commented Dec 4, 2011 at 8:37
@paulsm4 I want the form to "not submit" so that I know it is hitting my function at least. @JimJose The server never echo's out anything it just checks username against database and also makes sure that username/password is not an empty field. If either are empty that is where the "$log==false" portion of the code above es into play and it says "Login Unsuccessful" – Howdy_McGee Commented Dec 4, 2011 at 8:42
Try viewing the page source in the browser to see if thats ok. Then use firebug. – Ed Heal Commented Dec 4, 2011 at 9:13
it's weird, even in viewsource it parses everything into CDATA like you would embed it instead of actually linking the file. It's doing it automatically... – Howdy_McGee Commented Dec 4, 2011 at 9:16

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

There are some minor errors in your code. First of all there is no attribute called "text" for an input, I believe that you missed it :) Try to validate them first. Check here to see the attributes that an input may take. Second of all, this jsfiddle example works properly in Chrome and FF. I cannot test in IE since I am using Ubuntu.

After I corrected the form attributes, the example in jsfiddle started to work. I am not sure whethere it's related with that, but apparently that seems the only logical explanation to me for your code not working.

Your code runs fine. Try running it in another web browser. It's possible that one of the extensions you installed on your browser is causing a JS error (having Google Dictionary on Chrome was causing issues for me).

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript onsubmit="" not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)