Функция отправки jQuery не работает (внутренняя функция)

Question

У меня проблема с этим кодом jQuery. Это не работает, как ожидалось:

$('#select_dropdown').change ( function(){
    $('#form_to_submit').submit( function(event){
        $.post("list.php", { name: "John", time: "2pm" },
        function(data) {
            alert("Data Loaded: " + data);
        });
    });
});

Однако это работает:

$('#select_dropdown').change ( function(){
    $('#form_to_submit').submit();
});

Интересно, почему не работает внутренняя функция submit. Когда пользователь выбирает значение из раскрывающегося списка, форма должна быть отправлена. Второй набор кодов работает, но если я добавляю внутреннюю функцию для отправки, это не так.

По сути, я хочу сделать ajax-вызов после того, как пользователь выберет выпадающий список.

Answer 1

Согласно документации (http://api.jquery.com/submit/), submit() без параметров отправит вашу форму, но если вы включите аргументы, она свяжет событие submit с формой, но не отправит ее.

Таким образом, код, отправленный @Chris Fulstow, будет правильным способом отправки формы, но, поскольку ajax не является синхронным, функция продолжит работу без ожидания ответа, а затем предупреждение не будет отображаться.

Вы можете сделать это синхронно, но вы должны использовать $.ajax вместо $.post, потому что $.post не включает опцию async. В любом случае, я даю решение для вашей конкретной проблемы, но я думаю, что должен быть лучший способ сделать это.

$(function() {
    $('#select_dropdown').change(function() {
        $('#form_to_submit').submit();
    });

    $('#form_to_submit').submit(function(event) {
        $.ajax(
            url: "list.php",
            data: { name: "John", time: "2pm" },
            success: function(){
                alert("Data Loaded: " + data);
            },
            async:false,
        );
    });
});

Answer 2

Итак, проблема здесь в том, что в первом случае вы привязываете обработчик события к элементу, а во втором - запускаете его.Давайте рассмотрим первый случай:

$('#form_to_submit').submit(function(evt){ ... });

По сути, вы делаете что-то вроде

document.getElementById('form_to_submit').addEventListener(
    'submit',
    function(evt){...},
    false
);

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

$('#form_to_submit').submit(function(evt){ ... });

$('#select_dropdown').change(function(){
    $('#form_to_submit').submit();
});

Имейте в виду, что, как уже говорили другие люди, если ваше действие настроено на переход в другое место, вы можетея не вижу результатов обработчика связанных событий, поэтому вместо явного указания URL-адреса для вашего действия вам придется использовать что-то, чтобы форма не перемещалась куда-либо, например action="javascript:void(0)" или тому подобное.

код немного чище, вы можете извлечь ajax из безымянной функции и поместить его в именованную функцию и вызвать ее при изменении, чтобы она выглядела следующим образом.

var fetchList = function(){
    $.ajax(...);
};

$('#form_to_submit').submit(fetchList);
$('#select_dropdown').change(fetchList);

Я не запускал этот код,пожалуйста, извините за любые глупые синтаксические ошибки, которые я сделал.Но это должно помочь вам в этом.Удачи!:)

Answer 3

Вызов .submit в первом примере привязывает функцию к событию отправки в форме.Из подробного руководства :

.submit( handler(eventObject) )
обработчик (eventObject) Функция, выполняемая каждый раз, когда событие инициируется.

Вам нужно привязать свой обработчик отправки:

$('#form_to_submit').submit(function(event){ /*...*/ })

где-то еще и вызвать submit, как во втором примере.

Answer 4

Когда вы вызываете с аргументом обратного вызова submit( handler(eventObject) ), он будет только прикреплять обработчик события. Для запуска отправки формы вызовите submit() без аргументов:

$(function() {

    $('#select_dropdown').change(function() {
        $('#form_to_submit').submit();
    });

    $('#form_to_submit').submit(function(event) {
        $.post(
            "list.php",
            { name: "John", time: "2pm" },
            function(data) {
                alert("Data Loaded: " + data);
            }
        );
    });

});