Bonjour,

Pour faire plus propre, j'ai remplacé toutes ces vieilles IFRAMES sur mon site en optant pour les blocs DIV en Ajax. Cependant, je rencontre un problème avec l'utilisation des formulaires. Je ne sais pas comment rediriger l'utilisateur sur la page de traitement du formulaire à l'intérieur de ce même bloc DIV.

Pour les liens simples, j'utilise cette méthode :

<a href="#" onclick="envoieRequete('page.php','partieA');" >Lien</a>

Mais pour gérer un formulaire, je ne sais plus comment m'y prendre.
Ca ne doit pas être très compliqué pourtant :-/
J'ai testé des tonnes de choses et finalement, je me suis décidé à poser ma question ici.
Est ce que quelqu'un aurait la gentillesse de m'aider ?

<script type="text/javascript">
function envoieRequete(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ées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);

}
</script>

<style>
	#partieA{
		width:360px;
		height:59px;
		padding:0;
		border: 2px solid #000000;
	}
	#partieB{
		width:364px;
		height:530px;
		padding:0;
		border: 2px solid #000000;
	}
</style>

Salut,

Avec AJAX, tu peux envoyer la valeur d'un de tes formulaires à une page PHP.

Il suffit de récupérer chaque valeur du formulaire et de les envoyer à la page de traitement en PHP.

[EDIT] Si tu veux un exemple : (je ne l'ai pas testé.)

<!-- Ta page importée via Ajax -->
<div id="page">
	<form method="post" action="get">
		<input type="text" name="field" />
		<input type="text" name="field2" />
		<input type="button" onClick="sendForm();" />
	</form>
</div>

function getXMLHttpRequest()
{
	var xhr = null;
	
	if(window.XMLHttpRequest || window.ActiveXObject)
	{
		if(window.ActiveXObject)
		{
			try
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			xhr = new XMLHttpRequest(); 
		}
	}
	else
	{
		alert('Votre navigateur ne supporte pas l\'objet XMLHTTPRequest...');
		return null;
	}
	
	return xhr;
}

function sendForm()
{
	var xhr = getXMLHttpRequest();
	var page = 'traitement.php';
	var value1 = encodeURIComponent(document.getElementsByTagName('input')[0].value);
	var value2 = encodeURIComponent(document.getElementsByTagName('input')[1].value);

	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
		{
			document.getElementById('page').innerHTML = xhr.responseText;
		}
	};

	xhr.open('POST', page, true);
	xhr.setRequestHeader('Content-Type", "application/x-www-form-urlencoded');
	xhr.send('field1=' + value + '&field2=' + value2);
}

je viens de tester en l'adaptant à mon site, mais lors d'un clic sur le bouton de soumission, il ne se passe rien.
J'ai essayé de mettre une "alerte" dans le fichier de traitement, mais elle ne se déclenche pas.
J'ai l'impression que sendForm() n'est pas appelé... assez bizarre :-/

D'accord.

Tu peux remettre les bouts de code correspondants ?
Et aussi, est-ce que tu as pensé à vérifier les erreurs en javascript grâce à la console d'erreur de Firefox ?

[EDIT] Dans ce code-ci :

<!-- Ta page importée via Ajax -->
<div id="page">
	<form method="post" action="get">
		<input type="text" name="field" />
		<input type="text" name="field2" />
		<input type="button" onClick="sendForm();" />
	</form>
</div>

Je me suis trompé, ou plutôt je me suis mal exprimé, bref, ça peut porter à confusion.
En fait, la partie :

<div id="page"></div>

...doit être sur la page principale, puisqu'on charge les données dans ce div :

// A cette ligne, si document.getElementById('page') n'existe pas, rien ne va se charger du tout.
document.getElementById('page').innerHTML = xhr.responseText;

// Tu peux aussi améliorer comme ça :
if(document.getElementById('page'))
{
	document.getElementById('page').innerHTML = xhr.responseText;
}
else
{
	alert('Une erreur est survenue : le bloc page est indéfini.');
}

Côté traitement :

<form method="post" action="get">
	<input type="text" name="field" />
	<input type="text" name="field2" />
	<input type="button" onClick="sendForm();" />
</form>

Je pense que ça vient de là.

Sur la page principale (index.php) :

<a href="#" onclick="envoieRequete('search.php','partieA');" >RECHERCHE</a>

<div id="partieA">

</div>

Sur la page qu'on appelle dans le bloc "partieA" (search.php) :

<form method="post" action="get">
<input type="text" size="15" name="field1" />
<input type="button" onClick="sendForm();" value="OK"/>
</form>

Et sur la page "fonctions.php" incluse dans "index.php" et "search.php" :

<script type="text/javascript">
function envoieRequete(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ées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);

}

function getXMLHttpRequest()
{
	var xhr = null;
	
	if(window.XMLHttpRequest || window.ActiveXObject)
	{
		if(window.ActiveXObject)
		{
			try
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			xhr = new XMLHttpRequest(); 
		}
	}
	else
	{
		alert('Votre navigateur ne supporte pas l\'objet XMLHTTPRequest...');
		return null;
	}
	
	return xhr;
}

function sendForm()
{
	var xhr = getXMLHttpRequest();
	var page = 'search-ville.php';
	var value1 = encodeURIComponent(document.getElementsByTagName('input')[0].value);

	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
		{
			if(document.getElementById('partieA'))
			{
				document.getElementById('partieA').innerHTML = xhr.responseText;
			}
			else
			{
				alert('Une erreur est survenue : le bloc page est indéfini.');
			}
		}
	};

	xhr.open('POST', partieA, true);
	xhr.setRequestHeader('Content-Type", "application/x-www-form-urlencoded');
	xhr.send('field1=' + value1);
}
</script>

<style>
	#partieA{
		width:360px;
		height:59px;
		padding:0;
		border: 2px solid #000000;
	}
	#partieB{
		width:364px;
		height:530px;
		padding:0;
		border: 2px solid #000000;
	}
</style>

Et enfin, ce qu'indique la console d'erreurs de Firefox quand on clique sur le bouton OK :
Erreur : uncaught exception: [Exception... "Not enough arguments [nsIXMLHttpRequest.setRequestHeader]" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://www.monsite.com/index.php :: sendForm :: line 56" data: no]

xhr.setRequestHeader('Content-Type", "application/x-www-form-urlencoded');

// Devient

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Désolé

Si t'as d'autres erreurs, indique-les

J'ai corrigé cette erreur, cependant ça ne veut toujours pas fonctionner.
La console firefox indique juste un avertissement :

Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C « document.getElementById() » à la place.
Fichier Source : http://www.monsite.com/index.php
Ligne : 55

<form method="post" action="get">
	<input type="text" size="15" name="field1" id="field1" />
	<input type="button" onClick="sendForm();" value="OK"/>
</form>

var value1 = encodeURIComponent(document.getElementById('field1').value);

Et ça ?

C'est ce que j'avais anticipé, mais il affiche toujours ce même avertissement.
Quand je clique sur ce message, il me surligne dans la source :

xhr.open('POST', partieA, true);

Edit : Je me suis aussi permis de supprimer le point virgule qui trainait à la fin de ce bloc, ça ne change rien.

xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
		{
			if(document.getElementById('partieA'))
			{
				document.getElementById('partieA').innerHTML = xhr.responseText;
			}
			else
			{
				alert('Une erreur est survenue : le bloc page est indéfini.');
			}
		}
	}

xhr.open('POST', partieA, true); // partieA n'est pas une variable définie

// Remplace par 

xhr.open('POST', page, true);

Et là ? (on va y arriver un jour )

[EDIT] Le point de virgule, faut le laisser.

Ohhhhhhhhhhhhhhhhhhh mais ça marche !!!!!

Mille merci pour ton aide et surtout ta patience !

Bon, faut te faire un virement sur quel compte pour te remercier ? lol

De rien