[AJAX] Formulaire et affichage dans une DIV

Version imprimable

Bonjour,

Je dois actuellement créer un formulaire avec des cases à remplir et ensuite afficher le résultat dans une DIV (via $_GET de PHP) ce qui n'est pas un problème, mais ce que je souhaite c'est que lorsqu'on clique sur valider, cela ne recharge pas la page où se trouve le formulaire, mais "charge" la page de traitement dans une DIV ( dans mon cas elle s'appelle : 'droite') avec les arguments GET (ou même POST) .

J'ai déjà réussi avec du javascript et XMLHttpRequest (avec quelque chose comme : document.getElementById("droite").innerHTML = xmlhttp.responseText). Cela marche bien mais mes $_GET ne sont pas envoyés (donc j'ai abandonné ce système) .

J'ai simplifié mon code au maximum :

Index.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> </head> <body> <form action="recherche.php" method="GET" id="rechercher"> <table> <tr> <td> <input type="text" placeholder="H" size="4" /> X </td> <td> <input type="text" placeholder="L" size="4" /> </td> <input type='submit' value='Valider' id='submit-button' name='ok' /> </tr> </table> </form> <div id="droite">  </div> </body> </html>
recherche.php
Code:

1 2 3 4 5 <?php print_r($_GET); print_r($_POST); ?>
Comment faire ?

Merci d'avance de vos réponses.

Cordialement,

16/02/2015, 15h05
NoSmoking

Bonjour,
pas sûr d'avoir réellement compris ton besoin attendu que visiblement tu à tout réussi à faire marcher :(

Il semblerait que ta première démarche soit la bonne, utilisation de l'Ajax alors que te dire de plus...sinon que je déplace sur le forum Ajax.

merci pour le déplacement,

je pense avoir réussi après des heures de recherches... j'ai récupéré ce que j'avais trouvé pour l'AJAX et après j'ai rajouter la construction mon url en fonction des champs INPUT de la page:
voici le code:

Code:

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
 
<script type="text/javascript">
 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 AJAX(url){
    xhr_object = getXMLHttpRequest();
 
    xhr_object.open("POST", url, false);
    xhr_object.send(null);
    if(xhr_object.readyState == 4){
        return xhr_object.responseText;
    }else return(false);
}
 
 
function submitForm(){
   	var x = document.getElementsByTagName("input");
	var url = "recherche.php?";
    var i;
    for (i = 0; i < x.length; i++) 
	{
    document.getElementById('droite').innerHTML += x[i].name;
 
	url+=x[i].name+'='+x[i].value;
	if(i+1<x.length)url+='&';
    }
 
    document.getElementById('droite').innerHTML = AJAX(url);
}
</script>

et sur le bouton je fais un onclick="submitForm()"

si ça peux aider d'autres personnes...