Question

所以我有这个HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>To Do List</title>
        <link rel="stylesheet" type="text/css" href="todo style.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.min.js"></script>
        <script type="text/javascript" src="todo script.js"></script>
    </head>
    <body>
        <h2>To Do List</h2>
        <form name="checkListForm" id="checkListForm">
            <input type="text" name="checkListItem"/>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div class="list"></div>
    </body>
</html>`

and this jQuery:

`$(document).ready(function() {
    $('#checkListForm').keyup(function(e) {
        if(e.keyCode == 13){
        e.preventDefault();
            var toAdd = $('input[name=checkListItem]').val();
            $(".list").append('<div class="item">' + '<div class="xbox">' + 'X' + '</div>' +  toAdd + '</div>');
            $(".list").sortable();
        }
    });   
    $("#button").click(function() {
        var toAdd = $('input[name=checkListItem]').val();
        $(".list").append('<div class="item">' + '<div class="xbox">' + 'X' + '</div>' +  toAdd + '</div>');
        $(".list").sortable();
    });
    $(document).on('click', '.xbox', function() {
        $(this).parent().remove();
    });
});

出于某种原因，当我按下回车键（在Chrome中）时，表单不会提交;页面刷新。我尝试了各种解决方案，但没有一个能够解决问题。如何在按下回车时提交表单？

Answer 1

Enter已经是发布表单的默认操作：

＆＃13;

$('form').on('submit', function(event){
  event.preventDefault();
  alert('yes');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="get">
  
  <input type="text" name="test">
  <input type="submit" value="Press enter">

＆＃13;

Answer 2

请更改文件名，使用下划线（_）或连字符（ - ）代替空格，然后重试。

<script type="text/javascript" src="todo script.js"></script>

Answer 3

你应该有type =“submit”的按钮，将提交给指定的动作。 <button type="submit">Save</button>

使用回车键提交表单

3 个答案: