Discussion :

[carl_stage_b]

BONJOUR, A TOUS,
jai un formulaire et je souhaiterais cacher le bouton tant que tout les champs ne sont pa remplis! etant debutant j'ai tout d'abord essayer les controle de saisi mais sans succes alors je voudrais cacher le bouton tant que tout les input ne sont pas renseigner


voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <form action="DB_adddetailtournee.php" method="post" name="loaddetailDarkBox">
    <input name="NUM_TOU" type="hidden" value="<? echo $_REQUEST["NUM_TOU"];?>"/>
    <tr><td colspan=2>Ajouter une nouvelle étape</td></tr>
    <tr><td class=colname>Contrat</td><td class=dataleft>
    <div>
       <div>
          <input name="NUM_DOS" type="hidden" id="inputNUM_DOS"/>
          <input  name="NEW_NUM_DOS" size="30" id="inputString" onKeyUp="lookup(this.value);" type="text" /><span class="error-message"></span>
       </div>      
       <div class="suggestionsBox" id="suggestions" style="display: none;">
          <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />
          <div class="suggestionList" id="autoSuggestionsList"></div>
       </div>
   </div>
   <?
   }
   ?>
   </td></tr>
    <tr>
      <td class=colname>Numéro étape</td><td class=dataleft><input name="NUM_ETAPE" type="text" value=""/></td></tr>
    <tr valign="top"><td class=colname>Adresse de visite:</td><td class=dataleft>
    <div id="select_adresse_locataire">
    <SELECT name="REF_ADR_LOC" id="REF_ADR_LOC"><option value=""></option> 
    </div></select><span class="error-message"></span>
    </td></tr>    
    <tr><td class=colname>date étape</td><td class=dataleft><input name="DATE_ETAPE" type="text"  value="<?echo $ligne["DD_TOU"];?>"/><!--<IMG style="CURSOR: hand" onclick  ="popUpCalendar(this, document.loaddetailDarkBox.DATE_ETAPE,'dd/mm/yyyy');return false;" alt="Pick a Date" src="img/ew_calendar.gif" >--></td></tr>
    <tr><td class=colname>Commentaire</td><td class=dataleft><textarea name="COMM_ETA" cols="70" rows="5"></textarea><br>
    <input name="ajout_detailtournee" id="ajout_detailtournee" type="submit" class="button" value="Enreg." />
    <input type="submit" class="Close" name="Close"value="Annuler" />
    </td></tr>
    </form>

[ticroch]

Salut, je pense la solution suivante marche, après ce n'est pas forcément la plus propre ....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
$(document).ready(function() {
    $("input").change(function() {
        // Action s'exécutant des qu'une valeur de tes inputs est changées
        var estRempli = true;
        $.each($("input[type='text']"),function() {
            if ($(this).val() == "") {
                estRempli = false;
            }
        });
        $("input[type='submit']").show(estRempli);
    });
});

En tout cas la logique est la : tu met un evenement sur tous tes champs, et à chaque fois que l'un est modifié tu vérifie s'ils sont tous remplis. Dans ce cas, tu affiche le bouton, dans le cas contraire tu le cache.

[carl_stage_b]

je n'arrive pas a trouver le traitment qui corresspond aurais tu une Idee

[ticroch]

?? je ne comprends pas ce que tu as dit ....

je t'ai donné une solution, de quel traitement parles tu ?

[carl_stage_b]

non non je me suis tromper ! de message. Oui jai effectuer la modif mais sur les inputs je met des evenement onChange="true" ??

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $("input[type='submit']").show(estRempli);

show n'accpete pas de boolean en paramètre ...
il faut faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(estRempli){ $("input[type='submit']").show();}

[ticroch]

non le onchange est effectué ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 
    $("input").change(function() {
        // ....
    }

donc rien besoin de rajouté dans ton code html

[carl_stage_b]

malheuresement je vois toujours mes bouton alors que je nais encore rien saisi !!! merci pour tous deja

[ticroch]

oui il faut l'exécuter une fois d'abord :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(document).ready(function() {
    updateBouton();
    $("input").change(function() {
        updateBouton();
    });
});
 
function updateBouton() {
    var estRempli = true;
    $.each($("input[type='text']"),function() {
        if ($(this).val() == "") {
            estRempli = false;
        }
    });
    $("input[type='submit']").show(estRempli);
 
}

[Invité]

Bonjour,
pour compléter, tu peux très bien avoir des input et des select (listes déroulantes), dont certains sont obligatoires et d'autres non obligatoires.
Tu peux donc mettre une class="obligatoire" sur ceux que tu veux voir remplis obligatoirement :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<input class="obligatoire" name="blabla" type="text" value=""/>
...
<select class="obligatoire" ...>
	<option value="">...</option>
	...
</select><form method="post" action="#">
<p>(obligatoire) * :<input class="obligatoire" name="blabla" type="text" value=""/></p>
<p>(facultatif :<input name="blabla2" type="text" value=""/></p>
<p>(obligatoire) * :<input class="obligatoire" name="blabla3" type="text" value=""/></p>
<p>(obligatoire) * :<select class="obligatoire" name="blabla4">
	<option value="">...</option>
	<option value="1">option 1</option>
	<option value="2">option 2</option>
</select>
</p>
<p>(facultatif) :<select name="blabla5">
	<option value="">...</option>
	<option value="11">option 12</option>
	<option value="22">option 22</option>
</select>
</p>
<p><input type="submit" class="button" name="submit1" value="Enregistrer" /></p>
<p><input type="submit" class="Close" name="submit2" value="Annuler" /></p>
</form>

et tester via :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    /* on cache D'ABORD le BOUTON SUBMIT */
    $("input[type='submit']").hide();
    /* on teste les champs obligatoires */
    $(".obligatoire").change(function() {
        // Action s'exécutant des qu'une valeur de tes inputs est changées
        var estRempli = true;
        /* tous les champs obligatoires doivent être remplis (sinon -> false) */
        $(".obligatoire").each(function() {
            if ($(this).val() == "") {
                estRempli = false;
            }
        });
        if(estRempli){ $("input[type='submit']").show(); }
		else{ $("input[type='submit']").hide(); }
    });
});

[carl_stage_b]

dommage maintenant mon bouton ne se remet pas kan je rentre tous les champs

[Invité]

Ligne 8 (corrigée) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

        $(".obligatoire").each(function() {

Sinon, montre-nous TON code.

[carl_stage_b]

je ne peux pas le montrer car je ne suis plus en stage, mais demain je le montrais.
je souhaiterais savoir s'il est possible de déclencher le script que quand on click sur un lien ??

[ticroch]

oui c'est possible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$("#id_de_mon_lien").click(function() {
    $("input[type='submit']").show();
    return false; // pour ne pas faire la redirection
});

Je pense que tu devrais lire des tutos sur jQuery, on peut tout faire et c'est très facile, et tu gagnerais énormément de temps plutot que de demander toujours sur les forums ....

[carl_stage_b]

je te remercie j'ai beaucoup appris et merci pour les reponse