Javascript 使用“取消”按钮单击“提交”按钮后防止表单提交
我有一个表单可以向后端提交值,但我希望有一个取消按钮来停止表单的提交Javascript 使用“取消”按钮单击“提交”按钮后防止表单提交,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,我有一个表单可以向后端提交值,但我希望有一个取消按钮来停止表单的提交 <form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm"> /* * parameters * */ <button type="submit" value="submit" id="SubmitButton">Submit</button> <button type="b
<form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm">
/*
*
parameters
*
*/
<button type="submit" value="submit" id="SubmitButton">Submit</button>
<button type="button" value="cancel" id="CancelButton">Cancel</button>
</form>
/*
*
参数
*
*/
提交
取消
有人能告诉我怎么做吗?嗯,这对你不管用吗
form (...) onsubmit="return false;"
您可以使用任意JS函数来代替“return false”。例如,这种方法的典型用途是表单验证。可以工作的解决方案:
var cancelObject = '';
$('#UploadForm').on('submit', function(e){
//prevent default submit
e.preventDefault();
//submit via ajax
cancelObject = $.post('upload.php', $( "#UploadForm" ).serialize());
});
$('#cancel_button').click(function(){
//Cancel the request
cancelObject.abort();
});
UNTESTET!-只有一个可行的想法….将
onsubmit
属性添加到按钮标签:
<代码>提交
如果返回的值为
true
,则会提交表单。js函数会询问用户是否要继续并提交或取消操作。尝试类似的操作。这是您的HTML:
<form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm">
<button type="submit" value="submit" id="SubmitButton">Submit</button>
<button type="button" id="CancelButton" disabled>Cancel</button>
</form>
这将使用API,因此请检查您的。这并不像中止提交那么简单。只要点击该按钮,就没有实际的方法知道有多少(如果有的话)数据已经被发送 web浏览器和web服务器不会在请求之间保持连接,因此停止脚本客户端并不意味着停止脚本服务器端 要中止该提交,您需要向服务器发送第二个请求,告知该请求,然后在服务器上,该请求可能已被保存,因此需要删除,如果是,则需要一些唯一的id来标识提交及其中止请求,因为它们将作为两个唯一的请求到达服务器端 在服务器上,可以设置一些规则,确定实际将其保存到数据库需要哪些数据以及需要多少数据。但是,如果一个用户只有1个图像,而另一个用户有3个图像,那么如何根据这些规则知道何时应该是“中止提交”呢 保存前的时间延迟可能是其他原因,此时可以接受中止,但同样,很难确保故障安全,并且无论如何都需要唯一id来识别请求 我想你最好的办法是保存它,因为我相信大多数用户都希望这样,如果第二个请求在某个时间范围内出现,它允许被删除 接受并作为一个开始将是一个好主意 在这两个类似的帖子中,你可能会找到额外的帮助
event.preventDefult()
问了这么多时间。@Parth Trivedi…我怀疑event.preventDefault在这种情况下是否有效。一旦单击“提交”按钮,表单将被发布,preventDefault将如何中途停止?您可以使用click
处理程序,具体取决于条件,您可以返回false
,它应该停止。如果您的意思是在处理请求时停止请求,那么这可能会对您有所帮助。您可以使用“中止”方法:我尝试了您的代码,尽管控制台中显示my upload.php已中止,但是脚本正在运行,并且值正在保存db@darcy可能是因为请求以毫秒为单位发生。您可以在客户端或服务器上添加人工油门吗?让它持续几秒钟。这就是为什么你不经常在“提交”按钮旁边看到“取消”按钮的原因。我不想询问用户的选项,我删除了此部分并尝试了,但如果没有用户输入,它将无法工作!。。这取决于变量决策的值。因此,如果不接受用户输入,表单提交每次都会被取消。这不会创建按钮。如果需要按钮,请使用Chris的解决方案。我的解决方案可以用于询问用户并接受输入,但按钮总是更好。我尝试了Chris sol,但问题是,它已经完全停止了表单提交,即使我单击d submit按钮,它也没有提交表单,我希望用户单击submit按钮,在dat之后,如果他希望停止脚本,cancel按钮应该停止表单提交代码,它甚至在“提交”按钮上也停止了表单的提交
<form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm">
<button type="submit" value="submit" id="SubmitButton">Submit</button>
<button type="button" id="CancelButton" disabled>Cancel</button>
</form>
$(function() {
var $form = $('#UploadForm');
var form = $form.get(0);
var $submit = $('#SubmitButton');
var $cancel = $('#CancelButton');
var xhr = null;
function cleanup() {
xhr = null;
$submit.removeAttr('disabled');
$cancel.attr('disabled', true);
}
function doneCallback() {
// your code for completed form submission goes here
// redirect the page or whatever you need to do
cleanup();
}
$cancel.on('click', function() {
if($cancel.attr('disabled')) {
return;
}
if(xhr instanceof XMLHttpRequest) {
xhr.abort();
}
cleanup();
})
$form.on('submit', function(event) {
event.preventDefault();
xhr = new XMLHttpRequest();
xhr.open($form.attr('method'), $form.attr('action'), true);
xhr.addEventListener('load', doneCallback);
$submit.attr('disabled', true);
$cancel.removeAttr('disabled');
xhr.send(new FormData(form));
return false;
});
});