网站不会通过回车提交，但会使用提交按钮提交

Question

Site won't submit with enter, but will submit using the submit button I've tried changing my CSS, HTML and JavaScript all to no avail, please help me thank you so much!网站不会通过回车提交，但会使用提交按钮提交我试过更改我的 CSS、HTML 和 JavaScript 都无济于事，请帮助我，非常感谢！

here's my JavaScript这是我的 JavaScript

    $(document).ready(function(){
    $error = $('<center><h2 class = "text-danger">You are not a student here...<h2></center>');
    $error1 = $('<center><h2 class = "text-danger">Please fill up the field<h2></center>');
    $('#login').click(function(){
            $('#login').submit();
        $error.remove();
        $error1.remove();
        $student = $('#student').val();
        if($student == ""){
            $error1.appendTo('#error');
        }else{  
            $.post('check.php', {student: $student},
                function(show){
                    if(show == 'Success'){
                        $.ajax({
                            type: 'POST',
                            url: 'login.php',
                            data: {
                                student: $student
                            },
                            success: function(result){
                                $result = $('<h2 class = "text-warning">You have been login:</h2>' + result).appendTo('#result');
                                $('#student').val('');
                                setTimeout(function(){
                                    $result.remove();
                                }, 10000);
                            }
                        });
                    }else{
                        $('#student').val('');
                        $error.appendTo('#error');
                    }
                }
            )
        }   
    });
});

Here's my HTML, i've already tried editing everything i can, will be glad for you help please thank you so much!这是我的 HTML，我已经尝试编辑我所能做的一切，很高兴为您提供帮助，非常感谢！ Site won't submit with enter, but will submit using the submit button I've tried changing my CSS, HTML and JavaScript all to no avail, please help me thank you so much!网站不会通过回车提交，但会使用提交按钮提交我试过更改我的 CSS、HTML 和 JavaScript 都无济于事，请帮助我，非常感谢！

<head>
    <meta charset = "utf-8" />
    <title>Attendance Record System</title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
</head>
<body class = "alert-info">
    <nav class = "navbar navbar-inverse navbar-fixed-top">
        <div class = "container-fluid">
            <div class = "navbar-header">
                <p class = "navbar-text pull-right">ATTENDANCE SYSTEM</p>
            </div>
        </div>
    </nav>
    <div class = "container-fluid">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div class = "col-lg-3"></div>
        <div class = "col-lg-6 well">
            <h2>Attendance Login</h2>
            <br />
            <div id = "result"></div>
            <br />
            <br />
            <form enctype = "multipart/form-data">
                <div class = "form-group">
                    <label>Student ID:</label>
                    <input type = "text" id = "student" class = "form-control" required = "required"/>
                    <br />
                    <br />
                    <div id = "error"></div>
                    <br />
                    <button type = "button" id = "login" class = "btn btn-primary btn-block"><span class = "glyphicon glyphicon-login"></span>Login</button>

                </div>
            </form>
        </div>
    </div>
</body>
<script src = "js/jquery.js"></script>
<script src = "js/bootstrap.js"></script>
<script src = "js/login.js"></script>

Answer 1

Instead of代替

$('#login').click(function(){ ... })

you should use你应该使用

$('your_form_selector').submit(function(){ ... })

In this case you will handle all the possible form submitions (either done by button click or by hitting enter key)在这种情况下，您将处理所有可能的表单提交（通过单击按钮或按 Enter 键完成）

=== Update after form markup posted === === 表单标记发布后更新 ===

So, as I've told before you should use所以，正如我之前所说，你应该使用

$('form').submit(function(event) {
  event.preventDefault(); // I'd suggest to add this since you do your request asynchronously
  ...
})

and remove type="button" from your login button .并从您的登录按钮中删除type="button" 。 It prevents from submitting the form它阻止提交表单

网站不会通过回车提交，但会使用提交按钮提交

问题描述

1 个解决方案

解决方案1
2 2020-01-30 12:17:19

网站不会通过回车提交，但会使用提交按钮提交

问题描述

1 个解决方案

解决方案1 2 2020-01-30 12:17:19

解决方案1
2 2020-01-30 12:17:19