Bonsoir à toutes et tous,

Je cherche à afficher un champ text seulement si celui juste avant a été correctement rempli ...

Le modèle est le suivant :

<div class="panel-group" id="accordion">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Salarié 1</a>
                                            </h4>
                                        </div>
                                        <div id="collapseOne" class="panel-collapse collapse in">
                                            <div style="padding:5px;">
                                                <div class="form-group">
                                                    <label for="cv_effectif1">Civilité Effectif formé :</label>
                                                    <select class="form-control" id="cv_effectif1" name="civilite_effectif1">
                                                          <option value="Mr">Mr</option>
                                                          <option value="Mme">Mme</option>
                                                        </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="nom_effectif1">Nom effectif formé :</label>
                                                    <input class="form-control" type="text" id="nom_effectif1" name="nom_effectif1" placeholder="Nom de l'effectif formé...">
                                                </div>

                                                <div class="form-group">
                                                    <label for="prenom_effectif1">Prénom effectif formé :</label>
                                                    <input class="form-control" type="text" id="prenom_effectif1" name="prenom_effectif1" placeholder="Prénom de l'effectif formé...">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Salarié 2</a>
                                            </h4>
                                        </div>
                                         <div id="collapseTwo" class="panel-collapse collapse">
                                            <div style="padding:5px;">
                                                <div class="form-group">
                                                    <label for="cv_effectif2">Civilité Effectif formé :</label>
                                                    <select class="form-control" id="cv_effectif2" name="civilite_effectif2">
                                                          <option value="Mr">Mr</option>
                                                          <option value="Mme">Mme</option>
                                                        </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="nom_effectif2">Nom effectif formé :</label>
                                                    <input class="form-control" type="text" id="nom_effectif2" name="nom_effectif2" placeholder="Nom de l'effectif formé...">
                                                </div>

                                                <div class="form-group">
                                                    <label for="prenom_effectif2">Prénom effectif formé :</label>
                                                    <input class="form-control" type="text" id="prenom_effectif2" name="prenom_effectif2" placeholder="Prénom de l'effectif formé...">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Salarié 3</a>
                                            </h4>
                                        </div>
                                         <div id="collapseThree" class="panel-collapse collapse">
                                            <div style="padding:5px;">
                                                <div class="form-group">
                                                    <label for="cv_effectif3">Civilité Effectif formé :</label>
                                                    <select class="form-control" id="cv_effectif3" name="civilite_effectif3">
                                                          <option value="Mr">Mr</option>
                                                          <option value="Mme">Mme</option>
                                                        </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="nom_effectif3">Nom effectif formé :</label>
                                                    <input class="form-control" type="text" id="nom_effectif3" name="nom_effectif3" placeholder="Nom de l'effectif formé...">
                                                </div>

                                                <div class="form-group">
                                                    <label for="prenom_effectif3">Prénom effectif formé :</label>
                                                    <input class="form-control" type="text" id="prenom_effectif3" name="prenom_effectif3" placeholder="Prénom de l'effectif formé...">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Salarié 4</a>
                                            </h4>
                                        </div>
                                         <div id="collapseFour" class="panel-collapse collapse">
                                            <div style="padding:5px;">
                                                <div class="form-group">
                                                    <label for="cv_effectif4">Civilité Effectif formé :</label>
                                                    <select class="form-control" id="cv_effectif4" name="civilite_effectif4">
                                                          <option value="Mr">Mr</option>
                                                          <option value="Mme">Mme</option>
                                                        </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="nom_effectif4">Nom effectif formé :</label>
                                                    <input class="form-control" type="text" id="nom_effectif4" name="nom_effectif4" placeholder="Nom de l'effectif formé...">
                                                </div>

                                                <div class="form-group">
                                                    <label for="prenom_effectif4">Prénom effectif formé :</label>
                                                    <input class="form-control" type="text" id="prenom_effectif4" name="prenom_effectif4" placeholder="Prénom de l'effectif formé...">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Salarié 5</a>
                                            </h4>
                                        </div>
                                        <div id="collapseFive" class="panel-collapse collapse">
                                            <div style="padding:5px;">
                                                <div class="form-group">
                                                    <label for="cv_effectif5">Civilité Effectif formé :</label>
                                                    <select class="form-control" id="cv_effectif5" name="civilite_effectif5">
                                                          <option value="Mr">Mr</option>
                                                          <option value="Mme">Mme</option>
                                                        </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="nom_effectif5">Nom effectif formé :</label>
                                                    <input class="form-control" type="text" id="nom_effectif5" name="nom_effectif5" placeholder="Nom de l'effectif formé...">
                                                </div>

                                                <div class="form-group">
                                                    <label for="prenom_effectif5">Prénom effectif formé :</label>
                                                    <input class="form-control" type="text" id="prenom_effectif5" name="prenom_effectif5" placeholder="Prénom de l'effectif formé...">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

En gros, si les champs salarié 1 sont remplient, alors on peut remplir les champs salarié 2 et ainsi de suite..

Auriez-vous une piste ? Je ne sais pas quoi faire, d’ailleurs, c'est peut-être possible en PHP, j'ai fait des recherches mais je n'ai rien trouvé, peut-être car je débute lol

Merci d'avance pour vos réponses

tu peux le faire en JS, tu créai une fonction qui est appelé au changement avec comme parametre le numero du salarié :

<... onchnage="updateForm ( 1 );">

dans cette fonction tu verifie que les champs pour le salarié actuels sont remplis comme tu veux, si oui alors tu affiche pour le salarié suivant sinon tu caches :

updateForm ( numSalarie )
{
    //tu veriifie ce que tu veux ici

    if ( bienRemplis )
    {
        document.getElementById ( "idQuiVaBien"+(numSalarie+1) ).style.display = "inherit";
    }
    else
    {
        document.getElementById ( "idQuiVaBien"+(numSalarie+1) ).style.display = "none";
    }
}

ça devrait faire ce que tu veux

-
Edité par ox223252 12 octobre 2018 à 10:52:13