HTML Forms two actions

Question

So generally I have a form whose action is a link that verifies the user's username and password (can't post the link does not belong to me) and if it's correct it gives me an "ok" or else a "no" How can I make it in a way that if yes it directs me to my index page and if no gives an error or reloads the page or something. Is their a way to do that the general html appearance is:

 <form method="post" action="https://***************/login">
        <label for="book">Username:</label>
        <input type="text" name="username" id="username" placeholder="Enter username">
        <label for="course">Password:</label>
        <input type="password" name="password" id="password" placeholder="Enter password">
        <input type="submit" value="Log in">
    </form>

so if I were to change it into the way I want it then the action should change into something like verify.php which would have the appearance of

<?php
    # how do I use an if for a link using the info that was input
    if($_POST["https://***************/login"]){
         #load index.html
 ?>
        <script type="text/javascript">
             window.location.href = 'index.html';
        </script>
<?php
    else{ 
        #load the page again
?>
        <script type="text/javascript">
             window.location.href = 'login.php';
        </script>
<?php        
     }
?>

I'm a bit new to php. So please help

Answer 1

There is a header to redirect, you have to put it in your php script :

header('Location: yoururl.com');

To record error from your script, you can set it in $_SESSION variables :

session_start(); // at the beginning of your script
$_SESSION['error'] = 'Password incorrect, please try again';

And so, in your other page, you can use something like :

if($_SESSION['error']) {
    echo $_SESSION['error']; // display error
    $_SESSION['error'] = ''; // delete it 
}

Answer 2

Being unable to edit the login verification file, I think your best option is to submit the form via ajax and handle its response with javascript, having your form like

<form method="post" action="" onsubmit="return false;">
    <label for="book">Username:</label>
    <input type="text" name="username" id="username" placeholder="Enter username">
    <label for="course">Password:</label>
    <input type="password" name="password" id="password" placeholder="Enter password">
    <input type="submit" value="Log in" onclick="btnAuthenticateUser();">
</form>

then, in plain javascript something like

<script type="text/javascript">
var xmlHttp;
function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}
function btnAuthenticateUser() {
    try {
        var username = document.getElementById('username');
        var pwd = document.getElementById('password');
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null) {
            alert("Your browser does not support AJAX!");
            return;
        }
        var url = 'https://***************/login?username=' + username.value + '&password=' + pwd.value;
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    if (xmlHttp.responseText == "ok") {
                        window.location = "index.html"; 
                    } else {
                        location.reload();
                    }
                }
                if (xmlHttp.readyState == 4) {
                    // LoadingPage
                }
            }
        }
        xmlHttp.open("POST", url, true);
        xmlHttp.send(null);
        if (xmlHttp.readyState == 1) {
            //LoadingPage
        }
    } catch (e) {
        alert(e.Message);
    }
}
</script>

or if you're using jQuery

function btnAuthenticateUser() {
    $.ajax({
        async: true,
        type: 'POST', 
        url: 'https://***************/login', 
        data: { username: $('#username').val(), password: $('#password').val()} 
    })
    .done(function (data) {
        if (data == "ok") {
            window.location = "index.html";
        }else{
            location.reload();
        }
    })
    .fail(function (jqxhr, textStatus, error) {
         GriterError(Global.FailTryAgain);
    });
}