Afficher un élément selon un événement de click en JS

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:

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:

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:

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 !