Hey there! Let's break down why hitting the Enter key isn't submitting your login form, while clicking the button works perfectly. Here's what's going on and how to fix it:

The Root Causes #

• Your login button has type="button" — this type of button doesn't trigger the form's default submit behavior. When you press Enter in a form, browsers automatically fire the form's submit event, not a button click.
• Your JavaScript is only listening for the button's click event, not the form's submit event. So Enter key presses never trigger your login logic.
• There's an invalid line in your code: $('#login').submit(); — #login is the button, not the form, so this line does nothing at all.

Step-by-Step Fixes #

1. Update Your HTML #

• Add an id to your form so we can target it easily (e.g., id="loginForm").
• Change your button's type from button to submit — this makes it the form's official submit button, which the browser will recognize for Enter key presses.
• Fixed a small typo: the glyphicon class should be glyphicon-log-in, not glyphicon-login.

Modified HTML form section:

<form enctype="multipart/form-data" id="loginForm">
  <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="submit" id="login" class="btn btn-primary btn-block">
      <span class="glyphicon glyphicon-log-in"></span>Login
    </button>
  </div>
</form>

2. Rewrite Your JavaScript #

Instead of listening for the button's click event, listen for the form's submit event. We'll also prevent the default form submission (so the page doesn't refresh) and reuse your existing login logic.

Modified JavaScript:

$(document).ready(function(){
  const $error = $('<center><h2 class="text-danger">您不是本校学生...</h2></center>');
  const $error1 = $('<center><h2 class="text-danger">请填写该字段</h2></center>');

  // Listen for form submit (works for both button click AND Enter key)
  $('#loginForm').submit(function(event){
    // Prevent default page refresh
    event.preventDefault();
    
    $error.remove();
    $error1.remove();
    const $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){
              const $result = $('<h2 class="text-warning">您已登录：</h2>' + result).appendTo('#result');
              $('#student').val('');
              setTimeout(function(){
                $result.remove();
              }, 10000);
            }
          });
        } else {
          $('#student').val('');
          $error.appendTo('#error');
        }
      });
    }
  });
});

Why This Works #

• By listening to the form's submit event, we cover both scenarios: clicking the submit button AND pressing Enter (the browser triggers submit for both actions).
• Using event.preventDefault() stops the browser from reloading the page, which lets our AJAX submission work smoothly without interrupting the user experience.
• Changing the button to type="submit" tells the browser this is the primary action for the form, which aligns with default Enter key behavior across all browsers.

内容的提问来源于stack exchange，提问作者Latrell Cruz