Bonjour,
J'ai un petit problème que je n'arrive pas à résoudre depuis ce matin ;
Je suis en train de développer un formulaire en WEB et je souhaiterais créer un Evènement particuliers.
Au début du formulaire, il est possible à l'utilisateur de choisir grâce à un <select> s'il veut être anonyme ou s'il souhaite écrire son nom.
Mon but serait de pouvoir faire en sorte que lorsque la personne sélectionne l'option "nom" il y ait à côté du <select> un input de type texte qui s'affiche pour qu'il puisse y insérer à l'intérieur son nom.
Tant que l'utilisateur ne sélectionne pas cette option l'input ne doit pas s'afficher.
Voici le code que j'ai réalisé jusqu'à maintenant :
PHP :
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
25
26
27
28
29
30
31
32
33
34
35
36 <html> <head> <?php require './config/config.inc.php'; //require WAY . '/includes/head.inc.php'; ?> <meta charset="UTF-8"> <link rel="stylesheet" href="form.css" /> <!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- JQuery validate --> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script> <title>L'entreprise</title> </head> <body> <img src="./logo_P.png" width="10%" height="10%"> <?php //if (isset($_POST['fr'])) { ?> <!--<form action="./fr_A.php" method="post" id="satisfaction_form">--> <form action= "<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="satisfaction_form"> <div id="text"> <h1> veuillez entrez votre nom : </h1> <!--<input type="select" name="nom" value="anonyme">--> <select id="choix_select"> <option id="anonyme">Anonyme</option> <option id="nom">Nom</option> </select> <input type="text" name="nom_texte" id="nom_texte">
JS :
Code js : 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
32
33
34
35
36
37
38
39
40 $(function () { $("#choix_select").optSelected(function (){ //if($("#nom").is(":selected")) { $("#nom_texte").css("display", "block"); //} }); $("#satisfaction_form").validate({ submitHandler: function (form) { console.log("Formulaire envoyé"); $.post( //fichier qui va recevoir nos données en POST "./json/login.json.php?_=" + Date.now(), //variable envoyées { /*titre_per: $("#email_per").val(), password_per: $("#password_per").val()*/ //tab_per: $_POST.val(); choix_select: $("#choix_select").val(), descrition: $("#descrition").val() } /*function result(data, status) { if(data.message){ console.log(data.message.texte); message(data.message.texte, data.message.type); }*/ /*if(data.reponse === true){ message("Logué", "Success"); window.location.assign("index.php"); } }*/ ); } }); });
CSS :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 #nom_texte{ display: none; }
Je vous en serais très reconnaissant si vous pouviez m'aider à résoudre ce problème ou du moins à m'éclairer !
Bonne journée/soirée !
Partager