empêcher l'actualisation de la page lorsque le bouton à l'intérieur du formulaire est cliqué

J'ai un problème lors de l'utilisation des boutons à l'intérieur du formulaire. Je veux que ce bouton appelle la fonction. C'est le cas, mais avec un résultat indésirable, il actualise la page.

Mon code simple va comme ça

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

En cliquant sur le bouton, la fonction est appelée avec la page rafraîchie, ce qui réinitialise toute ma demande précédente qui affecte la page actuelle qui était le résultat de la demande précédente.

Que dois-je faire pour empêcher l'actualisation de la page?

Let getData()return false. Cela résoudra le problème.

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

Ajouter type="button"au bouton.

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

La valeur par défaut de typepour un bouton est submit, qui publie automatiquement le formulaire dans votre cas et le fait ressembler à une actualisation.

Tout ce que vous avez à faire est de mettre une balise de type et de créer le bouton de type.

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

Cela résout le problème

Le problème est que cela déclenche la soumission du formulaire. Si vous créez la getDatafonction, return falsecela devrait empêcher l'envoi du formulaire.

Vous pouvez également utiliser la preventDefaultméthode de l'objet événement:

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>

au lieu d'utiliser la balise de bouton, utilisez la balise d'entrée. Comme ça,

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

Si votre bouton est le "bouton" par défaut, assurez-vous que vous définissez explicitement l'attribut type, sinon le WebForm le traitera comme soumettre par défaut.

si vous utilisez js, faites comme ça

<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

});

Une méthode javascript pour désactiver le bouton lui-même

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

Une fois que tous les champs du formulaire ont satisfait vos critères, vous pouvez réactiver le bouton

Utiliser une Jquery sera quelque chose comme ça

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

Pour une raison quelconque dans Firefox, même si j'ai return false;et myform.preventDefault();dans la fonction, il actualise la page après l'exécution de la fonction. Et je ne sais pas si c'est une bonne pratique, mais ça marche pour moi, j'insère javascript:this.preventDefault();dans l'attribut action.

Comme je l'ai dit, j'ai essayé toutes les autres suggestions et elles fonctionnent bien dans tous les navigateurs sauf Firefox, si vous rencontrez le même problème, essayez d'ajouter l'événement prevent dans l'attribut action javascript:return false;ou javascript:this.preventDefault();. N'essayez pas avec javascript:void(0);qui cassera votre code. Ne me demandez pas pourquoi :-).

Je ne pense pas que ce soit une manière élégante de le faire, mais dans mon cas, je n'avais pas d'autre choix.

Mettre à jour:

Si vous avez reçu une erreur ... après le traitement d'ajax, supprimez l'action d'attribut et dans l' onsubmitattribut, exécutez votre fonction suivie du faux retour:

onsubmit="functionToRun(); return false;"

Je ne sais pas pourquoi tous ces problèmes avec Firefox, mais j'espère que cela fonctionne.

La fonction de retour ne fonctionne pas dans tous les cas. J'ai essayé ceci:

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

Cela n'a pas fonctionné pour moi.

J'ai essayé de retourner false dans la fonction et cela a fonctionné pour moi.

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

J'étais confronté au même problème. Le problème vient de la onclickfonction. Il ne devrait y avoir aucun problème avec la fonction getData. Cela fonctionnait en rendant la onclickfonction renvoyer false.

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

Celui-ci est la meilleure solution:

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

Remarque: mon code est très simple.

Vous pouvez utiliser ajax et jquery pour résoudre ce problème:

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