Javascript Girl
  1. Javascript Girl
  3. Désactiver un bouton de soumission en cliquant dessus, empêchera le formulaire d'être soumis sur Google Chrome
Intereting Posts
Javascript: zoom sur mouseover SANS Jquery ou plugins Fonction du gestionnaire d'événements typographiques pour le champ du type d'événement – Contexte incorrect Comment vérifier si l'élément de tableau existe ou non en javascript? Javascript définit la taille de la fenêtre du navigateur Chargement automatique du contenu sur le défilement vers le bas Comment lancer une erreur sur un sujet de comportement et continuer le flux? Backbone.js: vues complexes combinant plusieurs modèles Comment utiliser l'insertion en vrac non ordonnée avec Mongoskin? Javascript location.href onchange event listener? Fade in divs l'un après l'autre Comment éviter "Cross-Site Script Attacks" Comment valider le formulaire en utilisant angularjs lorsque le champ de nom possède. (Point)? Ajouter ou supprimer des diapositives en utilisant jQuery FlexSlider En décochant une case à cocher, déclenchez un événement Empêchez le chargement de safari à partir du cache lorsque le bouton de retour est cliqué

Désactiver un bouton de soumission en cliquant dessus, empêchera le formulaire d'être soumis sur Google Chrome

J'ai ajouté le script suivant à ma vue de mise en page, dans mon mcc asp.net: – 

$(document).ready(function () { $('.btn.btn-primary').click(function () { $(this).prop("disabled", true); if (!$('form').valid()) { $(this).prop("disabled", false); return false; } }); $('form').change(function () { $('.btn.btn-primary').prop("disabled", false); });

Le but de mon script est de désactiver les boutons de soumission et de les réactiver si le modèle n'est pas valide ou si l'utilisateur modifie une valeur de formulaire. Le script ci-dessus fonctionnera bien sur IE et Firefox, mais sur Chrome, je ne peux pas soumettre le formulaire, car lorsque l'utilisateur clique sur le bouton Soumettre, le bouton sera désactivé, mais le formulaire ne sera pas envoyé. Une idée de comment résoudre ce problème sur Chrome?

Au lieu de désactiver le bouton dans l'événement de clic du bouton – désactivez-le dans l'événement de soumission du formulaire (vous pouvez également vérifier le formulaire pour la validité).

De cette façon, il fonctionnera universellement dans tous les navigateurs. 

 <form action="http://www.microsoft.com"> <input class="btn-primary" type="submit" value="submit"/> </form> $('form').submit(function() { $('input.btn-primary').prop("disabled", "disabled"); })

Je viens d'avoir le même problème que Google Chrome ne provoquait pas mon événement de soumission lorsque le bouton a été désactivé via jQuery .

Informations d'arrière-plan: J'ai un formulaire avec un bouton qui doit être désactivé chaque fois qu'il est cliqué. Le code de dépôt PHP n'est donc pas appelé plusieurs fois. Ce soumission est en cours d'exécution sur un Drupal Backend, dans mon cas comme un submit_hook personnalisé. Mais pour assurer le fonctionnement de tout autre CMS. Mais ce n'est pas le problème. Le vrai problème est que le code Javascript désactive le bouton et Google Chrome pense que le bouton est totalement mort et pas seulement désactivé. Donc, il ne déclenche plus de code.

Mais ce problème est assez facile à réparer.

Donc, ce code fonctionne sur Firefox / IE : 

 (function($) { Drupal.behaviors.somebehaviour = { attach: function(context, settings) { $('#edit-submit').click(function (e) { $('#edit-submit').val('Is saved...'); $('#edit-submit').prop('disabled', 'disabled'); }); } }; })(jQuery);

Et le faire fonctionner sur Chrome , vous devez ajouter la ligne: 

 $(this).parents('form').submit();

Donc pour cet exemple, il serait enfin: 

 (function($) { Drupal.behaviors.somebehaviour = { attach: function(context, settings) { $('#edit-submit').click(function (e) { $('#edit-submit').val('Is saved...'); $('#edit-submit').prop('disabled', 'disabled'); $(this).parents('form').submit(); }); } }; })(jQuery);