暂停表单提交审定 [英] Pause form submission for validation
问题描述
我有一些形式，上传文件的iframe中。我想保持它的提交，直到我会检查它是否有效使用Ajax。我怎样才能做到这一点？我的code暂停提交并返回验证结果（目前只是一个虚函数返回结果：真），但是不执行提交操作。也是它正常，它需要约2秒，以获得响应200状态后，显示响应数据？
下面是我的html：
＆LT; DIV ID =消息的风格=背景：黑色;宽度：400像素，高度：80px;显示：无;颜色：白色;＆GT;
＆LT; / DIV＆GT;
＆LT; H1＆GT;提交＆LT; / H1＆GT;
＆LT;形式的行动={{UPLOAD_URL}}目标=upload_target方法=POSTID =file_upload_formENCTYPE =的multipart / form-data的＆GT;
{％render_upload_data upload_data％}
＆LT;表＆gt; {{形式}}＆LT; /表＆gt;
＆其中p为H.;
＆LT;输入类型=隐藏最大长度=64NAME =myfileid值={{myfileid}}＆GT;
＆所述; / P＆GT;
＆其中p为H.;
＆LT;输入类型=提交ID =file_upload_submitVALUE =提交/＆GT;
＆所述; / P＆GT;
＆LT; IFRAME ID =upload_targetNAME =upload_targetSRC =的风格=宽度：0;身高：0;边界：0px固体#FFF;＆GT;＆LT; / IFRAME＆GT;
＆LT; /形式GT;
记者：
$（函数（）{
$（'＃file_upload_submit）。点击（函数（五）{
即preventDefault（）;
变种fileUploadForm =的document.getElementById（'file_upload_form'）;
$阿贾克斯（{
键入：POST，
网址：'/神器/上传/签表/'，
数据：'富=酒吧'，
数据类型：JSON，
成功：功能（数据）{
如果（数据['结果'] ==真）{
$（＃消息）显示（）。
$（＃信息）淡入（400）。html的。（'＆LT;跨度＆GT;'+数据[信息] +'＆LT; / SPAN＆GT;'）;
的setTimeout（函数（）{
$（＃信息）。淡出（慢，函数（）{
$（＃信息）隐藏（）。
}）;
}，1500）;
$（'＃file_upload_form）。ATTR（目标，upload_target）。递交（函数（）{
警报（处理程序.submit（）调用。'）;
返回false;
}）;
}
其他{
$（＃消息）显示（）。
$（＃信息）淡入（400）。html的。（'＆LT;跨度＆GT;'+数据[信息] +'＆LT; / SPAN＆GT;'）;
的setTimeout（函数（）{
$（＃信息）。淡出（慢，函数（）{
$（＃信息）隐藏（）。
}）;
}，1500）;
返回false;
}
}
}）;
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;
和链接： http://ntt.vipserv.org/artifact/
修改
随着code以下我能够执行验证，那么当它的结果为正数的形式提交。现在，如果我硬code目标的形式，我的提醒不显示，我pretty的确定不进行上传（上传的不幸列表被刷新，每8小时SA我就知道它的工作中一些时间）。如果没有指定目标，文件上传与重定向使整个'提交'事件监听器被省略。
＆LT;脚本＆GT;
$（'＃fake_upload_submit）。点击（函数（五）{
即preventDefault（）;
变种fileUploadForm =的document.getElementById（'file_upload_form'）;
fileUploadForm.addEventListener（提交，函数（）{
警报（iframe中发）;
fileUploadForm.target ='upload_target';
}， 假）;
$阿贾克斯（{
键入：POST，
网址：'/神器/上传/签表/'，
数据：'富=酒吧'，
数据类型：JSON，
成功：功能（数据）{
如果（数据['结果'] ==真）{
$（＃消息）显示（）。
$（＃信息）淡入（400）。html的。（'＆LT;跨度＆GT;'+数据[信息] +'＆LT; / SPAN＆GT;'）;
的setTimeout（函数（）{
$（＃信息）。淡出（慢，函数（）{
$（＃信息）隐藏（）。
}）;
}，1500）;
fileUploadForm.submit（）;
}
其他{
$（＃消息）显示（）。
$（＃信息）淡入（400）。html的。（'＆LT;跨度＆GT;响应假LT; / SPAN＆GT;'）;
的setTimeout（函数（）{
$（＃信息）。淡出（慢，函数（）{
$（＃信息）隐藏（）。
}）;
}，1500）;
返回false;
}
}
}）;
返回false;
}）;
＆LT; / SCRIPT＆GT;
HTML：
＆LT; DIV ID =消息的风格=背景：黑色;宽度：400像素，高度：80px;显示：无;颜色：白色;＆GT;
＆LT; / DIV＆GT;
＆LT; H1＆GT;提交＆LT; / H1＆GT;
＆LT;形式的行动={{UPLOAD_URL}}方法=POST目标=ID =file_upload_formENCTYPE =的multipart / form-data的＆GT;
{％render_upload_data upload_data％}
＆LT;表＆gt; {{形式}}＆LT; /表＆gt;
＆其中p为H.;
＆LT;输入类型=隐藏最大长度=64NAME =myfileid值={{myfileid}}＆GT;
＆所述; / P＆GT;
＆其中p为H.;
＆LT;输入类型=提交风格=显示：无ID =true_upload_submitVALUE =提交/＆GT;
＆所述; / P＆GT;
＆LT; IFRAME ID =upload_targetNAME =upload_targetSRC =的风格=宽度：0;身高：0;边界：0px固体#FFF;＆GT;＆LT; / IFRAME＆GT;
＆LT; /形式GT;
＆其中p为H.;
＆LT;输入类型=提交ID =fake_upload_submitVALUE =提交/＆GT;
＆所述; / P＆GT;
在验证之后您注册一个新的提交事件处理程序，但没有什么提交表单，所以你将不得不再次单击该按钮来获得其提交
您可以只提交，而不是增加一个提交处理程序的形式如下：
。 $（'＃file_upload_form）ATTR（目标，upload_target）提交（）;
I have some form, which uploads file in an iframe. I'd like to hold it's submission until I'll check if it's valid with ajax. How can I do this ? My code pauses the submission and returns validation result (currently just a dummy function which returns 'result': 'true') but then the 'submit' action is not performed. Also Is it normal that it takes ~2s to show response data after getting response 200 status ?
Here's my html:
<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;">
</div>
<h1>Submit</h1>
<form action="{{upload_url}}" target="upload_target" method="POST" id="file_upload_form" enctype="multipart/form-data">
{% render_upload_data upload_data %}
<table>{{ form }}</table>
<p>
<input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" >
</p>
<p>
<input type="submit" id="file_upload_submit" value="Submit" />
</p>
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
Js:
$(function() {
$('#file_upload_submit').click(function(e){
e.preventDefault();
var fileUploadForm = document.getElementById('file_upload_form');
$.ajax({
type: "POST",
url: '/artifact/upload/check-form/',
data: 'foo=bar',
dataType: "json",
success: function(data){
if(data['result'] == "true"){
$("#message").show();
$("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
setTimeout(function(){
$("#message").fadeOut("slow", function () {
$("#message").hide();
});
}, 1500);
$('#file_upload_form').attr('target','upload_target').submit(function(){
alert('Handler for .submit() called.');
return false;
});
}
else{
$("#message").show();
$("#message").fadeIn(400).html('<span">'+data["message"]+'</span>');
setTimeout(function(){
$("#message").fadeOut("slow", function () {
$("#message").hide();
});
}, 1500);
return false;
}
}
});
return false;
});
});
</script>
and link: http://ntt.vipserv.org/artifact/
EDIT
With the code below I'm able to perform validation, then when it's result is positive form is submitted. Now if I hardcode target for form, my alert is not shown and I'm pretty sure that the upload is not performed (unfortunately list of uploads is refreshed each 8h sa I'll know if it worked in some time). If target is not specified, file is uploaded with redirect so the whole 'submit' event listener is ommitted.
<script>
$('#fake_upload_submit').click(function(e){
e.preventDefault();
var fileUploadForm = document.getElementById('file_upload_form');
fileUploadForm.addEventListener("submit", function() {
alert("sent in iframe");
fileUploadForm.target = 'upload_target';
}, false);
$.ajax({
type: "POST",
url: '/artifact/upload/check-form/',
data: 'foo=bar',
dataType: "json",
success: function(data){
if(data['result'] == "true"){
$("#message").show();
$("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
setTimeout(function(){
$("#message").fadeOut("slow", function () {
$("#message").hide();
});
}, 1500);
fileUploadForm.submit();
}
else{
$("#message").show();
$("#message").fadeIn(400).html('<span">Response false</span>');
setTimeout(function(){
$("#message").fadeOut("slow", function () {
$("#message").hide();
});
}, 1500);
return false;
}
}
});
return false;
});
</script>
html:
<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;">
</div>
<h1>Submit</h1>
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data">
{% render_upload_data upload_data %}
<table>{{ form }}</table>
<p>
<input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" >
</p>
<p>
<input type="submit" style="display:none" id="true_upload_submit" value="Submit" />
</p>
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
<p>
<input type="submit" id="fake_upload_submit" value="Submit" />
</p>
After the validation you register a new submit event handler, but there is nothing that submits the form, so you would have to click the button again to get it submitted.
You can just submit the form instead of adding a submit handler:
$('#file_upload_form').attr('target','upload_target').submit();
这篇关于暂停表单提交审定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
