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
– gaetanoM

2019-06-13 18:45:47 +00:00
Commented Jun 13, 2019 at 18:45 — gaetanoM
– gaetanoM, Commented Jun 13, 2019 at 18:45

Tony M · Accepted Answer · 2019-06-13 18:49:06Z

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, 2019 at 18:49

answered Jun 13, 2019 at 18:46

Tony M

7414 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Antonio Santoro Over a year ago

@gaetanoM what do you mean?

Antonio Santoro Over a year ago

by submitting this way there is no POST request

Tony M Over a year ago

@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 (<form action="POST | GET e.t.c". Unless I misunderstood what you're saying. Also, see: stackoverflow.com/questions/25640906/…

Markus Azer · Accepted Answer · 2019-06-13 18:49:29Z

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>

mgarcia · Accepted Answer · 2019-06-13 21:06:50Z

0

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>

answered Jun 13, 2019 at 21:06

mgarcia

6,3763 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Submit form by click on button

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related