无法通过Ajax提交表单

Question

编辑

只要表单有效，下面的代码似乎就可以工作。

但如果不是这样(django表单中的clean方法(，表单的h1文本将被删除(？？？(，并且不会显示错误消息。。。

我猜一个空的popup.html是通过ajax返回的，因为没有按钮进行交互，所以什么都没有发生，但为什么h1文本被删除了。。。？？？

var prevent_edit = false;
var prevent = false;
// popup d'informations indiquant que la levée d'insue a déjà été faite 
// pour ce patient
$("#form_unblind_edit").submit(function (event) {
console.log('form_unblind_edit click - first')
console.log('prevent_edit - first', prevent_edit)
if (!prevent_edit) {
event.preventDefault();
}
});
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}

// affichage des informations sur le patient sélectionné pour la ré-allocation
$("#unblind_edit").on("click", function (event) {
console.log('click unblind edit');
var csrftoken = getCookie('csrftoken');
var patient = $("#id_pat").val();
$.ajax({
type: "POST",
url: '/unblind/already_unblind/',
data: {
csrfmiddlewaretoken: csrftoken,
'patient': patient,
},
dataType: 'html',
success: function (data) {
console.log('success');
// var prevent_edit = false;
$("#can_unblind").html(data);
$('#unblindconfirm').modal('show');
$('body').on('click', '#edit_button_OK', function (event) {
console.log('edit_button_OK')
$('#edit_button_OK').attr("disabled", "disabled");
prevent_edit = true;
console.log('prevent_edit', prevent_edit);
$("#form_unblind_edit").submit();
})
},
error: function (resultat, statut, erreur) {
console.log('error');
}
});
});

---

我需要一些关于ajax 弹出窗口的帮助

用户通过点击按钮完成表格并提交表格

我阻止使用event.preventDefault();提交以显示弹出窗口。

但我需要向数据库询问信息才能在弹出窗口中显示，所以我使用ajax查询

当ajax成功时，弹出窗口显示来自数据库的信息，我希望通过点击"提交表单；OK"；弹出的按钮

但我认为它失败了，因为事件(submit(被附加到一个按钮上，而这个按钮在页面加载时不在DOM中。。。

JS-

$(document).ready(function () {
var prevent_edit = false;
// prevent submission
$("#form_unblind_edit").submit(function (event) {
if (!prevent_edit) {
event.preventDefault();
}
});
// ajax query that display popup
$("#unblind_edit").on("click", function (event) {
var csrftoken = getCookie('csrftoken');
var patient = $("#id_pat").val();
$.ajax({
type: "POST",
url: '/unblind/already_unblind/',
data: {
csrfmiddlewaretoken: csrftoken,
'patient': patient,
},
dataType: 'html',
success: function (data) {
$("#can_unblind").html(data); //popup html attach to DOM
$('#unblindconfirm').modal('show');  //popup displayed
$('body').on('click', '#edit_button_OK', function (event) {
console.log('edit_button_OK'); // WORKING
prevent_edit = true;
$("#form_unblind_edit").trigger('submit');  //form submission = NOT WORKING
})
}
});
});

Answer 1

也许可以将表单中提交按钮的类型更改为"按钮"；

<button type="button">Submit</button>

这样，当用户单击提交时，提交操作不会执行，而是显示弹出窗口。然后，您应该能够使用JQuery提交表单。

$("#form_unblind_edit").trigger('submit');