如何防止jquery提交按钮刷新HTML页面？

Question

I have a login page where the user enters his username and password, when he submits this form the data is sent to php file for verifying the password.我有一个登录页面，用户在其中输入他的用户名和密码，当他提交此表单时，数据将发送到 php 文件以验证密码。 For the first time when the user enters data (I entered wrong details) the page shows "Invalid password...please try again".当用户第一次输入数据时（我输入了错误的详细信息），页面显示“密码无效...请重试”。

The second time when the user enters data (again I enter wrong details) the page just reloads.第二次当用户输入数据（我再次输入错误的详细信息）时，页面只是重新加载。 I am not able to understand why this is happening.我无法理解为什么会发生这种情况。 For more better understanding I have added a google drive link to a video showing the issue.为了更好地理解，我在显示问题的视频中添加了一个谷歌驱动器链接。

Link: Link to the video链接：视频链接

The html code: html代码：

<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
    <a class="navbar-brand" href="index.html">
        <img src="assets/rv.png">
        RV PUBLIC SCHOOL
    </a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="admin.html">Admin Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">Contact Us</a>
        </li>
    </ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center;  justify-content:center; display:flex ;" >
<div class="row padding">
    <div class="card border-dark" >
        <div class="card-header" align="center">
            <img src="assets/rv.png">
            <h5>Admin Sign In</h5>
        </div>
        <div class="card-body" id="admin-signin-card">
            <form id="admin-signin">
                <div class="form-group">
                    <label>Username</label>
                    <input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
                </div>
                <div class="form-group">
                    <a href="#" class="text-primary">Forgot Password?</a>
                </div>
                <div class="form-group" >
                    <input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<footer>
<div class="container-fluid padding">
    <h1  align="center">About Us</h1>
    <p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
    <h2 align="center">Contact me</h2>
    <p align="center">Phone nnumber : 7019271367</p>
    <p align="center">Email id : goutambseervi@gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/admin_login_script.js"></script>
</html>

The javascript part: javascript部分：

$(document).ready(function () {
    $("#admin-signin").submit(function (e) {
        e.preventDefault();
        let admin_username = $("#admin_username").val();
        let admin_password = $("#admin_password").val();
        $.ajax({
            url: 'php_admin_login.php',
            data: {
                admin_username: admin_username,
                admin_password: admin_password
            },
            type: "POST",
            dataType: "json",
            success: function (response) {
                if (response === "OK") {
                    window.open("admin.html", "_self");
                }
                else {
                    document.getElementById('admin-signin-card').innerHTML += '<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
                    console.log("error shown");
                }
            }
        });
    });
});

I'm sure there is no problem with the php code so I'm not pasting here just to make the question more clearer.我确定 php 代码没有问题，所以我不会在这里粘贴只是为了让问题更清楚。 If you need the whole code of the project you can get it here: Github link to the project如果你需要项目的全部代码，你可以在这里获取： Github 项目链接

Answer 1

Try to use this.尝试使用这个。 Hope it will help希望它会有所帮助

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

Kindly let me know if it does not work.如果它不起作用，请告诉我。

Answer 2

    else {
        document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';

Adding to an element's .innerHTML replaces the whole content of the element;添加到元素的.innerHTML替换元素的全部内容； even the stuff that was already there will first be removed, and then re-created.即使已经存在的东西也将首先被删除，然后重新创建。

So your form itself is replaced with a new form, and therefor you completely lose your submit event handler you had attached to it as well.所以你的表单本身被一个新的表单替换，因此你完全失去了你附加到它的提交事件处理程序。

Your attempts at preventing the default event action fail, because you handler function simply doesn't get called any more at all, and just a normal form submit is performed now, which of course reloads the page.您阻止默认事件操作的尝试失败了，因为您的处理程序函数根本不再被调用，现在只执行正常的表单提交，这当然会重新加载页面。

You need to either add your event handler again after you replaced the parent container's innerHTML - or use event delegation to begin with.您需要在替换父容器的 innerHTML 后再次添加事件处理程序 - 或者使用事件委托开始。

Answer 3

尝试在$("#admin-signin").submit函数的末尾return false而不是preventDefault()

Answer 4

This is happening due to how you handle errors.这是由于您处理错误的方式而发生的。 By using document.getElementById('admin-signin-card').innerHTML += ... you are effectively reloading your form meaning that you lose the event listener.通过使用document.getElementById('admin-signin-card').innerHTML += ...你正在有效地重新加载你的表单，这意味着你失去了事件监听器。 You can either adjust how you display the error or adjust the event listener.您可以调整显示错误的方式或调整事件侦听器。

I would recommend changing how you display the error.我建议更改显示错误的方式。

I have removed the request in the example below but it's the same idea:我已经删除了下面示例中的请求，但它的想法是一样的：

 $(document).ready(function () { $("#admin-signin").submit(function (e) { e.preventDefault(); let admin_username = $("#admin_username").val(); let admin_password = $("#admin_password").val(); let response = "no"; if (response === "OK") { window.open("admin.html", "_self"); } else { document.getElementById('admin-signin-card-error').innerHTML ='<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>'; console.log("error shown"); } }); });

 <!DOCTYPE html> <html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 "> <title>RVPS Elections</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark padding "> <div class="container-fluid"> <a class="navbar-brand" href="index.html"> <img src="assets/rv.png"> RV PUBLIC SCHOOL </a> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="admin.html">Admin Login</a> </li> <li class="nav-item"> <a class="nav-link" href="">About</a> </li> <li class="nav-item"> <a class="nav-link" href="">Contact Us</a> </li> </ul> </div> </nav> <div class="container"> <p align="center" class="lead">Get administrator access by entering correct details</p> </div> <div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;"> <div class="row padding"> <div class="card border-dark"> <div class="card-header" align="center"> <img src="assets/rv.png"> <h5>Admin Sign In</h5> </div> <div class="card-body" id="admin-signin-card"> <form id="admin-signin"> <div class="form-group"> <label>Username</label> <input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required> </div> <div class="form-group"> <label>Password</label> <input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required> </div> <div class="form-group"> <a href="#" class="text-primary">Forgot Password?</a> </div> <div class="form-group"> <input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg"> </div> </form> <div id="admin-signin-card-error"></div> </div> </div> </div> </div> <footer> <div class="container-fluid padding"> <h1 align="center">About Us</h1> <p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p> <h2 align="center">Contact me</h2> <p align="center">Phone nnumber : 7019271367</p> <p align="center">Email id : goutambseervi@gmail.com</p> </div> </footer> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> </html>

Answer 5

like @CBroe mentioned, the problem is caused by innerHTML.就像@CBroe 提到的，问题是由innerHTML 引起的。

i moved the content of innerHTML to the form, and give it display none, when there an error i show the error with .show()我将innerHTML的内容移动到表单中，并给它显示none，当出现错误时，我用.show()显示错误

i changed the ajax url and data Type for testing purpose.为了测试目的，我更改了 ajax url 和数据类型。

 $(document).ready(function () { $("#admin-signin").on('submit', function (event) { event.preventDefault(); let admin_username = $("#admin_username").val(); let admin_password = $("#admin_password").val(); $.ajax({ url: 'https://jsonp.afeld.me/?url=https://jsonview.com/example.json', type: "POST", dataType: "jsonp", data: { admin_username: admin_username, admin_password: admin_password }, success: function (response) { if (response === "OK") { window.open("admin.html", "_self"); } else { $('.alert.alert-danger').show(); console.log("error shown"); } } }); }); });

 <!DOCTYPE html> <html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 "> <title>RVPS Elections</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> </head> <body> <div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" > <div class="row padding"> <div class="card border-dark" > <div class="card-header" align="center"> <h5>Admin Sign In</h5> </div> <div class="card-body" id="admin-signin-card"> <form id="admin-signin"> <div class="form-group"> <label>Username</label> <input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required> </div> <div class="form-group"> <label>Password</label> <input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required> </div> <div class="form-group"> <a href="#" class="text-primary">Forgot Password?</a> </div> <div class="form-group" > <input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg"> </div> <div class="alert alert-danger" style="display: none;"><h5>Error occured...Please try again</h5></div> </form> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> </body> </html>

如何防止jquery提交按钮刷新HTML页面？

问题描述

5 个解决方案

解决方案1
1 2018-08-16 13:47:15

解决方案2
1 已采纳 2018-08-16 13:54:18

解决方案3
0 2018-08-16 13:42:03

解决方案4
0 2018-08-16 13:54:17

解决方案5
0 2018-08-16 14:08:07

如何防止jquery提交按钮刷新HTML页面？

问题描述

5 个解决方案

解决方案1 1 2018-08-16 13:47:15

解决方案2 1 已采纳 2018-08-16 13:54:18

解决方案3 0 2018-08-16 13:42:03

解决方案4 0 2018-08-16 13:54:17

解决方案5 0 2018-08-16 14:08:07

解决方案1
1 2018-08-16 13:47:15

解决方案2
1 已采纳 2018-08-16 13:54:18

解决方案3
0 2018-08-16 13:42:03

解决方案4
0 2018-08-16 13:54:17

解决方案5
0 2018-08-16 14:08:07