使用取消按鈕單擊提交按鈕後防止表單提交

Question

我有一個向後端提交值的表單，但我希望有一個取消按鈕來停止提交表單。

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

任何人都可以請告訴它是如何做到的嗎？

Answer 1

嗯，這不適合你嗎？

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

代替'return false'，你可以使用你希望的任何JS函數。例如，典型的用法是表單驗證。

Answer 2

解決方案，能可能工作：

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！ - 只有一個想法，可以工作....

Answer 3

添加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表單將提交.The JS功能要求用戶如果他想繼續並提交或取消該行動。

Answer 4

嘗試類似這樣的事情。這是你的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。

Answer 5

這不像放棄提交那麼簡單。只要點擊該按鈕，就沒有實際的方法知道它的數據已經發送了多少，如果有的話。

Web瀏覽器和Web服務器不保持其請求之間的連接，因此停止腳本客戶端並不意味着它會停止它的服務器端。

要中止提交，您需要向服務器發送第二個請求，告訴服務器它可能已經保存了，因此需要進行刪除，如果需要，您需要一些唯一的ID以確定提交和中止請求，因爲它們將作爲2個唯一請求到達服務器端。

在服務器上，設置一些規則以及實際將數據保存到數據庫需要多少數據可以完成，但是，如果一個用戶只有一個圖像，另一個有3個，如何知道什麼時候該怎麼辦它應該是一個「中止提交」或不是，基於這樣的規則？

保存之前的一段時間延遲可能是其他情況，當中止可以被接受時，但同樣很難使安全失敗並且需要唯一的ID來識別請求。

我想你最好的選擇是保存它，因爲我想相信大多數用戶都希望這樣做，並且如果第二個請求在特定時間範圍內出現，它可以被刪除。

接受和使用Patrick Roberts answer作爲一個開始將是一個好主意。

在這2個類似的帖子中，您可能會發現其他幫助。

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