Отправить форму, нажав на кнопку - PullRequest
Новая
       22

Отправить форму, нажав на кнопку

0 голосов
/ 13 июня 2019

Мне нужно отправить форму, нажав кнопку вне формы. Вот простая страница: 

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

Ответы [ 3 ]

1 голос
/ 13 июня 2019

Я бы наверняка использовал trigger вот так: 

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

Из документов jQuery на submit () :

Формы могут быть отправлены либо нажатием явной <input type="submit">, <input type="image">, либо <button type="submit">, или нажатием Enter, когда определенные элементы формы имеют фокус.

Мне кажется, что ручной запуск отправки формы - это лучший, работоспособный подход.

0 голосов
/ 14 июня 2019

Вы можете достичь того, что вы хотите, не используя JavaScript. Если вы установите атрибут form в теге button , он будет работать как кнопка отправки, даже если он находится вне формы: 

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

<button id="buy-button" form="refresh-form">Buy</button>
0 голосов
/ 13 июня 2019

Вот рабочий пример мы будем использовать 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>
...