使用PHP和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. 我正在尝试使用JavaScript和PHP编写一个简单的登录页面，以帮助验证用户输入值与数据库中的值。

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... 可能其中有很多错误，对此我深表歉意。我编写的PHP代码来自我在网络上找到的其他登录页面的集合，而我只是几天前才开始学习JavaScript ...

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: 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 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: 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);
?>

Answer 1

Your fields are cleared as the submit button reloads the page. 当“提交”按钮重新加载页面时，您的字段将被清除。 Use preventDefault(); 使用preventDefault（）; to stop the submit from happening as you want to submit the data yourself using ajax. 阻止提交时发生，因为您想自己使用ajax提交数据。

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

Please do not store passwords as plain text in databases, use password_hash() and password_verify(). 请不要将密码以纯文本格式存储在数据库中，请使用password_hash（）和password_verify（）。 The MySQL Version you use is deprecated, please use MySQLi or PDO. 您使用的MySQL版本已过时，请使用MySQLi或PDO。 There is no type='username', use 'text'. 没有type ='username'，请使用'text'。 You call "check(this.form)" from the submit button, but you already bind the jQuery handler to the submit event using js. 您可以通过“提交”按钮调用“ check（this.form）”，但是您已经使用js将jQuery处理程序绑定到了提交事件。 If you want to select elements by there ID in jQuery, instead of input[id=username], use #username 如果要通过jQuery中的ID选择元素，而不要输入[id = username]，请使用#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. 我总是建议从一个非常基本的布局开始，打印出所有信息（在js中使用console.log或alert，在php中使用echo），然后进行n步，直到获得工作代码。

Answer 2

You read out the wrong input fields in your JS and remove the $ in your data string which will send via post. 您在JS中读取了错误的输入字段，并删除了将通过邮寄发送的数据字符串中的$ 。

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. 您还忘记了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>

Answer 3

You have done too many mistakes in HTML and Javascript coding: 您在HTML和Javascript编码中犯了太多错误：

<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: 比在您的JavaScript代码中：

$(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;
});
});

Answer 4

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: 在HTML中，名称为“ username”的输入的“ tpye”属性应为“ text”，并且您忘记了在“ id”属性后关闭引号：

<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. 在您的Javascript中，您好像使用了jQuery，但看不到您在其中包含库的地方。

The javascript selectors for IDs should be defined like this: ID的javascript选择器应按以下方式定义：

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

Keep in mind that there could be more things that I haven't notice. 请记住，可能还有更多我没有注意到的事情。

Answer 5

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" ). 从我看到的您要使用AJAX的角度来看，请尝试仅使用一个带有onclick事件的简单按钮（ type="button" ）。

Answer 6

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. 当您单击表单内的“提交”按钮时，浏览器会自动发布您的数据，您要做的是防止这种默认行为，以便它实际上使用您的JS代码。

change 更改

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

for 对于

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

使用PHP和JavaScript，“提交”按钮不适用于登录表单

问题描述

6 个解决方案

解决方案1
1 已采纳 2015-07-30 08:36:45

解决方案2
0 2015-07-30 08:24:46

解决方案3
0 2015-07-30 08:28:18

解决方案4
0 2015-07-30 08:29:12

解决方案5
0 2015-07-30 08:31:12

解决方案6
0 2015-07-30 08:32:52

使用PHP和JavaScript，“提交”按钮不适用于登录表单

问题描述

6 个解决方案

解决方案1 1 已采纳 2015-07-30 08:36:45

解决方案2 0 2015-07-30 08:24:46

解决方案3 0 2015-07-30 08:28:18

解决方案4 0 2015-07-30 08:29:12

解决方案5 0 2015-07-30 08:31:12

解决方案6 0 2015-07-30 08:32:52

解决方案1
1 已采纳 2015-07-30 08:36:45

解决方案2
0 2015-07-30 08:24:46

解决方案3
0 2015-07-30 08:28:18

解决方案4
0 2015-07-30 08:29:12

解决方案5
0 2015-07-30 08:31:12

解决方案6
0 2015-07-30 08:32:52