Undefined index quand je clique sur le bouton submit

**Houssem BEDHIEF** · 11/01/2013, 15h10

Bonjour tout le monde,

Je suis en train de développer un site web en utilisant des divs. J'ai les DIVs suivants :
- Header,
- Left (Menu),
- Right (qui contient un moteur de recherche et un espace adhérents)
- Middle (DIV dans laquelle je dois avoir mes différentes page php lorsque je clique sur un lien de la DIV Left (c.à.d. Menu), ou lorsque je clique sur le bouton submit d'un formulaire de la DIV right)
- Footer.

Bon, tout va bien avec la DIV Left, c'est à dire les pages sont affichées dans la DIV Middle. Toutefois, lorsque je clique sur le bouton submit du moteur de recherche, le contenu du champ du texte ne se poste pas (j'utilise $_POST['Text_field_name'], j'ai eu un message d'erreur :

Notice: Undefined index: Text_field_name in C:\Program Files\EasyPHP 5.3.9\www\Site_Mutuelle_Armee_Tunisienne\index_18.php on line 32

Les noms des fichiers php de mon site sont de la forme index_1.php, index_2.php, etc. car je suis en train d'utiliser le # pour afficher l'url des pages sous la forme #index1.php, #index2.php, etc.

Le code jQuery que je suis en train d'utiliser est le suivant :

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
var default_content="";
$(document).ready(function(){
	checkURL();
	$('ul#mainmenu li a').click(function (e){
 
			checkURL(this.hash);
 
	});
 
	//filling in the default content
	default_content = $('#middle').html();
 
	setInterval("checkURL()",250);
 
});
 
var lasturl="";
 
function checkURL(hash)
{
	if(!hash) hash=window.location.hash;
 
	if(hash != lasturl)
	{
		lasturl=hash;
 
		// FIX - if we've used the history buttons to return to the homepage,
		// fill the pageContent with the default_content
 
		if(hash=="")
		$('#middle').html(default_content);
 
		else
		loadPage(hash);
 
	}
}
function loadPage(url)
{	
	url=url.replace('#index','');
 
 
	$.ajax({
		type: "POST",
		url: "load_page.php",
		data: 'index='+url,
		dataType: "html",
		success: function(msg){
 
			if(parseInt(msg)!=0)
			{
				$('#middle').html(msg);
			}
		}
 
	});
 
}

Le code php de la page load_page.php est le suivant :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
 
$page = (int)$_POST['index'];
if (file_exists('index_'.$page.'.php'))
include('index_'.$page.'.php');
else
echo"page non trouvée!!!";
 
?>

Merci d'avance,
Houssem Tunisie

**Bovino** · 11/01/2013, 15h25

Ton code jQuery n'envoie aucun paramètre Text_field_name, c'est donc normal que PHP ne le reçoive pas...

Ou alors j'ai mal compris ta question ?

**Houssem BEDHIEF** · 11/01/2013, 16h09

Merci pour la réponse

Je m'explique encore plus.
La DIV Left (celle du menu) est la suivante :

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
<div id="left">
  <ul id="mainmenu">
     <li class="bg"></li>
     <li><a href= "#index2.php"></a></li>
     <li><a href= "#index3.php"></a></li>
	 <li><a href= "#index4.php"></a></li>
     <li><a href= "#index5.php"></a></li>
     <li class="bg">الخدمات المسداة</li>
     <li><a href= "#index6.php"></a></li>
     <li><a href= "#index7.php"></a></li>
     <li><a href= "#index8.php"></a></li>
     <li><a href= "#index9.php"></a></li>
     <li class="bg">خدمات على الخط</li>
     <li><a href= "#index10.php"></a></li>
     <li><a href= "#index11.php"></a></li>
     <li><a href= "#index12.php"></a></li>
     <li><a href= "#index13.php"></a></li>
  </ul>
</div>

Donc, comme vous le remarquez, je suis en train d'utiliser "#index2.php" par exemple comme nom de la page (car j'utilise window.location.hash) pour l'affichage de l'URL. Ceci marche bien avec les liens du menu. Toutefois, lorsque j'ai créé le formulaire du moteur de recherche dont le code est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form id="target" method="post" action="#index18.php">
          <input type="text" name="req" id="req" size="8" value="البحث" onblur="if(this.value=='') this.value='البحث';" onfocus="if(this.value=='البحث') this.value='';">
		  <input type="submit" value="ok" />
        </form>

J'ai eu l'erreur "undefined index". Il est à noter que lorsque je mets la valeur de l'attribut action du formulaire à action="index_18.php", ça marche mais un nouvel onglet est ouvert. Néanmoins, j'aimerais trop que le résultat de la recherche sera affiché dans la DIV Middle (celle qui se situe dans le centre du site).
Bon, lorsque j'ai mis la ligne de code : "print_r($_POST);"dans la page "index_18.php" (c'est la page php qui permet d'accéder à la base de données MySQL pour retourner le résultat de la recherche), j'ai eu comme résultat :

Array ( [index] => 18.php ) et j'ai pas eu : Array ( [req] => ...)

Selon mon point de vue, je crois que la faute existe au niveau du fichier php : "load_page.php" qui ne permet pas de poster le champ de texte.

Merci d'avance

**Bovino** · 11/01/2013, 16h15

Ah... d'accord. Merci de faire remarquer que ton problème ne vient en rien du code que tu as montré au premier message...

C'était difficile de t'aider du coup !

Un lien de type ancre action="#index18.php" ne provoque pas de rechargement de la page, ça déplace juste la page au niveau de l'ancre si elle existe.
Donc pas de rechargement de page, pas de données à récupérer sur le serveur puisqu'il n'est pas appelé !

**Houssem BEDHIEF** · 11/01/2013, 16h23

Merci encore une fois Bovino. Donc, qu'est ce que je dois faire ? car le code Jquery que je suis en train d'utiliser est lié au code php de la page "load_page.php". Je me suis bloqué là

Merci d'avance

**Bovino** · 11/01/2013, 16h30

Tu pourrais vérifier à chaque requête AJAX si le champ est rempli. Si c'est le cas, l'ajouter aux paramètres puis le vider.

Au passage, au lieu de tes fonction onfocus et onblur, tu ferais mieux d'utiliser l'attribut placeholder !

**Houssem BEDHIEF** · 11/01/2013, 16h35

Bon, comment je peux le faire exactement car je suis débutant en Jquery. Honnêtement, je suis en train d'utiliser des codes sources que j'ai trouvés sur le net

**danielhagnoul** · 11/01/2013, 23h23

Bonsoir

Exemple, il suffit de copier-coller ma page de code pour tester.

Il y a un problème avec le code ci-dessous, dans ma page de test c'est le texte "البحث" qui est écrit !

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="fr" dir="ltr" manifest="http://danielhagnoul.developpez.com/pageTest.mf">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
                .hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
                nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
                aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
                article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
                .table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
                .ligne { display: table-row; }
                .caption { display: table-caption; text-align: center; }
                .table1 .ligne { min-height: 30rem; }
                .table1 article { min-width: 40rem; vertical-align: top; }
                                        
                /* TEST */
        </style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Validation des formulaires</h2>
		</hgroup>
	</header>
	<section class="conteneur">				
		<section class="table1">
			<!--<section class="caption">
					<h3>Table CCS3</h3>
			</section>-->
			<section class="ligne">
				<article>
 
					<form id="target" data-action="index_18.php">
						<input type="text" name="req" id="req" size="8" dir="rtl" lang="ara" value="البحث" placeholder="البحث">
						<input type="submit" value="ok">
					</form>
 
				</article>
				<article>
				</article>
			</section>
		</section>
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-11T23:20:16.856+01:00" pubdate>2013-01-11T23:20:16.856+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.0.0rc1.js"></script>
	<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>
                "use strict";
                                
                $( function(){
                        
                        $( "#target" ).submit( function(){
                                var jObjForm = $( this ),
                                        jObjReq = $( "#req" ),
                                        str = jObjReq.val(),
                                        strLength = str.length;
                                
                                if ( strLength > 0 && str != "البحث" ){
                                                
                                        var jqXHR = $.post( "load_page.php", {
                                                        "url" : jObjForm.data( "action" ),
                                                        "value" : jObjReq.val()
                                                }, "html" );
                                        
                                        jqXHR.done( function( data, textStatus, jqXHR ){
                                                // succès de la transaction, on doit traiter le contenu de data
                                                console.log( data, textStatus, jqXHR );
                                                
                                                // $( "#middle" ).html( data ); 
                                        });
                                        
                                        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
                                                // échec de la transaction, gérer la catastrophe
                                                console.log( jqXHR, textStatus, errorThrown );
                                                
                                        });
                        
                                        jqXhr.always( function( jqXHR, textStatus ){
                                                // la transaction est terminée
                                                console.log( jqXhr, textStatus );
                                                
                                        });
                                        
                                }
                                
                                return false;
                        });
                        
                });
                
                $( window ).load( function(){
                        
                });
        </script>
</body>
</html>

<!DOCTYPE html>
<html lang="fr" dir="ltr" manifest="http://danielhagnoul.developpez.com/pageTest.mf">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
					
		/* TEST */
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Validation des formulaires</h2>
		</hgroup>
	</header>
	<section class="conteneur">				
		<section class="table1">
			<!--<section class="caption">
					<h3>Table CCS3</h3>
			</section>-->
			<section class="ligne">
				<article>

					<form id="target" data-action="index_18.php">
						<input type="text" name="req" id="req"
 size="8" dir="rtl" lang="ara" value="البحث" placeholder="البحث">
						<input type="submit" value="ok">
					</form>
        					
				</article>
				<article>
				</article>
			</section>
		</section>
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-11T23:20:16.856+01:00" pubdate>2013-01-11T23:20:16.856+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.0.0rc1.js"></script>
	<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>
		"use strict";
				
		$( function(){
			
			$( "#target" ).submit( function(){
				var jObjForm = $( this ),
					jObjReq = $( "#req" ),
					str = jObjReq.val(),
					strLength = str.length;
				
				if ( strLength > 0 && str != "البحث" ){
						
					var jqXHR = $.post( "load_page.php", {
							"url" : jObjForm.data( "action" ),
							"value" : jObjReq.val()
						}, "html" );
					
					jqXHR.done( function( data, textStatus, jqXHR ){
						// succès de la transaction, on doit traiter le contenu de data
						console.log( data, textStatus, jqXHR );
						
						// $( "#middle" ).html( data );	
					});
					
					jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
						// échec de la transaction, gérer la catastrophe
						console.log( jqXHR, textStatus, errorThrown );
						
					});
			
					jqXhr.always( function( jqXHR, textStatus ){
						// la transaction est terminée
						console.log( jqXhr, textStatus );
						
					});
					
				}
				
				return false;
			});
			
		});
		
		$( window ).load( function(){
			
		});
	</script>
</body>
</html>

Undefined index quand je clique sur le bouton submit

jQuery

Discussions similaires

Partager

Partager