CODEWITHSUNDEEP
phpjavascript
Duc Tran
Duc Tran

Reputation: 6284

How to redirect current tab on submit using javascript?

I does a small example to learn javascript and php. I try window.open() and window.location() but it opens a new tab and the current tab still redirects to "login.php"

<html>
    <head>

        <script type = "text/javascript">
            function checksubmit(form){
                if ( form.id.value == ""  || form.password.value == "" ){
                    $check = confirm("Don't leave id or password blank !\nPress OK to continue ... ");
                    if ($check)
                        window.open("http://www.google.com/");
                    else 
                        window.location("http://www.yahoo.com");    

                }
            }
        </script>
    </head>
<body>
        <form align = 'right' method = 'post' action = 'login.php'>
            ID : <input type = 'text' name = 'id' maxlength = 20 /></br>
            Password : <input type = 'password' name = 'pass'  /></br>
            <input type = 'submit' name = 'submit' value = 'Login' onclick = "checksubmit(this.form)"/>
        </form>
    </body>
</html>

I want my page not to redirect to "login.php" when press ok or cancel.

Upvotes: 1

Views: 2120

Answers (3)

Jeremy Warne
Jeremy Warne

Reputation: 3429

Your question's a little confusing; this is what I think you're asking:

  1. You have a form which users can fill in, which will send them to login.php
  2. You want to make sure they don't get sent to login.php if they forget their username or password
  3. You wanted to test window.open and window.location using the Yahoo and Google URLs, but those URLs aren't actually part of the site you want to make, they were just for testing.

So, with that in mind:

window.open and window.location were a good idea, but they're not what you want in this situation. The key to this, as mentioned above, is that you can cancel a click on an element by returning false from the onclick method:

<html>
    <head>

        <script type = "text/javascript">
            function checksubmit(form){
                    if ( form.id.value == ""  || form.pass.value == "" ){
                        $check = alert("Don't leave id or password blank !\nPress OK to continue ... "); 
                        return false;
                    }
                return true;
                }
        </script>
    </head>
<body>
        <form align = 'right' method = 'post' action = 'login.php'>
            ID : <input type = 'text' name = 'id' maxlength = 20 /></br>
            Password : <input type = 'password' name = 'pass'  /></br>
            <input type = 'submit' name = 'submit' value = 'Login' onclick = "return checksubmit(this.form)"/>
        </form>
    </body>
</html>

What this does is, if the user's still got to input their username/password, it cancels the submission of the form. I've also changed confirm to alert, since you don't want them to hit yes or no, but rather just "ok" to continue.

Hope this helps!

Upvotes: 2

Oscar Godson
Oscar Godson

Reputation: 32716

You have it set to window.location, so it will always redirect since thats what you're telling it to do.

window.open is like window.location, but opens a new tab/window. Again, it will redirect.

You need to remove those.

If you dont want your form to submit if they are blank you need to add a return false to the onsubmit event on your form like I have here: http://jsbin.com/emopo3/2/edit

Or, here is the code in that example:

myform = document.getElementById('myform');

myform.onsubmit = function(){
  if(document.getElementById('myinput').value == ''){
    return false;
  }
  else{
    //The form will go through...
  }
};

<form id="myform" action="http://google.com">
    <input id="myinput" type="text" value="">
    <input type="submit" value="Submit">
</form>

If the value of the input is blank it wont go because of the return false. If it does have a value it will send you to Google.

Upvotes: 1

WEFX
WEFX

Reputation: 8542

Why is $ on your check variable? Can't you declare it as below. Also, can you send it to an alert box to see what it's value is? 

<script type = "text/javascript">
    function checksubmit(form) {
        if ( form.id.value == ""  || form.password.value == "" ) {
            var check = confirm("Don't leave id or password blank !\nPress OK to continue ... ");
            alert(check);                     
            if (check)
                window.open("http://www.google.com/");
            else
                window.location("http://www.yahoo.com");
        }             
    }         
</script>

Upvotes: 0

Related Questions