Bonjour à tous,

Je suis actuellement sur un projet de développement web. J'ai décidé de décomposer ma page en deux grosses parties:

• - La première qui contient tout le corps de ma page (menus, bannière, etc.)
• - La deuxième dans laquelle j'affiche les pages web que je souhaite.

C'est avec cette deuxième que j'ai un problème . En effet, pour ne pas avoir à rafraichir ma page et pour ne pas utiliser d'iframe, j'utilise une balise div dans laquelle je place la page html générée par le serveur lors d'un clique dans le menu. Je fait cela avec un script JavaScript qui fonctionne très bien .

Cependant, à un moment j'affiche un formulaire et je souhaiterai que lorsque je clique sur le submit, mes informations soient envoyées dans la balise div. Je sais le faire avec un iframe mais là je suis coincé .

Voici le code pour modifier le div en fonction de la page appelée (il n'est pas de moi):

// url: lien vers la page que l'on souhaite afficher.
// id: id de la balise div dans laquelle on affiche la page.
function Include(url, id) {
	var xhr_object = null;
	var position = id;
	
	if(window.XMLHttpRequest) {
		xhr_object = new XMLHttpRequest();
	}
	else if(window.ActiveXObject) {
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	// On ouvre la requete vers la page désirée.
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
		if(xhr_object.readyState == 4) {
			// j'affiche dans la DIV spécifiée le contenu retourné par le fichier
			document.getElementById(position).innerHTML = xhr_object.responseText;
		}
	}
	
	// dans le cas du get
	xhr_object.send(null);
}

Et voici le formulaire affiché dans la balise div (il est généré en PHP):

echo "<form action='index.php' method='post' name='FormAdd'>";
echo "<table class='donnees' id='Form' width='60%'>";
echo "<tr>";
echo "<td width='15%'><input type='text' name='field0'></td>";
echo "<td width='25%'><input type='text' name='field1'></td>";
echo "<td width='20%'><input type='text' name='field2'></td>";
echo "</tr>";
echo "<td colspan='3' align='center'>";
echo "<a href='#' onclick=\"document.FormAdd.submit(); Include('".FILE_ADD_SERVERS."', 'content');\">Add Server(s)</a>";
echo "</td>";
echo "</table>";
echo "</form>";

Le index.php contient juste mon div et un menu. J'affiche m'a page dans le div avec un:

<a href='#' onclick="Include('MaPage.php', 'content');">Ma Page</a>

Je vous remercie d'avance pour votre aide !

Sebinou

Salut, j'ai fais un module formulaire de contact : http://prbaron.free.fr/tutorials/contact-form/ qui fait la même chose que ce que tu souhaites faire. Toutes les sources sont téléchargeables pour comprendre le code. Il faut que tu partes sur de l'Ajax.

Merci pour ta réponse rapide Ico. Cela m'a permis de résoudre mon problème. J'ai aussi utilisé ce tutoriel (l'exemple 2 surtout) : http://www.siteduzero.com/tutoriel-3-1 [...] prequest.html

Une fois adapté à mon code, voici se que cela donne:

Pour modifier le div en fonction de la page appelée.

function IncludeWithForm(nameCmpField, nameCmpEntry, url, id) {
	var xhr_object = null;
	var nbEntry = document.getElementById(nameCmpEntry).value;
	var nbField = document.getElementById(nameCmpField).value;
	var getTable = new Array();
	var cmpTable = 0;
	var idName;
	
	if(window.XMLHttpRequest) {
		xhr_object = new XMLHttpRequest();
	}
	else if(window.ActiveXObject) {
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xhr_object.onreadystatechange = function() {
		if (xhr_object.readyState == 4 && (xhr_object.status == 200 || xhr_object.status == 0)) {
			readData(xhr_object.responseText);
		}
	};
	
	// Pour tous les éléments de notre formulaire.
	getTable[cmpTable] = "nbEntry=" + nbEntry + "&nbField=" + nbField;
	cmpTable++;
	for(var i=0; i<nbEntry; i++) {
		for(var j=0; j<nbField; j++) {
			idName="field"+i+j;
			getTable[cmpTable] = idName + "=" + encodeURIComponent(document.getElementById(idName).value);
			cmpTable++;
		}
	}
	
	// On ouvre la requete vers la page désirée.
	xhr_object.open("GET", url + "?" + getTable.join('&'), true);
	xhr_object.onreadystatechange = function(){
		if(xhr_object.readyState == 4) {
			// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
			document.getElementById(id).innerHTML = xhr_object.responseText;
		}
	}
	
	// dans le cas du get
	xhr_object.send(null);
}

Le formulaire affiché dans la balise div (il est généré en PHP):

echo "<form action='index.php' method='post' name='FormAdd'>";
echo "<input type='hidden' id='nbEntry' value='1' />";
echo "<input type='hidden' id='nbField' value='3' />";
echo "<table class='donnees' id='Form' width='60%'>";
echo "<tr>";
echo "<td width='15%'><input type='text' id='field00' /></td>";
echo "<td width='25%'><input type='text' id='field01' /></td>";
echo "<td width='20%'><input type='text' id='field02' /></td>";
echo "</tr>";
echo "<td colspan='3' align='center'>";
echo "<a href='#' onclick=\"IncludeWithForm('nbField', 'nbEntry', '".FILE_ADD_SERVERS."', 'content');\">Add Server(s)</a>";
echo "</td>";
echo "</table>";
echo "</form>";

Se code me permet de traiter un formulaire avec autant de donnée que je le souhaite. Il est générique je pourrait donc l'utiliser sur n'importe laquelle de mes pages web.

Merci pour ton aide.

Sebinou