Envois formulaire en AjaxRésolu

Question

Bonjour, J'ai trouvé un code qui correspond pas mal a ce que je veux faire mais j'ai un soucis d'adaptation... page html: En faite this.form j'éssais d'envoyer le contenus de chaque champ sauf que je suis sur que c'est pas comme ca! fonction javascript: function request( url , form) { var req = null; //défini l'objet req de façon globale, pour qu'il soit reconnu dans tout le script req = new XMLHttpRequest(); req.onreadystatechange = testRep; // ici on attribue la fonction à req.onreadystatechange, mais on ne l'exécute pas encore, donc ne pas mettre les () req.open("POST", url , true); req.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // je sais pas ce que ça veut dire mais c'est INDISPENSABLE pour transmettre des données au script php data = "id= "+ form ; req.send(data); function testRep() { // cette fonction va lancer l'affichage des données reçues, une fois que la requête sera "complete" (readyState =4) if (req.readyState == 4) { if (req.status == 200) { document.open(); //ceci ouvre un nouveau flux qui va permettre l'exécution des commandes qui suivent (ici document.write) s'exécute simultanément document.write(req.responseText); // responseText contient la chaîne de caractères transmise par echo dans le script php document.close(); // ceci ferme le flux et lance l'exécutions des commandes qui precèdent } else { alert("Problem: " + req.statusText); } } } } Fichier maj_profile.php: Bon au final y rien qui marche mais ca ne me surpend pas! Az

davidcian · Accepted Answer

trouvé!!

function valide(url, form, id_form)  {
    
    var myform = document.getElementById(id_form);
    var nb_champs = myform.elements.length;
    var data = "";
    
    for(i=0;i<nb_champs;i++)
    {
        data = data+myform.elements[i].id+"="+myform.elements[i].value+",";
    }
    alert(data);
}

J'ai donné un ID a mon formulaire et le tour est joué! Merci à Alex!

Az

cs_bultez · Answer

bonjour,

1° que tentes-tu donc d'envoyer au php ? 
    data = "id="+form;
    req.send(data);
fait donc un alert de data...  pour voir ! 
( c'est une chaîne de caractères qu'on doit envoyer )

( et perso, j'évite les noms de variables ressemblant à des noms de balises
  ou autres, connus du html/javascript... un jour ou l'autre ça
  te posera des problèmes )

2° tu fais un document.write, or la page ayant été totalement interprétée,
    ça efface toute la page, y compris le javascript !

3° pas été plus loin pour l'instant, pas regardé si tu avais d'autres erreurs...

Cordialement

          Bul [mon Site] [M'écrire]

davidcian · Answer

Merci de ta réponse j'ai un peu avancé mais je reste bloqué sur un point important...

function valide(url, form)  {
    var req = null;
        req = new XMLHttpRequest();
    req.onreadystatechange = testRep; 
    req.open("POST", url, true);
    req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    data = "id="+ form
    alert(data);

}

retour:

id=[object HTMLFormElement]

Donc ça marche bien, je souhaite transmettre la totalité de mon formulaire vers la page maj_profile.php et une sur le le fichier récupere la valeur des champs. Mais je sais pas comment faire...

cs_bultez · Answer

faut en dire plus ?

coté php :

  $id =  $_POST[' id_user ']; 
  $style  = $_POST['style'];
  $langue =  $_POST[' langue '];
  $user  = $_POST['user'];

"normalement" ça correspond à quoi ces $_POST ?
         aux name des champs du formulaire....
et dans ton formulaire, tu n'as que 2 champs : test1 et test2....
tu ne peux donc qu'utiliser $_POST['test1'] et $_POST['test2']

          Bul [mon Site] [M'écrire]

cs_bultez · Answer

on s'est croisé !
>>id=[object HTMLFormElement]
>>Donc ça marche bien
ah ben non ! justement ! ça marche pas du tout !
comment tu récupères ça coté php ?

j'insiste ? ce qu'on transmet doit être une chaine de caractères !!!!!
dans ton cas, par exemple :
data="test1="+document.mon_profile.test1.value+"?test2="+document.mon_profile.test1.value;
et coté php comme indiqué au message précédent...

          Bul [mon Site] [M'écrire]

cs_bultez · Answer

et... ne pas faire de document.write !
          Bul [mon Site] [M'écrire]

davidcian · Answer

Si je fais ca:

    data = "id="+ ( document.getElementById("style").value );
     alert(data);

réponse: id=test

Mais le problème c'est que voudrais que cette fonction marche pour plusieurs formulaires donc id des champs et nombre de champs différent.

Peu être a l'aide d'une boucle... Mais sur quoi la baser...

J'ai enlevé le document.wirte

Az

cs_bultez · Answer

>>e problème c'est que voudrais que cette fonction marche pour plusieurs
formulaires 
>>donc id des champs et nombre de champs différent.
il te reste à construire une ch'tiote fonction qui regarde tous les champs
   du formulaire et le transforme en  :
   name ou id_champ1=value_champ1&name ou id _champ2=value_champ2&name ou id _champ3=value_champ3.....
c'est assez simple à faire.
sinon regarde ce qu'on nomme framework, ils ont tous,
ou alors... utilise en un....

Cordialement

          Bul [mon Site] [M'écrire]

davidcian · Answer

>>"il te reste à construire une ch'tiote fonction qui regarde tous les champs
   du formulaire et le transforme en  :
   name ou id_champ1=value_champ1&name ou id _champ2=value_champ2&name ou id _champ3=value_champ3.....
c'est assez simple à faire."

Je suis assez chaud pour la fonction pourrais me donner un exemple?

Merci d'avance

Az

cs_bultez · Answer

les billes :

    document.name_du_formulaire.elements.length c'est le nombre de champs dans le formulaire
    document.name_du_formulaire.elements[index].name ou .id ou .value ou...
                          c'est le name, l'id, le value ou... du champ étudié
                          index variant de 0 à length-1

    tu concatènes ( dans un for ? ) avec les bons champs à ta variable data 
                     initialisée à ""  et basta

          Bul [mon Site] [M'écrire]

davidcian · Answer

Genre ça?

function valide(url, form, nom_form)  {
    
    var nb_champs = document.nom_form.elements.length;
    for(i=nb_champs;)
    {
    champ += eval(document.name_du_formulaire.elements[index].id+"="+document.name_du_formulaire.elements[index].value+i);
    alert(champ.value);
    }
}

Dsl je suis pas super doué en javascript...

davidcian · Answer

Peux être ça plutôt?

function valide(url, form, nom_form)  {
    
    var nb_champs = document.nom_form.elements.length;
    for(i=0;i=nb_champs;i=i+1)
    {
    data += eval(document.name_du_formulaire.elements[index].id+"="+document.nom_form.elements[index].value);
    }
}

davidcian · Answer

Bon j'en suis la...

function valide(url, form, nom_form)  {
    
    var nb_champs = document.nom_form.elements.length;
    var data = "";
    
    for(i=0;i=nb_champs;i=i+1)
    {
        data = eval(data+document.nom_form.elements[index].id+"="+document.nom_form.elements[index].value);
    }
    alert(data);
}

Le problème c'est que je ne vois pas très bien comment je bascule sur le champs suivant 

Mais bon il ne ce passe rien donc j'en suis pas encore la.

Az

cs_bultez · Answer

sauf que 

_ le séparateur des champs n'est pas "," mais "&"
_ que finir par un séparateur, pas sûr que ça plaise
  ( substr ou substring nécessaire )
_ qu'il faudrait peut-être tester si le champ
  a un ID ( ou un name ) et un value

@+

davidcian · Answer

J'ai corrigé par le "&" et ca marche nickel! 

Merci ;)

Az

Envois formulaire en Ajax

15 réponses

Votre réponse