[AJAX] AJAX et reception de données d'un formulaire

Version imprimable

Bonjour, j'ai un petit soucis avec AJAX :

J'ai le formulaire suivant dans une ligne de tableau :
Code:

1 2 3 4 5 6 7 8 9 10 <tr id="L1"> <td> <form name="F1" method="POST"> <input type="text" name="T1"> <input type="text" name="T2"> <input type="checkbox" name="C1"> </form> </td> </tr>
et ainsi de suite avec les autres lignes

Ce qui fonctionne pour le moment :
-> Remplacer le contenu de la balise TD par un message comme quoi le form est validé

Ce que je n'arrive pas à faire :
-> Récupérer les données du formulaire pour ensuite les traiter

Je précise que ma page ne doit en aucuns cas être rechargée
Ce que je cherche donc c'est un exemple de code au niveau JAVASCRIPT
pour permettre la récupération de mes données.

J'ai bien entendu fais des recherches sur le forum mais la pluspart des exemples fournis
s'imtègrent surtout au code donné en exemple, normal :-)

Merci d'avance pour le coup de main

Stéphane

19/12/2007, 08h50
openWorld

Mais donc des id a ttes champs de forumaire.
Accede y grace a document.getElementById(id)et apres appelle les methodes correspondante.
par example document.getElementById(id).value permet de recuperer ou de defnir le texte d'un champs texte.
Voivla j'espere que ca t'a aidé.

APrés si tu as des choses a fair cote serveur avec c donnée rien ne t'empeche d'utiliser une page php, asp,J2EE.................
pour recuperer le sdonnée et faire ton petit menage.
Cette page sera chrgée grace a l'objet XMLHttrRequest.
Si tu as un souci dans la conception n'hesite pas a demander plus d'info.
Bonne chance :)
19/12/2007, 10h54
kangaxx
Le mieux est de mettre un id au form directement dans ce cas, et ensuite pour accéder aux différents champs, et après pour accéder à tes champs :
Code:

1 2 var form = getElementById('form1'); // et pour accéder aux champs form.T1.value, form.T2.name
Ca t'évite de mettre des id pour tous les champs, uniquement 1 par formulaire, et tu accèdes à ses champs.

Ou à la limite, si tu veux pas mettre d'id supplémentaires(c'est chiant faut que ca soit unique.. :p) tu peux faire :
Code:

1 2 3 4 var the_tr = document.GetElementById('L1'); var the_forms = the_tr.getElementsByTagName('form'); var form = forms[0]; // et ensuite c'est pareil
19/12/2007, 12h46
openWorld

Attention le DOM n'est pas reconnu de la même facon par tous les navigateurs web.

Merci pour les infos, ça fonctionne maintenant en faisant comme ceci :

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
var http = createRequestObject();
 
function createRequestObject()
{
    var ro;
    ro = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    return ro;
}
 
function handleResponse()
{
    if(http.readyState == 4) {
        var response = http.responseText;
        var update = new Array();
 
        if(response.indexOf('|') != -1) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}
 
function sndPost(formName, arg)
{
    var formF = document.forms[formName];
    var paramF = "";
 
    for (i=0; i<formF.length; i++) {
        paramF += "&" + formF.elements[i].name + "=" + formF.elements[i].value;
    }
 
    http.open('GET', 'ajax.php?param='+formName+'&arg='+arg+paramF);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

Toutes les données sont envoyées dans la table qui va bien.

Merci pour le coup de main.

Stéphane

De retour, car biensur il y un autre soucis : le remplacement de la ligne ne se fait plus et ceci seulement sous IE,
sous Firefox c'est nickel.
En clair, la ligne de ma table contenant le formulaire [n] n'est plus remplacée
Avant de cliquer sur la case à cocher la ligne contenant le form ressemble à ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <table> <form action="checkline.php" method="POST" id="F421" name="F421"> <tr id="O421"> <td align="left">serveur n°1</td> <td align="center"><b class="green">Jobset n°1</b></td> <td align="left">Commentaire</td> <td align="center"><input type="checkbox" name="checkFormLine" onClick="sndPost('F421', '421')"></td> </tr> </form> -> n autres form... <form.... ....form> </table>
Le ID du TR est incrémenté pour chaques lignes, idem pour les formulaire

Après avoir cliqué la ligne était remplacée par ceci avec ce code :
-> ici $_GET['arg'] vaut 421

Fichier ajax.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php switch($_GET['param']) { case 'F'.$_GET['arg']: /** * Ici la partie du code pour l'insertion dans la database * Aucuns problèmes à ce niveau */ echo 'O'.$_GET['arg'].'|<tr> <td align="left"><b class="blue">'.$result['Ressource'].'</b></td> <td align="center">'.$result['Jobset'].'</td> <td align="left">'.nl2br($result['Commentaire']).'</td> <td align="left">Action validée</td> </tr>'; } ?>
Déjà, les balises du formulaire sont-elles placées comme il faut ?
Si ce n'est pas le cas je n'ai pas trop le choix, vu que j'ai un formulaire par ligne.

openWorld => Tu parle de DOM, serait-ce le problème ici ?

Stéphane

21/12/2007, 03h25
Shiva

Après recherche il faudrais en fait un nodeCleaner...
Pour moi, javascript = galère :?
Je ne remplace donc que le contenu d'une cellule de ma ligne et non plus la ligne entière.
Ca au moins ça fonctionne nickel, donc je peux dire que l problème est résolut.

Stéphane
21/12/2007, 11h46
openWorld

Si pour toi javascript = galere. Essaye GWT