使用取消按钮

时间:2015-12-17 13:02:34

标签: 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="button" value="cancel" id="CancelButton">Cancel</button>
</form>

任何人都可以告诉我们该怎么做?

5 个答案:

答案 0 :(得分:4)

可以工作的解决方案:

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! - 只有一个可行的想法....

答案 1 :(得分:1)

尝试这样的事情。这是你的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>

这是你的jQuery和JavaScript:

$(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;
  });
});

这会使用FormData API,因此请检查您的browser support for that

答案 2 :(得分:0)

这并不像中止提交那么简单。只要点击该按钮,就没有实际的方法可以知道其数据的发送量(如果有的话)。

Web浏览器和Web服务器之间没有连接请求,因此停止脚本客户端并不意味着它会停止服务器端。

要中止该提交,您需要向服务器发送第二个请求,然后在服务器上,它可能已经保存,因此需要删除,如果是,则需要一些唯一ID两者都标识提交及其中止请求,因为它们将作为2个唯一请求到达服务器端。

在服务器上,设置一些规则,说明实际将数据保存到数据库所需的数据和数量,但是,如果一个用户只有1个图像而第二个有3个,那该怎么知道呢?应该是一个&#34;中止提交&#34;是否基于此类规则?

保存之前的时间延迟可能是其他原因,当可以接受中止时,但同样非常难以使故障安全,并且无论如何都需要唯一的ID来识别请求。

我想你最好的选择是保存它,因为我想相信大多数用户想要的,如果第二个请求在某个时间范围内,它就可以被删除。

接受并使用Patrick Roberts answer作为开始是一个好主意。

在这两篇类似的帖子中,您可能会找到其他帮助。

答案 3 :(得分:-1)

onsubmit属性添加到按钮标记: <button type="submit" value="submit" id="SubmitButton" onsubmit="return cancel()"> SubmitIt </button>

Javascript:
function cancel()
{
    var decision=null;

     alert("Press Y to submit or N to cancel");
      decision=prompt("Do you want to submit?","Y or N");
      if( decision.equals("Y"))
{
      return true;
      alert("Form has been submitted");

} 
     else if (decision.equals("N"))
{
    return false;
    alert("Form submission has been cancelled");

}
     else
{
    alert("wrong input.Re-submit the form.");
     return false;

}

}

如果返回的值为true,将提交表格.js函数会询问用户是否要继续并提交或取消操作。

答案 4 :(得分:-2)

嗯,为你赢得这项工作?

form (...) onsubmit="return false;"

代替&#39;返回false&#39;你可以使用你想要的任何JS功能。例如,表格验证的典型用途是。