Prevenire l'invio del modulo dopo aver fatto clic sul pulsante di invio utilizzando il pulsante Annulla

Question

Ho un modulo che invia valori al back-end, ma desidero avere un pulsante Annulla che interrompa l'invio del modulo.

Qualcuno può dirmi come può essere fatto?

Answer 1

Hmm, questo non funzionerà per voi?

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

Al posto di "return false" è possibile utilizzare qualsiasi funzione JS desiderata. L'uso tipico per questo è la convalida del modulo, ad esempio.

Answer 2

Soluzione che potrebbe lavoro:

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! - Solo un'idea che potrebbe funzionare ....

Answer 3

Aggiungi attributo onsubmit al tag tasto: <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; 

} 

} 

modulo sarà presentato se il valore restituito è true funzione .La js chiede all'utente se vuole procedere e inviare o annullare l'azione.

Answer 4

Provare qualcosa come questo. Ecco il codice 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> 

Ecco la tua jQuery e 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; 
    }); 
}); 

Questo utilizza la FormData API in modo da controllare la vostra browser support for that.

Answer 5

Questo non è semplice come basta interrompere l'invio. Non appena viene cliccato quel pulsante non c'è un modo pratico per sapere quanto, se del caso, dei suoi dati è stato ancora inviato.

Un browser Web e un server Web non mantengono la connessione tra le richieste e, pertanto, l'interruzione di un lato client di script non significa che arresta il lato server.

Per interrompere l'invio, è necessario inviare una seconda richiesta al server indicandolo, quindi sul server, potrebbe essere già stato salvato in modo da richiedere l'eliminazione e, in tal caso, sarà necessario un ID univoco entrambi identificano l'invio e la sua richiesta di interruzione, poiché arriveranno lato server come 2 richieste univoche.

Al server, è possibile impostare alcune regole su cosa e quanti dati sono necessari per salvarlo effettivamente nel db, tuttavia, cosa succede se un utente ha solo 1 immagine e un secondo ne ha 3, come sapere quando si suppone che sia un "invio abortito" o meno, basato su tali regole?

Un ritardo prima di salvarlo potrebbe essere un'altra cosa, quando un abort può essere accettato, ma ancora una volta, è molto difficile rendere sicuro il failover e sarà necessario l'ID univoco per identificare le richieste.

Credo che la soluzione migliore è salvarlo, come mi piacerebbe credere che la maggior parte degli utenti lo desiderino, e se una seconda richiesta arriva entro un certo periodo di tempo, consente di essere cancellata.

Accettare e utilizzare Patrick Roberts answer come inizio sarebbe una buona idea.

In questi 2 post simili potresti trovare ulteriore assistenza.

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