Gestion des variables de formulaire: JS ou AJAX

**kondor76** · 19/08/2015, 17h01

Bonjour,

Alors voila, j'ai ecrit ce bout de 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
function cache_champs_form(){
        document.getElementById("nom_rue").style.display="none";
        document.getElementById("num_rue").style.display="none";
        document.getElementById("passwd").style.display="none";
        document.getElementById("email").style.display="none";
        document.getElementById("telephone").style.display="none";
        document.getElementById("nb_pers_foyer").style.display="none";
}
function affiche_list_nom_rue(){
        document.getElementById("nom_rue").style.display="block";
}
function affiche_list_num_rue(){
        document.getElementById("num_rue").style.display="block";
}

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<body onLoad="cache_champs_form()">
                <div id="header">Site de la copropriété Les Trouvères</div>
                <p>
                <center>Bienvenue sur la page d'enregistrement
                <p>
                <form method=post action="register.php">
                <p>
                <div id="pseudo" class="user_form_reg"><label for="pseudo">Pseudo :</label><input name="pseudo" type="text" required /></div>
                <p>
                <div id="nom" class="user_form_reg"><label for="nom">Votre nom :</label><input name="nom" type="text" required /></div>
                <p>
                <div id="prenom" class="user_form_reg"><label for="prenom">Votre prenom :</label><input name="prenom" type="text" onkeydown="affiche_list_nom_rue()" required /></div>
                <p>
                <form method=POST action="register.php">
                <div id="nom_rue" class="user_form_reg"><label for="nom_rue">Votre rue :</label>
                <select name="nom_rue" onchange="affiche_list_num_rue(this.options[this.selectedIndex].value)" required />
                <?php
                        $db=mysqli_connect("localhost","root","admin","copro_trouveres");
                        $req="select distinct nom_rue from adresses";
                        $res=mysqli_query($db,$req);
                        while ($row=mysqli_fetch_row($res)){
                                echo"<option name=\"nom_rue\" value=\"$row\">$row[0]</option>";
                        }
                ?>
                </select>
                </div>
                <p>
                <div id="num_rue" class="user_form_reg"><label for="num_rue">Votre rue :</label>
                <select name="num_rue" required />
                <?php
                        $db=mysqli_connect("localhost","root","admin","copro_trouveres");
                        $nom_rue=$_POST['nom_rue'];
                        $req="select num_rue from adresses where nom_rue=\'$nom_rue\'";
                        $res=mysqli_query($db,$req);
                        while ($row=mysqli_fetch_row($res)){
                                echo"<option name=\"num_rue\" value=\"$row\">$row[0]</option>";
                        }
                ?>
                </select>
                </div>
                <p>
                <div id="password" class="user_form_reg"><label for="password">Mot de Passe :</label><input type="password" name="password" required /></div>
                <p>
                <div id="email" class="user_form_reg"><label for="email">Votre email de contact</label><input name="email" type="text" required /></div>
                <p>
                <div id="telephone" class="user_form_reg"><label for="telephone">Votre telephone :</label><input name="telephone" type="text" required /></div>
                <p>
                <div id="nb_pers_foyer" class="user_form_reg"><label for="nb_pers_foyer">Nombre de personne composant votre foyer :</label><input name="nb_pers_foyer" type="text" required/></div>
                <p>
                <p>
                <div id="validation" class="user_form_reg"><input type="submit" value="Connexion" /></div>
                </form>
</body>

Ma question est toute simple: Je souhaite passer la variable nom_rue et sa valeur via l'évènement onchange à la fonction JS affiche_list_num_rue() pour qu'elle affiche la div suivante (num_rue) avec en paramètre nom_rue qui permettra aux bloc php d'effectuer une requête sql pour obtenir la liste des numéros dans la rue? Je ne vois pas comment faire passer la variable nom_rue et sa valeur jusqu'à cette requête....

Je suis plus ingé système que dev et c'est pas évident...

Merci de votre aide,

Kondor76

**sekaijin** · 23/08/2015, 10h19

Salut
Le php est interprété par le serveur AVANT que la page ait été envoyé au navigateur.
Le javascript est interprété par le navigateur APRES que la page ait été affiché.

A+JYT

**ABCIWEB** · 24/08/2015, 05h54

Dans ce cas il faut passer par ajax pour peupler tes options de numéros de rue. Il y a un tuto ici

Sinon avec jquery ça peut aller plus vite. Un exemple fonctionnel :

page "formulaire.php"

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php
if(!empty($_POST))
{
        echo '<pre>';
        print_r($_POST);
        echo '</pre>';
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Document sans titre</title>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
	$("#select_nom_rue").on("change",function()
	{
		var option = $(this).val();
 
		var select_num_rue = $("#select_num_rue");
 
		if(option == '')
		{
			select_num_rue.css('display','none');
		}
		else
		{
			$.ajax({
				method: "POST",
				url: "test_ajax_options.php", // adresse de ton script php
				data: {'nom_rue': option}, // Variables à transmettre au serveur 
				dataType : 'html' // type de retour attendu
				})
				.done(function(result) {
				select_num_rue.html(result).css('display','inline');			   
				});
		}
	})
})
</script>
</head>
 
<body>
	<form id="register" method="post" action="">
        <div id="nom_rue" class="user_form_reg"><label for="nom_rue">Votre rue :</label>
        <select id="select_nom_rue" name="nom_rue" required />
            <option></option>
            <option value="rue 1">rue n°1</option>
            <option value="rue 2">rue n°2</option>
            <option value="rue 3">rue n°3</option>
        </select>
        </div>
 
        <div id="num_rue" class="user_form_reg"><label for="num_rue">numéro :</label>
        <select id="select_num_rue" name="num_rue" style='display:none' required />
        </select>
        </div>   
        <input type = "submit" value ="ok"/>
	</form>
</body>
</html>

page "test_ajax_options.php" :

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
<?php
$option_rue = filter_input(INPUT_POST,'nom_rue');
 
if(isset($option_rue))
{
        switch($option_rue)
        {
                case "rue 1" :echo '<option></option>
                                                <option value="num 1-1">numéro 1-1</option>
                                                <option value="num 1-2">numéro 1-2</option>
                                                <option value="num 1-3">numéro 1-3</option>';break;
                                                
                case "rue 2" :echo '<option></option>
                                                <option value="num 2-1">numéro 2-1</option>
                                                <option value="num 2-2">numéro 2-2</option>
                                                <option value="num 2-3">numéro 2-3</option>';break;
                                                
                case "rue 3" :echo '<option></option>
                                                <option value="num 3-1">numéro 3-1</option>
                                                <option value="num 3-2">numéro 3-2</option>
                                                <option value="num 3-3">numéro 3-3</option>';break;
        }
}
?>

"formulaire.php" appelle le script "test_ajax_options.php". Evidemment dans "test_ajax_options.php" tu fais ta requête à la place du switch sur "$option_rue" que j'ai mis pour que la démo soit fonctionnelle.

Note : dans mon exemple, "formulaire.php" et "test_ajax_options.php" sont dans le même répertoire, sinon il faut fournir le chemin complet du fichier php dans le paramètre "url:" (par rapport aux script appelant).

Gestion des variables de formulaire: JS ou AJAX

JavaScript

Discussions similaires

Partager

Partager