【发布时间】：2013-11-25 05:10:10
【问题描述】：
我正在尝试提交一个我已经工作过的表单，但现在已经对其进行了修改以包含一个模态 jQuery UI 框，以便在用户按下“继续”之前它不会提交。我遇到了各种各样的问题，包括让表单保持直到按下该按钮，但我想我已经找到了解决方案，但是实施它，我得到了一个 SyntaxError ，我找不到它的来源.
在 kevin B 的帮助下，设法找到了表单正在提交的答案，但返回的 JSON 响应的格式不完全正确。响应是没有提交表单，所以问题仍然存在。
所以用提供的反馈更新了代码，现在需要找出表单没有提交的原因。我知道它与第二个功能有关，即无法识别已按下提交按钮，因此需要知道如何提交该表单数据而无需再次提交表单。
下面是新代码：
function submitData() {
$("#submitProvData").submit(function(event) {
event.preventDefault();
var gTotal, sTotal, dfd;
var dfd = new $.Deferred();
$('html,body').animate({ scrollTop: 0 }, 'fast');
$("#submitProvData input").css("border", "1px solid #aaaaaa");
$("#submitProvData input[readonly='readonly']").css("border", "none");
sTotal = $('#summaryTotal').val();
gTotal = $('#gptotal').val();
if(gTotal !== 'sTotal'){
$("#newsupinvbox").append('<div id="newsupinvdiagbox" title="Warning - Totals do not match" class="hidden"><p>Press "Continue", to submit the invoice flagged for attention.</p> <br /><p class="italic">or</p><br /> <p>Press "Correct" to correct the discrepancy.</p></div>') //CREATE DIV
//SET
$("#newsupinvdiagbox").dialog({
resizable: false,
autoOpen:false,
modal: true,
draggable: false,
width:380,
height:240,
closeOnEscape: false,
position: ['center',20],
buttons: {
'Continue': function() {
$(this).dialog('close');
reData();
}, // end continue button
'Correct': function() {
$(this).dialog('close');
return false;
} //end cancel button
}//end buttons
});//end dialog
$('#newsupinvdiagbox').dialog('open');
}
return false;
});
}
function reData() {
console.log('submitted');
$("#submitProvData").submit(function(resubmit){
console.log('form submit');
var formData;
formData = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "functions/invoicing_upload_provider.php",
data: formData,
async: false,
success: function(result) {
$.each($.parseJSON(result), function(item, value){
if(item == 'Success'){
$('#newsupinv_window_message_success_mes').html('The provider invoice was uploaded successfully.');
$('#newsupinv_window_message_success').fadeIn(300, function (){
reset();
}).delay(2500).fadeOut(700);
} else if(item == 'Error'){
$('#newsupinv_window_message_error_mes').html(value);
$('#newsupinv_window_message_error').fadeIn(300).delay(3000).fadeOut(700);
} else if(item == 'Warning'){
$('#newsupinv_window_message_warning_mes').html(value);
$('#newsupinv_window_message_warning').fadeIn(300, function (){
reset();
}).delay(2500).fadeOut(700);
}
});
},
error: function() {
$('#newsupinv_window_message_error_mes').html("An error occured, the form was not submitted");
$('#newsupinv_window_message_error').fadeIn(300);
$('#newsupinv_window_message_error').delay(3000).fadeOut(700);
},
cache: false,
contentType: false,
processData: false
});
});
}
【问题讨论】：
-
我严重怀疑您是否需要取消绑定/绑定事件。您可能只需要绑定一次事件而不是重新绑定它。
-
您能给我们提供一个 JSFiddle 吗？
-
基本上，绑定到提交事件，立即阻止默认，做任何需要的验证，然后打开对话框。单击对话框中的继续按钮时，使用
$(theform)[0].submit()强制表单提交，从而绕过jquery 绑定事件。 -
或者，更好的是，因为您使用 ajax 提交，所以完全删除延迟对象，只需将 ajax 移动到继续按钮的单击处理程序。似乎您正在使这种方式更复杂比它需要的。
-
“我收到一个 SyntaxError，我找不到它的来源。” 你是什么意思，你找不到它的来源？您必须能够看到行号。
标签： javascript jquery forms jquery-ui