impedisce l'aggiornamento della pagina quando si fa clic sul pulsante all'interno del modulo

Ho un problema durante l'utilizzo dei pulsanti all'interno del modulo. Voglio quel pulsante per chiamare la funzione. Lo fa, ma con il risultato indesiderato che aggiorna la pagina.

Il mio semplice codice va così

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Facendo clic sul pulsante, la funzione viene chiamata con la pagina aggiornata, che reimposta tutta la mia richiesta precedente che influisce sulla pagina corrente che era il risultato della richiesta precedente.

Cosa devo fare per impedire l'aggiornamento della pagina?

Lascia che getData()restituisca false. Questo lo risolverà.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

Aggiungi type="button"al pulsante.

<button name="data" type="button" onclick="getData()">Click</button>

Il valore predefinito di typeper un pulsante è submit, che auto pubblica il modulo nel tuo caso e lo fa sembrare un aggiornamento.

Tutto quello che devi fare è inserire un tag di tipo e creare il pulsante di tipo.

<button id="btnId" type="button">Hide/Show</button>

Questo risolve il problema

Il problema è che attiva l'invio del modulo. Se si effettua la getDatafunzione, return falseè necessario interrompere l'invio del modulo.

In alternativa, è possibile utilizzare anche il preventDefaultmetodo dell'oggetto evento:

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

invece di utilizzare il tag pulsante, utilizzare il tag di input. Come questo,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Se il tuo pulsante è "pulsante" predefinito, assicurati di impostare esplicitamente l'attributo type, altrimenti WebForm lo tratterà come inoltro di default.

se usi js fai così

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Un metodo javascript per disabilitare il pulsante stesso

document.getElementById("ID NAME").disabled = true;

Una volta che tutti i campi del modulo hanno soddisfatto i tuoi criteri, puoi riattivare il pulsante

L'uso di un Jquery sarà qualcosa di simile

$( "#ID NAME" ).prop( "disabled", true);

Per qualsiasi motivo in Firefox, anche se ho return false;e myform.preventDefault();nella funzione, aggiorna la pagina dopo l'esecuzione della funzione. E non so se questa è una buona pratica, ma funziona per me, inseriscojavascript:this.preventDefault(); l'attributo action.

Come ho detto, ho provato tutti gli altri suggerimenti e funzionano bene in tutti i browser, ma Firefox, se hai lo stesso problema, prova ad aggiungere l'evento di prevenzione nell'attributo di azione javascript:return false;o javascript:this.preventDefault();. Non provarci conjavascript:void(0); quale si romperà il codice. Non chiedermi perché :-).

Non penso che sia un modo elegante per farlo, ma nel mio caso non avevo altra scelta.

Aggiornare:

Se hai ricevuto un errore ... dopo l'elaborazione di ajax, rimuovi l'azione dell'attributo e onsubmitnell'attributo, esegui la tua funzione seguita dal falso ritorno:

onsubmit="functionToRun(); return false;"

Non so perché tutti questi problemi con Firefox, ma spero che funzioni.

La funzione di ritorno non funziona in tutti i casi. Ho provato questo:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

Non ha funzionato per me.

Ho provato a restituire false all'interno della funzione e ha funzionato per me.

function Reset()
{
    .
    .
    .
    return false;
}

Stavo affrontando lo stesso problema. Il problema è con la onclickfunzione. Non ci dovrebbero essere problemi con la funzione getData. Ha funzionato rendendo la onclickfunzione return false.

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Questa è la soluzione migliore:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Nota: il mio codice è molto semplice.

È possibile utilizzare Ajax e jquery per risolvere questo problema:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>