Отправить форму при изменении элементов
В jQuery, если я назначу class=auto_submit_form форме, она будет отправляться при каждом изменении любого элемента со следующим кодом:
/* automatically submit if any element in the form changes */
$(function() {
$(".auto_submit_form").change(function() {
this.submit();
});
});
Однако, если я хочу, чтобы форма отправлялась только при изменении указанных элементов:
/* submit if elements of class=auto_submit_item in the form changes */
$(function() {
$(".auto_submit_item").change(function() {
$(this).parents().filter("form").submit();
});
});
Я только изучаю jQuery. Есть лучший способ сделать это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
/* submit if elements of class=auto_submit_item in the form changes */
$(function() {
$(".auto_submit_item").change(function() {
$("form").submit();
});
});
Предполагается, что у вас есть только одна форма на странице. Если нет, вам нужно будет выбрать форму, которая является предком текущего элемента, используя $(this).parents("form").submit().
используя "this.form.submit ();" было бы даже лучше, потому что вам не нужно было бы создавать экземпляр объекта jQuery.
@tvanfosson какие-нибудь советы, как предотвратить обновление страницы с помощью этого решения? preventDefault() и return false не работают :(
@Toon этот код заставляет форму выполнять обычную отправку. Если вы не хотите, чтобы страница обновлялась, сериализуйте форму и отправьте ее через AJAX. var $form = $('form'); var data = $form.serialize(); $.ajax($form.attr('action'), { data: data, type: 'POST' }).done(...);
Вы можете использовать выражение в методе parents() для фильтрации родителей. Следовательно, это могло бы быть немного более эффективным:
/* submit if elements of class=auto_submit_item in the form changes */
$(".auto_submit_item").change(function() {
$(this).parents("form").submit();
});
Я бы дал форме идентификатор:
$(".auto-submit-item").change(function() {
$("form#auto-submit").submit();
});
Я придумал общий подход к этому:
$('.autoSubmit, .autoSubmit select, .autoSubmit input, .autoSubmit textarea').change(function () {
const el = $(this);
let form;
if (el.is('form')) { form = el; }
else { form = el.closest('form'); }
form.submit();
});
Все элементы формы:
<form class = "autoSubmit">
<select><option>1</option><option>2</option></select>
</form>
Только отдельные элементы
<form>
<select class = "autoSubmit"><option>1</option><option>2</option></select>
</form>
это специальный плагин, который вы используете, или это какие-то встроенные функции jQuery, о которых я никогда не слышал?