キャンセルボタンを使用してサブミットボタンをクリックした後にフォーム提出を防止する

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【選択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

これは送信を中止するだけでは簡単ではありません。そのボタンがクリックされるとすぐに、データがまだ送信されているかどうかを知る方法はありません。

ウェブブラウザとウェブサーバはリクエスト間の接続を維持しないため、スクリプトクライアント側を停止してもサーバ側が停止するわけではありません。

送信を中止するには、サーバーに2番目のリクエストを送信する必要があります。その場合、サーバーで既に保存されている可能性があります。削除が必要な場合は、サーバーサイドに2つの一意の要求として到着するため、サブミットとアボート要求を識別するために使用します。

サーバでは、DBに実際に保存するために必要なデータの量と量を設定できますが、1人のユーザが1つの画像しか持たず、そのようなルールに基づいて、「中断された提出」になっているかどうか？

アボートを受け付けることができますが、フェイルセーフを行うのが非常に難しく、要求を識別するために一意のIDが必要になる場合もあります。

私はほとんどのユーザーがそれを望んでいると思っていますので、保存することをお勧めします。また、2番目のリクエストが一定の時間枠内に来たら、削除することができます。

Patrick Roberts answerを受け入れて使用することをお勧めします。

これらの2つの同様の投稿で、さらに役立つ情報があります。

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