Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
783 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modifier un bouton lors de la validation du formulaire

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modifier un bouton lors de la validation du formulaire

n°2040503
bichtoubar​d
Posté le 07-12-2010 à 15:22:27  profilanswer
 

Bonjour,
 
Je cherche à modifier le texte d'un bouton au moment ou je clic sur le bouton Envoyer de mon formulaire.
 
En effet, le traitement étant assez long, j'aimerai que l'utilisateur puisse voir que ça bosse pour qu'il ne spam pas frénétiquement la touche.
 
Je déclare mon bouton dans un formulaire standard comme suit :

Code :
  1. <form name="modif_mdp" id="modif_mdp" action="javascript:alert('success!');">
  2. ...
  3. <label>&nbsp;</label><INPUT class="button" type="submit" name="submit" value="Soumettre" style="width:100px"><br/>
  4. </div>
  5. </form>


 
Dans mon code JS voilà ce que j'essaye mais ne fonctionne pas :

Code :
  1. $('form').submit(function(){
  2.    $('input[name=submit]').value = "Loading...";
  3. ...


 
J'ai essayé de modifier le curseur aussi, sans succès :

Code :
  1. $('form').submit(function(){
  2.    element.style.cursor = "wait";
  3. ...


 
 
J'ai aussi essayé différentes bricoles dans le CSS sans succès.
 
Pouvez vous m'aider sur ce point ?
 
Merci d'avance

mood
Publicité
Posté le 07-12-2010 à 15:22:27  profilanswer
 

n°2040515
olivthill
Posté le 07-12-2010 à 16:12:37  profilanswer
 

En JS, je ne sais pas, mais cela doit ressembler à Javascript, où il suffit de définir le bouton avec

<input type="submit" onclick="this.disabled=true;">

n°2040516
Paulp
~, sweet ~
Posté le 07-12-2010 à 16:24:21  profilanswer
 

Voici un code js minimal qui marche (testé dans la console firebug).
Au passage, ton HTML est assez moche :
- nom de balise en majuscule
- css dans un attribut style
- label vide, sans attribut for
...

Code :
  1. $('<form name="modif_mdp" id="modif_mdp" action="#"><input class="button" type="submit" name="submit" value="Soumettre"></form>').appendTo('body')
  2. $('#modif_mdp').submit(function(){
  3.     $(this).find('input:submit').val('Loading ...');
  4.     $('body').css('cursor','wait');
  5. })

n°2040534
bichtoubar​d
Posté le 07-12-2010 à 17:29:09  profilanswer
 

Merci pour ton aide, maintenant cela fonctionne.
Je n'ai pas ajouté le "appendTo" car cela fait planter une autre fonction mais ça marche sans.
 
Par contre le curseur ne s'affiche en progression que si je met le souris sur une zone vierge de ma page, sur les autres élements il prend sa valeur normal.
Faut il remplacer 'body' par 'document' ou quelquechose du style ?
 
Pour ce qui est du code HTML je n'ai pas connaissance des bonnes pratiques, mais une partie du code à été récupérée sur ce lien : http://www.bitrepository.com/a-sim [...] ation.html et je pensais que le mec était pro alors je m'y suis fié ;-)
 
Tu as un document qui synthétise les bonnes pratiques pour avoir un code propre ?

n°2040552
Paulp
~, sweet ~
Posté le 07-12-2010 à 17:48:09  profilanswer
 

bichtoubard a écrit :

Merci pour ton aide, maintenant cela fonctionne.
Je n'ai pas ajouté le "appendTo" car cela fait planter une autre fonction mais ça marche sans.


Le appendTo me servait à ajouter ton code HTML, j'avais la flemme de créer un fichier

bichtoubard a écrit :


Par contre le curseur ne s'affiche en progression que si je met le souris sur une zone vierge de ma page, sur les autres élements il prend sa valeur normal.


Tu peux toujours faire  

Code :
  1. $('*').css('cursor','wait');


bichtoubard a écrit :


Faut il remplacer 'body' par 'document' ou quelquechose du style ?
 
Pour ce qui est du code HTML je n'ai pas connaissance des bonnes pratiques, mais une partie du code à été récupérée sur ce lien : http://www.bitrepository.com/a-sim [...] ation.html et je pensais que le mec était pro alors je m'y suis fié ;-)
 
Tu as un document qui synthétise les bonnes pratiques pour avoir un code propre ?


http://validator.w3.org/

n°2040565
bichtoubar​d
Posté le 07-12-2010 à 18:09:17  profilanswer
 

Merci encore pour ton aide, tu m'enlèves une bonne épine du pied :-)
Ça faisait un certain temps que je bricolais pour essayer de faire fonctionner ça.
 
Une dernière question pour la route, est il possible de remonter la barre de défilement en haut avec une de tes commandes magique au moment de la soumission du formulaire ?

n°2040739
Paulp
~, sweet ~
Posté le 08-12-2010 à 12:08:09  profilanswer
 

$(window).scrollTop(0);
 
Si tu veux gagner du temps, tu devrais lire la doc jquery.
Pas l'apprendre par coeur, mais la lire, intégralement, pour savoir ce qui existe.
Sinon, tu vas passer ton temps à réinventer la roue ...

n°2040751
bichtoubar​d
Posté le 08-12-2010 à 12:45:09  profilanswer
 

Ok, merci pour ton aide et tes précieux conseils.
J'ai commencé à lire la doc sur http://validator.w3.org/, je m'attaquerai à la doc jQuery par la suite.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modifier un bouton lors de la validation du formulaire

 

Sujets relatifs
Remplir formulaire de connexion automatiquementmodifier un fichier elf
Raccourci inversion bouton sourisSYMFONY - Champ de vérification Captcha pour un formulaire
Formulaire Excel CommissionsFlash - Comment créer un bouton play/pause
Formulaire et requete SQLFormulaire dans une JSP : auto complétion ?
affichage div dans un formulairemodifier taille de page web afin qu'elle s'adapte au navigateur
Plus de sujets relatifs à : Modifier un bouton lors de la validation du formulaire


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR