Question

我需要通过单击表单外部的按钮来提交表单。这是简单的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

    <script type="text/javascript">
        $(function () {
            $("#buy-button").on("click", function () {
                $("#refresh-form").submit(function () {
                    alert('test');

                });

            });
        });
    </script>

</head>
<body>
<header>
    header
</header>


<div id="main-div">

</div>

</div>

<div id="navigation-div">
    <form id="refresh-form" action="test.php">
        <button id="map-button">Refresh</button>
    </form>

    <button id="buy-button">Buy</button>

</div>


<footer>
    footer
</footer>
</body>
</html>

当我单击buy-button时，它不会刷新页面。我想念什么？假设我在表单中有一个按钮列表，其中的按钮类型为button，如果我可以成功提交表单，无论如何我将获得为每个按钮设置的所有值，或者仅获得该按钮的类型已设置为submit？

Answer 1

我肯定会这样使用trigger：

        $(function () {
            $("#buy-button").on("click", function () {
                $("#refresh-form").trigger('submit');
            });
        });

摘自submit()上的jQuery文档：

可以通过单击明确的<input type="submit">，<input type="image">或<button type="submit">来提交表单，或在某些表单元素具有焦点时按Enter。

在我看来，手动触发表单提交是一种更好，可行的方法。

Answer 2

这里是工作示例我们将使用Ajax

<form id="sortContentImagesForm" method="PATCH" action="/">
    <div id="sortContentImages">
    </div>
</form>

<button id="submit-sorted-images" class="btn btn-success btn-sm"><i class="fa fa-check"></i>Submit Sorted
    Images</button>

<script>
    $(document).on('click', '#submit-sorted-images', function (e) {
        $("#sortContentImagesForm").submit(); // Submit the form
    });


    $(document).on('submit', "#sortContentImagesForm", function (e) {
        e.preventDefault(); // avoid to execute the actual submit of the form.

        var form = $(this);
        var url = form.attr('action');
        var type = form.attr('method');

        $.ajax({
            type: type,
            url: url,
            data: form.serialize(), // serializes the form's elements.
            success: function (payload) {
                toastr.success("Updated Successfully");
            },
            error: function (request, status, error) {
                toastr.error(request.responseText);
            }
        });
    });
</script>

Answer 3

您可以在不使用JavaScript的情况下实现所需的功能。如果您在button标记中设置了form属性，即使它位于表单之外，它也将作为“提交”按钮起作用：

<form id="refresh-form" action="test.php">
    <button id="map-button">Refresh</button>
</form>

<button id="buy-button" form="refresh-form">Buy</button>

jQuery-通过单击按钮提交表单

3 个答案: