Tony33 Tony33 - 3 months ago 13
HTML Question

Javascript form, send values to PHP and retrieve it

I'm trying to be the clearest possible.

Basically,I need a login using JavaScript in HTML page only. This because I have to use html pages only. I have a html form like below:

<form id="privateform" method="post" action="post.php"><label>insert password</label>
<input type="password" id="password" name="password">
<input type="submit" value="Login">
</form>


I need that if ( password submitted === password read from database by PHP) user is redirected to next page ON THE HTML page. How can I achieve this? Since what i'm having as result that my html page wants to save PHP result as JSON file..

Answer

for this u should use ajax , i am using a jquery library for this

<form onsubmit="false" id="login_form">
            <div class="login_box" id="login" method="post">
                <legend>LOGIN</legend>
                    <p id="alert"></p>
                    <input type="text" name="username" class="username" id="username" placeholder="USERNAME" required>

                    <input type="password" name="password" class="password" id="password" placeholder="PASSWORD" required>
                    <br>
                    <button type="button" name="login" id="login" class="login" onclick="proceed_login();"> Login </button>
                   <a href="fgotpassword"><input type="button" value="Forgot password ?" id="fp" class="fp"></a>
            </div>
               </form>

put the above code on the html page

and then the js code is

<script>
function proceed_login() {
    var username=document.getElementById('username').value;
    var password=document.getElementById('password').value;
    var alert=document.getElementById('alert');
    alert.innerHTML="processing...";
    if( !username || !password ){

        $("#login_form").effect( "shake", {times:2}, 200 );
       alert.innerHTML="please enter username and password";
       document.getElementById('login_form').reset();

    }else{
       $.post("http://yourloginurl",
          {
            username: username,
            password: password
          },
      function(data){  \\ getting the response and  parsing and validating it
         if (data=="ok") {  \\ on success response
            window.location="../dashboard";
         }else{ \\ on invalid credentials 
        alert.innerHTML="invalid username or password";

         }
      });
    }
}
</script>

in the login url u should provide the response to the request in my case the response is "ok"
the js code handles the response and do the further processing

and the backend php code is

if(isset($_POST['username']) && isset($_POST['password']) ){

if(checkdatabase($_POST['username'],$_POST['password'])){ \\ function to check values against database 
   \\start the session and set user
  echo "ok";
}else{
 echo  "false";
}

}else{
echo "false";
}


public function checkdatabase($username, $password){

if exists in database 
return true;
else
return false;
}

write ur database logic in checkdatabase function