使用取消按钮单击提交按钮后阻止表单提交[重复]

Posted 2023-05-09

【中文标题】使用取消按钮单击提交按钮后阻止表单提交[重复]

【英文标题】：Prevent form submission after submit button has been clicked using cancel button [duplicate]

【发布时间】：2016-03-23 23:05:56

【问题描述】：

我有一个向后端提交值的表单，但我希望有一个取消按钮来停止提交表单。

<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>

谁能告诉我怎么做？

【问题讨论】：

使用event.preventDefult();问了很多次。

@Parth Trivedi...我怀疑 event.preventDefault 在这种情况下是否会起作用。单击提交按钮后，表单将被发布，preventdefault 如何在中途停止它？？

你可以有一个click 处理程序，根据条件，你可以return false 它应该停止。

这可能会帮助你***.com/questions/27752020/…

如果您的意思是在处理请求时停止请求，您可以使用“中止”方法：developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#abort()

【参考方案1】：

可以工作的解决方案：

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

);

未经测试！ - 只有一个可行的想法....

【讨论】：

试过你的代码，即使在提交按钮上也停止提交表单

【参考方案2】：

试试这样的。这是您的 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。

【讨论】：

我尝试了你的代码，虽然它在控制台中显示我的 upload.php 已中止，但脚本正在运行并且值正在保存在数据库中

@darcy 可能是因为请求以毫秒为单位发生。您可以在客户端或服务器上添加人工限制吗？让它持续几秒钟。这就是您不会经常在“提交”按钮旁边看到“取消”按钮的原因。

【参考方案3】：

这并不像中止提交那么简单。一旦单击该按钮，就无法知道其数据已发送多少（如果有的话）。

网络浏览器和网络服务器不会在请求之间保持连接，因此停止脚本客户端并不意味着它会停止服务器端。

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

在服务器上，可以设置一些规则来实际将其保存到数据库中需要什么以及需要多少数据，但是，如果一个用户只有 1 张图像，而另一个用户只有 3 张图像，如何知道何时根据此类规则，是否应该是“中止的提交”？

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

我想你最好的办法是保存它，因为我相信大多数用户都希望这样，如果在特定时间范围内有第二个请求，它允许被删除。

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

在这 2 个类似的帖子中，您可能会找到更多帮助。

onSubmit returning false is not working Onsubmit still submits when returning false

【参考方案4】：

给按钮标签添加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函数询问用户是继续提交还是取消操作。

【讨论】：

我不想要询问用户的选项，我删除了这部分并尝试了但没有用

没有用户输入是不行的！..这取决于变量decision的值。所以，如果你不接受用户输入，表单提交每次都会被取消。

这不会创建按钮。如果你想要一个按钮，请使用 Chris 的解决方案。我的解决方案可用于询问用户并接受输入，但按钮总是更好。

我试过 Chris sol，但其中的问题是它已经完全停止了表单提交，即使我点击 d submit 按钮它也没有提交表单，我希望用户点击提交按钮并且在 dat 之后，如果他希望停止脚本，取消按钮应该会停止表单提交

【参考方案5】：

嗯，这不适合你吗？

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

你可以使用任何你想要的JS函数来代替'return false'。例如，典型的用途是表单验证。