Submit button not working on login form, using PHP and JavaScript

Question

I am trying to code a simple login page using JavaScript and PHP to help validate the user input values with the values in a database.

However, my submit button doesn't seem to do anything... it just clears the fields.

Here is my code. There are probably MANY errors in it and I apologize for that... the PHP code I wrote is from a collection of other login pages I found on the web and I only started learning JavaScript a couple days ago...

EDIT: I have updated the code based on the mistakes that you guys pointed out. The log in button now no longer refreshes but instead doesn't do anything. I will try to figure it out or start from scratch since there is so much code that I don't understand, haha.

login.html:

`<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <title>Login</title>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>Login</h1>
        </div>
    </div>

    <div class="form">
    <form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
  <input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
  <div class="checkbox">
    <label>
      <input type="checkbox">Remember me
    </label>
  </div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
  <input id="submit" type="submit" class="btn btn-default" value="Log in">
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jQuery.md5.js"></script>
    <script src="login.js"></script>
    </div>
</body>
</html>'

login.js

$(document).ready(function(){
    $("form").on("submit", function(e){
    e.preventDefault();{

        var username = $('#inputUsername3').val();
        var password = $('#inputPassword3').val();
        var newPw = $.md5(password);

        if (username != "" && password !="") {
            $.ajax ({
            url: "doLogin.php",
            type: "POST",
            async: false,
            data: "$username="+username+"&password="+newPw,
            success: function(result) {
                window.open(success.html);
            }
            });
        } else {
            alert("Please enter a username and password.");
        }
        return false;
    });
});

doLogin.php:

  <?php
$host="localhost";
&username="";
$password="";
$db_name="atasgtsar";
$tbl_name="members";

$connection = 
mysqli_connect("$host", "$username", "$password")or die("Unable to connect.");
mysqli_select_db("$db_name");

$myUsername=$_POST['username'];
$myPassword=$_POST['password'];

$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysqli_real_escape_string($myusername);
$mypassword = mysqli_real_escape_string($mypassword);
$sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";
$result=mysqli_query($sql);

$count=mysqli_num_rows($result);

if ($count == 1) {
  session_register("myusername");
  session_register("mypassword");
}
else {
  echo "Wrong username or password.";
}

mysqli_close($connection);
?>

Deprecated mysql* [Please, don't use mysql_* functions in new code.](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) They are no longer maintained and are officially deprecated. Use mysqli or PDO — PHPhil, Jul 30 '15 at 08:23

Alexander · Accepted Answer · 2015-07-30T08:45:22.887

Your fields are cleared as the submit button reloads the page. Use preventDefault(); to stop the submit from happening as you want to submit the data yourself using ajax.

$("form").on("submit", function(e){
    e.preventDefault();
    //...

Please do not store passwords as plain text in databases, use password_hash() and password_verify(). The MySQL Version you use is deprecated, please use MySQLi or PDO. There is no type='username', use 'text'. You call "check(this.form)" from the submit button, but you already bind the jQuery handler to the submit event using js. If you want to select elements by there ID in jQuery, instead of input[id=username], use #username

Also, there sure are more mistakes in these codes. I would always recommend to start with an extremely basic layout, print out all information (in js using console.log or alert and in php using echo) and then go n small steps, until you got your working code.

score 0 · Answer 2 · answered Jul 30 '15 at 08:24

You read out the wrong input fields in your JS and remove the $ in your data string which will send via post.

Here is the correct version.

$(document).ready(function(){
$("#submit").click(function(){

var username = $('input[id=inputUsername3]').val();
var password = $('input[id=inputPassword3]').val();
var newPw = $.md5(password);

if (username != "" && password !="") {
    $.ajax ({
    url: "doLogin.php",
    type: "POST",
    async: false,
    data: "username="+username+"&password="+newPw,
    success: function(result) {
        alert(result)
    }
});
}
else {
    alert("Please enter a username and password.");
}
return false;
});
});

You have also forget the " on the end of the ID.

<div class="col-sm-10">
  <input type="username" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>

score 0 · Answer 3 · answered Jul 30 '15 at 08:28

You have done too many mistakes in HTML and Javascript coding:

<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <title>Login</title>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>Login</h1>
        </div>
    </div>
    <div class="form">
    <form class="form-horizontal">
    <div class="form-group">
<div class="col-sm-10">
  <input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
  <div class="checkbox">
    <label>
      <input type="checkbox">Remember me
    </label>
  </div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
  <input id="submit" type="submit" class="btn btn-default" value="Log in">
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jQuery.md5.js"></script>
    <script src="login.js"></script>
    </div>
</body>
</html>

Than in your javascript code:

$(document).ready(function(){
$("#submit").click(function(){

var username = $('#inputUsername3').val();
var password = $('#inputUsername3').val();
var newPw = $.md5(password);

if (username != "" && password !="") {
    $.ajax ({
    url: "doLogin.php",
    type: "POST",
    async: false,
    data: "$username="+username+"&password="+newPw,
    success: function(result) {
        alert(result)
    }
});
}
else {
    alert("Please enter a username and password.");
}
return false;
});
});

score 0 · Answer 4 · answered Jul 30 '15 at 08:29

0

In the HTML the "tpye" attribute of the input with name "username" should be "text" and you've forgot to close the quotes after the "id" attribute:

<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">

In your Javascript it seems like you use jQuery but I dont see where you include the library.

The javascript selectors for IDs should be defined like this:

var username = $('#inputUsername3').val();
var password = $('#inputPassword3').val();

Keep in mind that there could be more things that I haven't notice.

answered Jul 30 '15 at 08:29

Samuil Banti

1,735
1
15
26

Is `` not referencing the jQuery library??? I am very confused – khorik Jul 30 '15 at 08:47
Try to include it in the head of the document. – Samuil Banti Jul 30 '15 at 09:16

score 0 · Answer 5 · edited Jul 30 '15 at 09:09

0

Your fields are beeing cleared because your button is a submit button and because you are not redirecting the client to any other page, it refreshes it. From what I see you want to use AJAX, try to use just a simple button with a onclick event (type="button").

edited Jul 30 '15 at 09:09

dakab

5,379
9
43
67

answered Jul 30 '15 at 08:31

Liviu Mihaianu

289
3
13

score 0 · Answer 6 · answered Jul 30 '15 at 08:32

The browser automatically posts your data when you click in an submit button that is inside your form, what you have to do is to prevent this default behaviour so that it actually uses your JS code.

change

$("#submit").click(function(){

for

$("form").on("submit", function(e){
    e.preventDefault();

Submit button not working on login form, using PHP and JavaScript

6 Answers6