Probleme formulaire ajax et php
Mel-K
Messages postés
7
Date d'inscription
Statut
Membre
Dernière intervention
-
Mel-K Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
Mel-K Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voila je ne maitrise pas du tout ajax ! mais j'essaie de l'utiliser pour enrichir le contenu de la partie administrative d'un site internet
seulement j'ai pas mal d'erreurs au niveau des variables php, en faite j'essaye de récupérer les données entrées dans des champs, mais sans qu'il y le bouton submit, et donc directement avec une fonction et un evenement onchange() de javascript.
Une fois que les champs sont remplies, une image ou un message doit normalement s'afficher en expliquant comme quoi le formulaire est bien remplie.
mais j'ai l'impression qu'a partir du moment ou il y a un test en PHP du type
if(isset($_POST['menu_fr']) && ($_POST['menu_es']) && ($_POST['menu_ca']))
pour verifier si les variables existe bien, AJAX ne fonctionne plus.
par contre si j'enleve se test la, AJAX va bien faire passé les données dans les variables PHP, mais du coup à l'affichage de la page web j'obtiens des erreurs du type :
Undefined index: menu_ca
Undefined index: menu_fr
Undefined index: menu_es
je ne sait pas comment faire en sorte que AJAX fasse passer les valeurs entrée dans les champs texte dans des variables PHP afin de les inserer dans une base de donnée tout en integrant un test sur ces variables PHP pour voir si elle existe bien afin qu'il n'y est pas d'erreur sur la page,
puis je n'arrive pas à afficher une image ou un message directement dans la page web, qui indique bien que le formulaire est remplie une fois que tous les champs sont remplies !! merci d'avance.
Voila le code :
<?php
//inclusion de la connection
include("../includes/conf.php");
include("../includes/connection.php");
include("../includes/fonctions.php");
//test qui va récupérer les donnée passé en POST dans des variables, uniquement si les trois sont remplies.
if(isset($_POST['menu_fr']) && ($_POST['menu_es']) && ($_POST['menu_ca'])){ <-- SI j'enleve se test la les variables sont inserer dans la base grâce à AJAX.
$menu_ca=addslashes($_POST['menu_ca']);
$menu_fr=addslashes($_POST['menu_fr']);
$menu_es=addslashes($_POST['menu_es']);
$req=mysql_query("INSERT INTO menu (menu_fr, menu_es, menu_ca) VALUES ('".$_POST['menu_fr']."', '".$_POST['menu_es']."', '".$_POST['menu_ca']."')");
$id=mysql_insert_id();
$message="menu inséré avec succès. Voulez vous <a href='add_texte.php?id=".$id."'>ajouter un texte</a> ou <a href='adSousMenu.php?id=".$id."'>ajouter un sous menu</a> ?";
$req=mysql_query("SELECT * FROM menu ORDER BY position ASC");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- LA PARTIE AJAX !-->
<script type='text/JavaScript'>
function init_xhr()
{
if (window.XMLHttpRequest) // Firefox
xhr = new XMLHttpRequest();
else
{
if (window.ActiveXObject) // Internet Explorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else // XMLHttpRequest non supporté par le navigateur
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
}
return xhr;
}
function go()
{
var xhr = init_xhr();
xhr.onreadystatechange = function () // création du listener
{
if (xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById("menu_fr").innerHTML = xhr.responseText;
reponse = xhr.responseText;
//window.alert(reponse);
}
}
xhr.open("POST", "adMenu.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("menu_fr=" + form1.menu_fr.value + "&menu_es=" + form1.menu_es.value + "&menu_ca=" + form1.menu_ca.value); << je récupère les données du formulaire
seconde_image = new Image(104,102)
seconde_image.src="tp_validee.png";
document.write('<img src="'+seconde_image.src+'"/>'); << L'image s'affiche mais sur une autre page, je n'arrive pas à l'afficher en directement dans la même page.
xhr.send(null);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image</title>
<!-- Copyright 2000, 2001, 2002, 2003 Macromedia, Inc. All rights reserved. -->
</head>
<body>
<div align="center">
<table width="799" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<div align="center"><img src="../images/logo_02.jpg" width="440" height="113" /></div>
</td>
</tr>
<tr>
<td colspan="3"><div align="center" class="Style4">
<h3 class="Style2 ">Gestion des rubriques du menu</h3>
</div></td>
</tr>
<tr>
<td width="395"><span class="Style4"></span></td>
<td width="19"><span class="Style4"></span></td>
<td width="386"><span class="Style4"></span></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr><form name="form1" method="post">
<tr>
<td><span class="Style4"></span></td>
<td><span class="Style4"></span></td>
<td><span class="Style4"></span></td>
</tr>
<tr>
<td align="right"><div align="right">menu français</div></td>
<td> </td>
<td><input type="text" name="menu_fr" id="textfield"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right">menu espagnol</td>
<td> </td>
<td><input type="text" name="menu_es" id="textfield2"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right">menu catalan</td>
<td>
</td>
<td>
<input type="text" name="menu_ca" id="textfield3" onchange="go();"/> <!-- Evenement pour utiliser la fonction javascritpt !-->
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <div id="image"></div> </td>
</tr>
<tr>
<td colspan="3" align="center"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr></form>
<tr>
<td colspan="3"><div align="center"><a href="gest_menu.php">retour</a></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
voila je ne maitrise pas du tout ajax ! mais j'essaie de l'utiliser pour enrichir le contenu de la partie administrative d'un site internet
seulement j'ai pas mal d'erreurs au niveau des variables php, en faite j'essaye de récupérer les données entrées dans des champs, mais sans qu'il y le bouton submit, et donc directement avec une fonction et un evenement onchange() de javascript.
Une fois que les champs sont remplies, une image ou un message doit normalement s'afficher en expliquant comme quoi le formulaire est bien remplie.
mais j'ai l'impression qu'a partir du moment ou il y a un test en PHP du type
if(isset($_POST['menu_fr']) && ($_POST['menu_es']) && ($_POST['menu_ca']))
pour verifier si les variables existe bien, AJAX ne fonctionne plus.
par contre si j'enleve se test la, AJAX va bien faire passé les données dans les variables PHP, mais du coup à l'affichage de la page web j'obtiens des erreurs du type :
Undefined index: menu_ca
Undefined index: menu_fr
Undefined index: menu_es
je ne sait pas comment faire en sorte que AJAX fasse passer les valeurs entrée dans les champs texte dans des variables PHP afin de les inserer dans une base de donnée tout en integrant un test sur ces variables PHP pour voir si elle existe bien afin qu'il n'y est pas d'erreur sur la page,
puis je n'arrive pas à afficher une image ou un message directement dans la page web, qui indique bien que le formulaire est remplie une fois que tous les champs sont remplies !! merci d'avance.
Voila le code :
<?php
//inclusion de la connection
include("../includes/conf.php");
include("../includes/connection.php");
include("../includes/fonctions.php");
//test qui va récupérer les donnée passé en POST dans des variables, uniquement si les trois sont remplies.
if(isset($_POST['menu_fr']) && ($_POST['menu_es']) && ($_POST['menu_ca'])){ <-- SI j'enleve se test la les variables sont inserer dans la base grâce à AJAX.
$menu_ca=addslashes($_POST['menu_ca']);
$menu_fr=addslashes($_POST['menu_fr']);
$menu_es=addslashes($_POST['menu_es']);
$req=mysql_query("INSERT INTO menu (menu_fr, menu_es, menu_ca) VALUES ('".$_POST['menu_fr']."', '".$_POST['menu_es']."', '".$_POST['menu_ca']."')");
$id=mysql_insert_id();
$message="menu inséré avec succès. Voulez vous <a href='add_texte.php?id=".$id."'>ajouter un texte</a> ou <a href='adSousMenu.php?id=".$id."'>ajouter un sous menu</a> ?";
$req=mysql_query("SELECT * FROM menu ORDER BY position ASC");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- LA PARTIE AJAX !-->
<script type='text/JavaScript'>
function init_xhr()
{
if (window.XMLHttpRequest) // Firefox
xhr = new XMLHttpRequest();
else
{
if (window.ActiveXObject) // Internet Explorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else // XMLHttpRequest non supporté par le navigateur
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
}
return xhr;
}
function go()
{
var xhr = init_xhr();
xhr.onreadystatechange = function () // création du listener
{
if (xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById("menu_fr").innerHTML = xhr.responseText;
reponse = xhr.responseText;
//window.alert(reponse);
}
}
xhr.open("POST", "adMenu.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("menu_fr=" + form1.menu_fr.value + "&menu_es=" + form1.menu_es.value + "&menu_ca=" + form1.menu_ca.value); << je récupère les données du formulaire
seconde_image = new Image(104,102)
seconde_image.src="tp_validee.png";
document.write('<img src="'+seconde_image.src+'"/>'); << L'image s'affiche mais sur une autre page, je n'arrive pas à l'afficher en directement dans la même page.
xhr.send(null);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image</title>
<!-- Copyright 2000, 2001, 2002, 2003 Macromedia, Inc. All rights reserved. -->
</head>
<body>
<div align="center">
<table width="799" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<div align="center"><img src="../images/logo_02.jpg" width="440" height="113" /></div>
</td>
</tr>
<tr>
<td colspan="3"><div align="center" class="Style4">
<h3 class="Style2 ">Gestion des rubriques du menu</h3>
</div></td>
</tr>
<tr>
<td width="395"><span class="Style4"></span></td>
<td width="19"><span class="Style4"></span></td>
<td width="386"><span class="Style4"></span></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr><form name="form1" method="post">
<tr>
<td><span class="Style4"></span></td>
<td><span class="Style4"></span></td>
<td><span class="Style4"></span></td>
</tr>
<tr>
<td align="right"><div align="right">menu français</div></td>
<td> </td>
<td><input type="text" name="menu_fr" id="textfield"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right">menu espagnol</td>
<td> </td>
<td><input type="text" name="menu_es" id="textfield2"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right">menu catalan</td>
<td>
</td>
<td>
<input type="text" name="menu_ca" id="textfield3" onchange="go();"/> <!-- Evenement pour utiliser la fonction javascritpt !-->
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <div id="image"></div> </td>
</tr>
<tr>
<td colspan="3" align="center"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr></form>
<tr>
<td colspan="3"><div align="center"><a href="gest_menu.php">retour</a></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
A voir également:
- Probleme formulaire ajax et php
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Easy php - Télécharger - Divers Web & Internet
- Formulaire de contact le bon coin introuvable ✓ - Forum Réseaux sociaux
6 réponses
Salut,
J'ai pas lu en entier ton pb, mon domaine à moi c'est plutôt les bases de données (mais pas php).
mais j'ai vu ça
que dirais-tu de le réécrire
J'ai pas lu en entier ton pb, mon domaine à moi c'est plutôt les bases de données (mais pas php).
mais j'ai vu ça
if(isset($_POST['menu_fr']) && ($_POST['menu_es']) && ($_POST['menu_ca']))dont tu te plains que ça march pô
que dirais-tu de le réécrire
if(isset($_POST['menu_fr']) && isset($_POST['menu_es']) && isset($_POST['menu_ca']))? juste pour voir si Ajax fonctionne toujours pas.
if (xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById("menu_fr").innerHTML = xhr.responseText;
je ne vois nulle le part de balise avec un id="menu_fr"
donc comment veux tu que ajax aille ecrire la réponse xhr
ensuite pour ton image essayes avec un innerHTML sur l'id d'un div
plutot qu'un document.write
{
document.getElementById("menu_fr").innerHTML = xhr.responseText;
je ne vois nulle le part de balise avec un id="menu_fr"
donc comment veux tu que ajax aille ecrire la réponse xhr
ensuite pour ton image essayes avec un innerHTML sur l'id d'un div
plutot qu'un document.write
j'ai modifier par :
document.getElementById("textfield").innerHTML = xhr.responseText;
document.getElementById("textfield2").innerHTML = xhr.responseText; document.getElementById("textfield3").innerHTML = xhr.responseText;
mais sa ne fonctionne toujours pas, puis pour l'image, je doit me tromper dans l'utilisation du innerHTML, je crée un <div id="image"></div> puis plus haut dans la fonction "go()" je met se code :
image = new Image(104,102)
image.src="tp_validee.png";
document.write('<img src="'+seconde_image.src+'"/>');
document.getElementById("image").innerHTML=<img src="'+seconde_image.src+'"/>;
document.getElementById("textfield").innerHTML = xhr.responseText;
document.getElementById("textfield2").innerHTML = xhr.responseText; document.getElementById("textfield3").innerHTML = xhr.responseText;
mais sa ne fonctionne toujours pas, puis pour l'image, je doit me tromper dans l'utilisation du innerHTML, je crée un <div id="image"></div> puis plus haut dans la fonction "go()" je met se code :
image = new Image(104,102)
image.src="tp_validee.png";
document.write('<img src="'+seconde_image.src+'"/>');
document.getElementById("image").innerHTML=<img src="'+seconde_image.src+'"/>;
pour l'image il ne faut pas mettre les deux doucment;write et inner.HTML
et garder le même nom soit image soit seconde_image
ensuite pour les inner.HTML si tu mets:
<input type="text" name="menu_fr" id="textfield"/>
ce sont des input et la tu ne peux pas y ecrire dedans par inner.HTML mais par .value
mais attention dans un champ input ça va mettre un texte pas une image,
et garder le même nom soit image soit seconde_image
seconde_image= new Image(104,102)
seconde_image.src="tp_validee.png";
document.getElementById("image").innerHTML=<img src="'+seconde_image.src+'"/>;
ensuite pour les inner.HTML si tu mets:
<input type="text" name="menu_fr" id="textfield"/>
ce sont des input et la tu ne peux pas y ecrire dedans par inner.HTML mais par .value
document.getElementById("textfield").value = xhr.responseText;
mais attention dans un champ input ça va mettre un texte pas une image,
J'ai modifié les id de façon à garde les .innerhtml car avec value, sa me fesait des erreurs
<input type="text" id="menu_fr" name="menu_fr"/>
pour l'image j'ai modifié, sa ne marche toujours pas, c peut être un problème de quote,
ou peut etre que mon div n'est pas bon :
<div id="image"></div>
pour l'envoie des données ajax me récupère bien les variables, mais si je sort le menu_ca de la condition en php.
$menu_ca=addslashes($_POST['menu_ca']);
if(isset($_POST['menu_fr']) && isset($_POST['menu_es']))
{
$menu_fr=addslashes($_POST['menu_fr']);
$menu_es=addslashes($_POST['menu_es']);
hors c précisément le textbox du menu_ca qui déclenche la fonction go() de ajax, avec l'evenement onchange :
<input type="text" id="menu_ca" name="menu_ca" onchange="go();"/>
j'ai l'impression que ajax ne peut traiter les données que si j'enlève cette condition hors sa crée forcement une erreur php du type : Notice: Undefined index: menu_ca
<input type="text" id="menu_fr" name="menu_fr"/>
pour l'image j'ai modifié, sa ne marche toujours pas, c peut être un problème de quote,
ou peut etre que mon div n'est pas bon :
<div id="image"></div>
pour l'envoie des données ajax me récupère bien les variables, mais si je sort le menu_ca de la condition en php.
$menu_ca=addslashes($_POST['menu_ca']);
if(isset($_POST['menu_fr']) && isset($_POST['menu_es']))
{
$menu_fr=addslashes($_POST['menu_fr']);
$menu_es=addslashes($_POST['menu_es']);
hors c précisément le textbox du menu_ca qui déclenche la fonction go() de ajax, avec l'evenement onchange :
<input type="text" id="menu_ca" name="menu_ca" onchange="go();"/>
j'ai l'impression que ajax ne peut traiter les données que si j'enlève cette condition hors sa crée forcement une erreur php du type : Notice: Undefined index: menu_ca
tu as bien mis les isset dans la condition:
ensuite je ne vois pas bien ton principe:
- tu n'as pas de bouton submit dans ton formulaire, comment fais tu pour récupérer les valeurs $_POST ?
- que contient ton fichier "adMenu.php" qui est appelé par Ajax ?
if(isset($_POST['menu_fr']) && isset($_POST['menu_es']) && isset($_POST['menu_ca'])){
ensuite je ne vois pas bien ton principe:
- tu n'as pas de bouton submit dans ton formulaire, comment fais tu pour récupérer les valeurs $_POST ?
- que contient ton fichier "adMenu.php" qui est appelé par Ajax ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ha ok je comprend ce que tu veux faire, mais quel interêt puisque par ajax tu va appeler cette page, donc tu va toute la recevoir y compris la partie html donc le formulaire c'est comme si tu rechargeait la page avec le bouton submit
le principe de ajax n'est pas tout à fait comme ça
sur un evenement tu déclenche la fonction ajax qui appelle un script php sur le serveur en lui passant une ou plusieurs valeurs
ce script effectue une action, un ENR dans une base, une lecture de base etc.. et renvoie une réponse
réponse que tu écris par un innerHTML dans un div par exemple
le script php doit être différent de celui de ta page "de base"
en résumé tu enleve toute la partie php de ta page Admenu
et tu le mets dans un autre fichier php par exemple repPhpAjaxAdMenu.php
tu modifies bien sur
xhr.open("POST", "adMenu.php", true);
en
le principe de ajax n'est pas tout à fait comme ça
sur un evenement tu déclenche la fonction ajax qui appelle un script php sur le serveur en lui passant une ou plusieurs valeurs
ce script effectue une action, un ENR dans une base, une lecture de base etc.. et renvoie une réponse
réponse que tu écris par un innerHTML dans un div par exemple
le script php doit être différent de celui de ta page "de base"
en résumé tu enleve toute la partie php de ta page Admenu
et tu le mets dans un autre fichier php par exemple repPhpAjaxAdMenu.php
tu modifies bien sur
xhr.open("POST", "adMenu.php", true);
en
xhr.open("POST", "repPhpAjaxAdMenu.php", true);
sinon si tu veux tout simplement que ton formulaire soit posté sans bouton submit tu mets:
et la il sera envoyé sans passer par Ajax
<input type="text" id="menu_ca" name="menu_ca" onchange="submit();"/>
et la il sera envoyé sans passer par Ajax
J'ai essayé de dissocié l'ajax et le php mais sa ne fonctionne toujours pas, après avoir remplie tout les champs, rien ne se passe, j'ai tenté de mettre un windows.alert dans l'ajax pour voir si il était exécuté mais apparament non, donc bon je vais utiliser l'évènement javascript "submit()"; en tous cas merci de ton aide Alain_42 !
<input type="text" name="menu_ca" id="textfield3" onchange="go();"/>
et au if(isset($_POST['menu_fr']) && isset($_POST['menu_es']) && isset($_POST['menu_ca']))
qui sont incompatible, si je n'effectue pas le test sur la variable "menu_ca", sa fonctionne, mais du coup sa me marque un problème de variable....