Zapobieganie przesyłaniu formularzy po kliknięciu przycisku Wyślij za pomocą przycisku anulowania

Question

Mam formularz, który przekazuje wartości do zaplecza, ale chcę mieć przycisk anulowania, który zatrzymuje wysyłanie formularza.

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

Czy każdy może powiedzieć, jak można to zrobić?

Answer 1

Hmm, czy to nie pomoże?

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

Zamiast "return false" można użyć dowolnej funkcji JS. Typowym zastosowaniem jest na przykład sprawdzanie poprawności formularza.

Answer 2

Rozwiązanie że mógł praca:

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! - Tylko pomysł, który może pracować ....

Answer 3

onsubmit Dodaj atrybut do tagu przycisk: <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; 

} 

} 

Formularz zostanie przedłożony jeśli wartość zwracana jest true funkcja .Powierzchnia js prosi użytkownika jeśli chce kontynuować i złożyć lub anulować akcję.

Answer 4

Spróbuj czegoś takiego. Oto twój 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> 

Oto Twoja jQuery i 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; 
    }); 
}); 

używa FormData API więc sprawdzić browser support for that.

Answer 5

To nie jest tak proste, jak po prostu przerwać przesyłanie. Po kliknięciu tego przycisku nie ma praktycznego sposobu sprawdzenia, ile jeszcze danych zostało wysłanych.

Przeglądarka internetowa i serwer WWW nie utrzymują połączenia pomiędzy żądaniami, dlatego zatrzymanie strony klienta skryptu nie oznacza, że ​​zatrzymuje się po stronie serwera.

Aby przerwać przesyłanie, musisz wysłać drugie żądanie do serwera, mówiąc, że na serwerze może być już zapisane, więc konieczne będzie usunięcie, a jeśli tak, będziesz potrzebować unikalnego identyfikatora zarówno w celu zidentyfikowania przesłania, jak i żądania przerwania, ponieważ po stronie serwera pojawią się 2 unikalne żądania.

Na serwerze można ustawić ustawienie reguł, ile i ile danych jest wymaganych do rzeczywistego zapisania go w bazie danych, ale co zrobić, jeśli jeden użytkownik ma tylko 1 zdjęcie, a drugi 3, jak się dowiedzieć, kiedy ma być "przerwanym poddaniem", czy nie, na podstawie takich zasad?

Opóźnienie przed zapisaniem może być czymś innym, gdy abort może być zaakceptowany, ale znowu bardzo trudne do zabezpieczenia przed awariami i będzie potrzebować identyfikatora unikalnego identyfikatora w celu zidentyfikowania żądań.

Domyślam się, że najlepiej jest go zapisać, ponieważ chciałbym wierzyć, że większość użytkowników tego chce, a jeśli drugie żądanie przychodzi w określonym przedziale czasu, to pozwala je usunąć.

Zaakceptuj i używaj Patrick Roberts answer jako dobry pomysł.

Przy tych 2 podobnych wpisach możesz znaleźć dodatkową pomoc.

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