Submit form by click on button

Question

I need to submit a form by clicking a button outside the form. Here is the simple page:

<!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>

When I click the buy-button it won't refresh the page. What am I missing? Suppose that I have a list of buttons inside a form, which of them has button as type, if I can successfully submit the form will I get all the values set for each button anyway or will I get only the values of the button which type has been set as submit?

....$("#refresh-form").submit(); – gaetanoM Jun 13 '19 at 18:45 — gaetanoM, Jun 13 '19 at 18:45

Tony M · Answer 1 · 2019-06-13T18:49:06.817

1

I would certainly use trigger like this:

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

From jQuery docs on submit():

Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

It seems to me that manually triggering form submission is a better, workable approach.

edited Jun 13 '19 at 18:49

answered Jun 13 '19 at 18:46

Tony M

741
4
16

@gaetanoM what do you mean? – Antonio Santoro Jun 13 '19 at 18:52
by submitting this way there is no POST request – Antonio Santoro Jun 13 '19 at 19:11
1

@gaetanoM `$("#refresh-form").submit()` STILL does a `trigger`, i.e. `$("#refresh-form").trigger("submit")`. Is there a reason to not explicitly/directly call the trigger? And yes, it submits the form based on the request type (`
– Tony M Jun 13 '19 at 20:16
Good job. Thanks – gaetanoM Jun 13 '19 at 23:50

score 0 · Answer 2 · answered Jun 13 '19 at 18:49

Here is working example we gonna use 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>

score 0 · Answer 3 · answered Jun 13 '19 at 21:06

You can achieve what you want without using JavaScript. If you set the form attribute in the button tag, it will work as a submit button even if it is placed outside the form:

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

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

Submit form by click on button

3 Answers3