Onchange отправляет форму с ajax и без формы id

Моя страница состоит из таблицы, в которой каждая ячейка является формой. Я хочу, чтобы эти формы отправлялись при изменении значения ввода (onchange), но я не хочу, чтобы вся страница обновлялась, когда я это делаю.

Например, я хочу, чтобы пользователь мог ввести значение в одну ячейку, а затем TAB в следующую ячейку без потери фокуса, когда была отправлена первая форма (первая ячейка, которую они заполнили).

Я прочитал несколько страниц в Интернете об этом, но мне не нужны мои потребности, так как у меня есть еще одно ограничение. Формы, из которых состоит моя таблица, создаются через Django, поэтому все они имеют одинаковый идентификатор. Поэтому я не могу использовать id для выбора формы из скрипта (java).

Я пытаюсь использовать this.form или event.form или $ (this).form, но безрезультатно.

Вот как выглядят эти формы:

<form action="" method="POST" id="progress_form">
{% csrf_token %}
% 




</form>

И вот как выглядит мой сценарий:

function progressChange(e) {
 var form = e.form;
 var dataString = form.serialize();
 alert(dataString);
 $.ajax({
 type: "POST",
 url: $(form).attr( 'action' ),
 data: dataString,
 success: function() {
 alert("prout");
 },
 });
 }
1 ответ

Измените один и тот же идентификатор для нескольких полей и передайте этот объект функции progressChange()

<form action="" method="POST" id="progress_form">
{% csrf_token %}
% 




</form>

Получить текущий объект Родительский элемент, т.е. сформировать и сериализовать его:

function progressChange(obj) {
 var $form = $(obj).closest('form'); // OR var form = obj.from;
 var dataString = $form.serialize();
 alert(dataString);
 $.ajax({
 type: "POST",
 url: $(form).attr( 'action' ),
 data: dataString,
 success: function() {
 alert("prout");
 },
 });
 }

licensed under cc by-sa 3.0 with attribution.