1

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..

2
  • What is wrong with just loading a new page? In general that is highly desirable when moving from the anonymous user to the logged in state.
    – Quentin
    Aug 30, 2016 at 11:54
  • You should learn how to use the label element properly. Without a for attribute or a form control inside it, a label is useless.
    – Quentin
    Aug 30, 2016 at 11:54

2 Answers 2

2

First of all use HTML5 forms like in the following example

<form id="my-form" method="post" action="">
    <label for="username">username</label>
    <input type="text" name="username" id="username" value="" placeholder="username" required>
    <label for"password">password</label>
    <input type="password" name="password" id="password" value="" placeholder="password" required>
    <button type="submit">send me</button>
</form>

As you can see the input elements have now a required attribute. No user can submit the form now with empty input elements. So you don 't have to deal with javascript to validate the form. The label elements do have a for attribute, that fits to an id attribute to the belonging input elements.

Next you can set the javascript event listener on the form element.

<script>
    var form = document.getElementById('my-form'),
        password = document.getElementById('password');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        var data = new FormData(form);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://your.domain.tld/check-password.php');
        xhr.onload = function() {
            if (xhr.status === 200) {
                // if the response is json encoded
                var response = JSON.parse(xhr.responseText);

                if (response.message == 'valid') {
                    // redirect here
                }

                if (response.message == 'invalid') {
                    password.setCustomValidity('your password is not correct');
                }
            }
        }
        xhr.send(data); 
    });
</script>

This small piece of javascript code sets an submit event listener on the form element. As soon as the form is submitted successfully an ajax request is fired, which is sending the form data 'username' and 'password' to the 'check-password.php' file.

In your php file you could access the data as shown below:

<?php
    $username = $_POST['username'];
    $password = $_POST['password'];
?>

As you can see you don 't need jQuery or any other javascript framework for doing it. Keep in mind, that the code examples are examples and untested.

3
  • i get "error loading page" when i click "send me" button
    – Tony33
    Aug 30, 2016 at 13:41
  • As already written this is example code to show you how to do it. It is not ment to work as shown here. You have to do some changes before you can use this piece of code for your project. First you have to change the url for the ajax request. Giving you a fully working example is not the intention of stackoverflow. We 're here to help you - not to do your work.
    – Marcel
    Aug 30, 2016 at 14:25
  • of course i have a php part fully working, and i set it to print "valid" or "invalid". Tested and working. So what could be the problem?
    – Tony33
    Aug 30, 2016 at 15:50
1

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

4
  • just a minute i will post it @Tony33 Aug 30, 2016 at 11:36
  • @Tony33 I updated the answer please upvote the answer if you found useful Aug 30, 2016 at 11:46
  • it's not working, when i click the button to submit, nothing happens...
    – Tony33
    Aug 30, 2016 at 13:05
  • can u post a fiddel @Tony33 Sep 6, 2016 at 9:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.