admin管理员组

文章数量:1400195

All right so I am doing a javascript code for a login type form and it will lead you to a new page. Here it is:

function submit1()
{
    var x=document.getElementById("username");
    var y=document.getElementById("password");
    if (x.value=="username" && y.value=="password")
    {
        window.location="Example.php";
    }
    else
    {
        window.alert=("The information you have submitted is incorrect and needs to be submitted again!");
    }
}

When ever I am hitting the submit button it takes me straight to the page instead of checking to see if it right. Please help! Thank you in advanced! To let you know this is not a permanet login page!

All right so I am doing a javascript code for a login type form and it will lead you to a new page. Here it is:

function submit1()
{
    var x=document.getElementById("username");
    var y=document.getElementById("password");
    if (x.value=="username" && y.value=="password")
    {
        window.location="Example.php";
    }
    else
    {
        window.alert=("The information you have submitted is incorrect and needs to be submitted again!");
    }
}

When ever I am hitting the submit button it takes me straight to the page instead of checking to see if it right. Please help! Thank you in advanced! To let you know this is not a permanet login page!

Share Improve this question edited Dec 8, 2012 at 17:01 Kyle Gagnon asked Dec 8, 2012 at 16:14 Kyle GagnonKyle Gagnon 621 silver badge8 bronze badges 5
  • Be careful : Replace window.alert=( with window.alert( – Denys Séguret Commented Dec 8, 2012 at 16:15
  • 1 w3school stuff I guess LOL – Mr. Alien Commented Dec 8, 2012 at 16:16
  • if you want a proper answer please include how you're calling this function. checking credentials in the client is Bad. are you using onSubmit if so your method needs to return false. – Wes Commented Dec 8, 2012 at 16:20
  • What I'm getting at is that we have no idea what you're actually telling the form to do without seeing at least the form start element and the submit button. If you have action filled in on the form and hit submit, it's going to GET/POST to that path. – Ally Commented Dec 8, 2012 at 16:23
  • @ally that's what I was get getting at too. – Wes Commented Dec 8, 2012 at 16:26
Add a ment  | 

4 Answers 4

Reset to default 3

The easy way to do this would be to use a button input:

<input type="button" value="Check" onclick = "submit1();" />

The alternative is to prevent this default behavior of a submit type input, by making the handler return false. Your HTML would look like this:

<input type="submit" value="Check" onclick = "return submit1();" />

Your function would need to be changed a well (considering the fact that you want it to not redirect). I am assuming you want to preserve data entered, so I am not going to use window.location to redirect. Instead, I am going to allow the form to be submitted:

function submit1()
{
    var x=document.getElementById("username");
    var y=document.getElementById("password");
    if (x.value == "username" && y.value == "password") {
        window.alert=("The information you have submitted is incorrect and needs to be submitted again!");
        return false;
    }
}
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
  {
     window.location="Example.php"; /*opens the target page while Id & password matches*/
  }
 else
 {
   alert("Error Password or Username")/*displays error message*/
  }
}
</script>
</body>
</html>

The event needs to cancel the default event and return false. This will prevent the form from submitting.

HOWEVER, it should be a non-issue if the form submits anyway, because JavaScript CANNOT be trusted and therefore you MUST validate all input server-side.

<form method="post" action="." id="myform">
 <!-- form contents --->
</form>    
<script type="text/javascript">
(function () {
    var f = document.getElementById('myform'), // get your form element
        x = document.getElementById('username'),
        y = document.getElementById('password'),
        handler;
    handler = function (e) {
        e.preventDefault(); // stop submit
        if (x.value=='username' && y.value=='password') {
            window.location = 'Example.php';
        } else {
            window.alert('The information...');
        }
    };
    // listen to submit event
    if ('addEventListener' in f) {
        f.addEventListener('submit', handler, false);
    } else { // handle also IE...
        f.attachEvent('submit', function () {
            handler(window.event);
        });
    }
}());
</script>

anyway it looks like you're trying to check login/password from JS what is not greatest idea (anyone can just look into source and read it)

本文标签: javascriptOnclick event If and ElseStack Overflow