Besoin d'aide sur Formulaire - Javascript

Résolu/Fermé
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - Modifié par jordane45 le 14/08/2015 à 10:01
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - 14 août 2015 à 16:27
Bonjour,
J'ai un formulaire d'inscription comme suis:

<div class='form_inscription'>
                        
                        <form method = "POST" action="">
                            <table class='table_ins'>
                                <tr>
                                    <td><label for='ins_statut'>Statut :</label></td>
                                    <td  class='td_imput_ins'>
                                        <select name="ins_statut" class ="ins_statut">
                                            <option>Particulier</option>
                                            <option>Professionnel</option></select>
                                    </td>
                                </tr>
        
        
     <!-- Si l'utilisateur choisit Professionnel, on affiche le champ Numéro NIF-->
        <tr>
                                    <td><label for='ins_nif'>Numéro NIF :></label></td>
                                    <td><input type='text' class='ins_nif' name = 'ins_nif'></td>
                                </tr>
                    <!--Sinon on affiche directement la suite -->
        
        
        
        
                                <tr>
                                    <td><label for='ins_nom'>Nom :></label></td>
                                    <td><input type='text' class='ins_nom' name = 'ins_nom'></td>
                                </tr>
                                
                                <tr>
                                    <td><label for='ins_pseudo'>Choisir un pseudo : </label></td>
                                    <td><input type='text' class='ins_pseudo' name = 'ins_pseudo'></td>
                                </tr>
  
                                <tr>
                                    <td><label for='ins_email'>Email :</label></td>
                                    <td><input type='text' class='ins_email' name = 'ins_email'></td>
                                </tr>
                                <tr>
                                    <td><label for='ins_email2'>Retaper votre email :</label></td>
                                    <td><input type='text' class='ins_email' name = 'ins_email2'></td>
                                </tr>
 
                                <tr>
                                    <td><label for='ins_pass'>Mot de pass :</label></td>
                                    <td><input type='password' class='ins_pass' name = 'ins_pass'></td>
                                </tr>
                                
                                <tr>
                                    <td><label for='ins_pass2'>Retaper votre mot de pass :</label></td>
                                    <td><input type='password' class='ins_pass' name = 'ins_pass2'></td>
                                </tr>

                                 <tr>
                                    <td> </td>
                                    <td><input type = 'submit' class ='ins_submit' value = 'Enregistrer'></td>
                                </tr>
  
                            </table>
                        </form>                                   
                    </div>


1) Je voudrai que le champ "Numéro NIF" ne s'affiche si l'utilisateur selectionne "Particulier"
2) Comment verifier la disponibilité du "pseudo" sans actualiser la page ni cliquer submit. Disons j'ai la base deonnée "bazar" avec la table "membres" ayant des colonnes: Nom, Statut, NIF ,Pseudo, email et pass.

Je pense que ces action peuvent être faites avec javascript, alors que je suis encore debutant dans cette matière.

Merci!


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Merci d'y penser dans tes prochains messages.
.

3 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
14 août 2015 à 09:30
Bonjour

pour la première question : reharde la méthode onChange et la propriété display

pour la seconde. ..il te faudra utiliser l'Ajax.
0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
14 août 2015 à 09:48
Merci pour votre reponse mais que je n'ai pas encore maitrisé ces deux language. Juste notion!

Merci encore de votre considération.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 14/08/2015 à 10:09
Pour la première question :
 
  <div class='form_inscription'>
                        
    <form method = "POST" action="">
        <table class='table_ins'>
            <tr>
                <td><label for='ins_statut'>Statut :</label></td>
                <td  class='td_imput_ins'>
                    <select name="ins_statut" class ="ins_statut" onChange='Choix(this)'>
                        <option value='1'>Particulier</option>
                        <option value='2'>Professionnel</option>
                    </select>
                </td>
            </tr>


<!-- Si l'utilisateur choisit Professionnel, on affiche le champ Numéro NIF-->
            <tr style="display:none" id="tr_num_nif">
                <td><label for='ins_nif'>Numéro NIF :</label></td>
                <td><input type='text' class='ins_nif' name = 'ins_nif'></td>
            </tr>
<!--Sinon on affiche directement la suite -->

            <tr >
                <td><label for='ins_nom'>Nom :</label></td>
                <td><input type='text' class='ins_nom' name = 'ins_nom'></td>
            </tr>
            
            <tr>
                <td><label for='ins_pseudo'>Choisir un pseudo : </label></td>
                <td><input type='text' class='ins_pseudo' name = 'ins_pseudo'></td>
            </tr>

            <tr>
                <td><label for='ins_email'>Email :</label></td>
                <td><input type='text' class='ins_email' name = 'ins_email'></td>
            </tr>
            <tr>
                <td><label for='ins_email2'>Retaper votre email :</label></td>
                <td><input type='text' class='ins_email' name = 'ins_email2'></td>
            </tr>

            <tr>
                <td><label for='ins_pass'>Mot de pass :</label></td>
                <td><input type='password' class='ins_pass' name = 'ins_pass'></td>
            </tr>
            
            <tr>
                <td><label for='ins_pass2'>Retaper votre mot de pass :</label></td>
                <td><input type='password' class='ins_pass' name = 'ins_pass2'></td>
            </tr>

             <tr>
                <td> </td>
                <td><input type = 'submit' class ='ins_submit' value = 'Enregistrer'></td>
            </tr>

        </table>
    </form>                                   
</div>
   
<script type="text/javascript">
function Choix(elem){
   var valeur = elem.value;
   var trNumNif = document.getElementById('tr_num_nif');
   if(valeur=='2'){
     trNumNif.style.display='';
   }else{
    trNumNif.style.display='none';
   }
 }
 
</script>



Pour la seconde.... je te laisse chercher sur le net.... tu trouveras de nombreux exemples d'utilisation de l'ajax
( Ajax = Javascript + langage Serveur (comme le PHP ))

Je peux tout de même te dire que pour faire de l'ajax... je te conseille d'utiliser la librairie JQUERY.




Cordialement,
Jordane
0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
14 août 2015 à 10:29
Un grand remerciement pour toi Jordane. Votre reponse m'a beaucoup aidé.
Merci et bonne continuation.

Lerod
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
14 août 2015 à 11:06
0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
14 août 2015 à 16:27
Merci Jordane!
bon dev toi aussi!
0