web-dev-qa-db-fra.com

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

J'ai un problème lorsque j'utilise 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 toutes les demandes précédentes qui affectent la page actuelle résultant de la demande précédente.

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

javascripthtml
114
bunkdeath

Laissez getData() retourner false. Cela va le réparer.

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

Ajoutez type = "button" au bouton.

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

La valeur par défaut de "type" pour un bouton est "submit", ce qui lui-même affiche le formulaire dans votre cas et lui donne l'apparence d'une actualisation.

269
detale

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

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

Cela résout le problème

8
user8564339

HTML

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

jQuery

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

Le problème est que cela déclenche la soumission du formulaire. Si vous créez la fonction getDatareturn false, le formulaire ne pourra plus être soumis. 

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

function getData(e) {
    e.preventDefault();
}
8
James Allardice
<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

au lieu d'utiliser la balise button, utilisez la balise input. Comme ça,

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

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 un Jquery sera quelque chose comme ça

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

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.

0
HAPPY SINGH

Je faisais face au même problème. Le problème vient de la fonction onclick. Il ne devrait y avoir aucun problème avec la fonction getData. Cela a fonctionné en rendant la fonction onclick de false.

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

Si votre bouton est "bouton" par défaut, assurez-vous de définir explicitement l'attribut type. Sinon, WebForm le traitera comme étant envoyé 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

});
0
Thusitha Deepal

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

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

Je ne pense pas que ce soit une façon é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 de ajax, supprimez l'action d'attribut et, dans l'attribut onsubmit, 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 fonctionnera.

0
raphie

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;
}
0
Harsha Vardhini