Modifier un bouton lors de la validation du formulaire

Modifier un bouton lors de la validation du formulaire - HTML/CSS - Programmation

Marsh Posté le 07-12-2010 à 15:22:27    

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

Reply

Marsh Posté le 07-12-2010 à 15:22:27   

Reply

Marsh Posté le 07-12-2010 à 16:12:37    

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

Reply

Marsh Posté le 07-12-2010 à 16:24:21    

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. })

Reply

Marsh Posté le 07-12-2010 à 17:29:09    

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 ?

Reply

Marsh Posté le 07-12-2010 à 17:48:09    

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/

Reply

Marsh Posté le 07-12-2010 à 18:09:17    

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 ?

Reply

Marsh Posté le 08-12-2010 à 12:08:09    

$(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 ...

Reply

Marsh Posté le 08-12-2010 à 12:45:09    

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.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed