IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

[SRC] Envoyer un formulaire avec Ajax


Sujet :

Contribuez

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut [SRC] Envoyer un formulaire avec Ajax
    Suite à une question qui m'a été posée sur le chat, j'en profite pour déposer ici un petit script qui permet d'envoyer les saisies d'un form avec ajax sans rechargement de page ...

    Le script scanne les éléments du form afin de concaténer la chaine de paramètres qui sera ensuite passé en send ...


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Ajax Form</title>
    <script type='text/javascript'>
    function SendAjaxForm(){
    var Params=""
    var i=0;
    var Elt;
     
    while (Elt=document.forms['myform'].elements[i] ){
             if(Elt.value && Elt.type!='submit'){Params+="&"+Elt.name+"="+Elt.value;}
             i++;
             }
     
     Params=Params.replace(/^&/,"")
    // alert(Params)    
     
    //l'ajax    
       if (window.XMLHttpRequest) {                   
                                    xhr = new XMLHttpRequest();                   
                                    }
       else if (window.ActiveXObject) {                
                                    xhr = new ActiveXObject("Microsoft.XMLHTTP");   
                                    }
     
     
       xhr.open('POST',' pagecible.php', true);
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       xhr.send(Params);
     
     
       xhr.onreadystatechange = function() {          
                                             if (xhr.readyState == 4) {                   
                                                  if (xhr.status == 200) {                  
                                                                              //ici le traitment du retur ajax
                                                                         }
                                                     else{ alert ("Erreur : " + xhr.status) };
                                             }
                                           }
     
    }
     
    </script>
    </head>
     
    <body>
    <form name="myform" method="submit" action="javascript:SendAjaxForm()">
    <input type='text' name="text1" />
    <input type='text' name="text1" />
    <input type='text' name="text1" />
    <input type='text' name="text2" />
    <input type='text' name="text2" />
    <input type='text' name="text2" />
    <select name='sel'>
        <option value='one'>un</option>
        <option value='two'>deux</option>
        <option value='three'>trois</option>
        <option value='four'>quatre</option>
    </select>    
    <input type='submit' value="go" />
     
    </form>
    </body>
     
    </html>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    pas mal du tout spaffy, as tu testé ?

    car tu concatènes toutes les valeurs , via une url que tu envois en post
    autre chose , le .value pour le select fonctionne ?
    et les boutons radio et checkbox ?



    à part ça , pas mal du tout

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Non pas testé , mais je n'envoie rien en url ...
    il n'y a pas d'autre action au form que la fonction et la chaine des paramètres se concatène de la sorte pour faire un post ... car l'ajax est en post ...
    et à partir du moment ou le radio ou le checkbos à une value ...
    et oui pour le select cela fonctionne ...

    je teste demain ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    bon après avoir testé il s'avère que :

    si plusieurs inputs texte ont le même name il ne prend que le dernier ...
    mais à priori c'est la même chose avec un post classique ??

    pour le radios et checkboxes il va falloir que je rajouter un test supplémentaire pour ne garder que celui qui est selectionné ...
    une petit boucle devrait faire l'affaire ...

    Je continue dans cette lancée ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    alors la ... j'vais tester , car tu envois ta requète ajax en post ok, mais la string que tu passes est sous forme "d'url" que l'on récupère normalement en GET

    je me trompe peut-être ou alors je vais revoir mes notions . . .

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    revois tes notion d'ajax

    xhr.send il faut passer le même type d'url dans le send pour un ajax en post ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Ajax Form</title>
    <script type='text/javascript'>
    function SendAjaxForm(){
    var Params=""
    var i=0;
    var Elt;
     
    while (Elt=document.forms['myform'].elements[i] ){
     		if(Elt.value && Elt.type!='submit'){Params+="&"+Elt.name+"="+Elt.value;}
     		i++;
     		}
     
     Params=Params.replace(/^&/,"")
     alert(Params)	
     
    //l'ajax   
     alert('here')
       if (window.XMLHttpRequest) {                   
    								xhr = new XMLHttpRequest();                   
    								}
       else if (window.ActiveXObject) {                
    								xhr = new ActiveXObject("Microsoft.XMLHTTP");   
    								}
     
     
       xhr.open('POST', 'cible.php', true);
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       xhr.send(Params);
     
     
       xhr.onreadystatechange = function() {          
    									     if (xhr.readyState == 4) {                   
    									          if (xhr.status == 200) {                  
    									      			alert(xhr.responseText)					//ici le traitment du retur ajax
    									     							}
    									 			else{ alert ("Erreur : " + xhr.status) };
    									     }
    									   }
     
    }
     
    </script>
    </head>
     
    <body>
    <form name="myform" method="post" action="javascript:SendAjaxForm()">
    <input type='text' name="text1[]" />
    <input type='text' name="text1[]" />
    <input type='text' name="text3" />
    <input type='text' name="text4" />
    <input type='text' name="text5" />
    <input type='text' name="text6" />
    <select name='sel'>
    	<option value='one'>un</option>
    	<option value='two'>deux</option>
    	<option value='three'>trois</option>
    	<option value='four'>quatre</option>
    </select>
    <input type='radio' value='rad1' />	
    <input type='radio' value='rad2' />
    <input type='submit' value="go" />
     
    </form>
    </body>
     
    </html>
    et la page cible php
    qui fait juste un dump:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <?php
    var_dump($_POST);
    ?>
    l'alert est correcte !

    reste juste à traiter le cas des radios et des selects
    sachant qye pour des inout avec names identiques il faut mettre [] pour recupérer un array ...
    et l'alert montre qu'avec cette concaténation de cheine pour le send en post ajax on a bien le bon résultat
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    alors la ... j'vais tester , car tu envois ta requète ajax en post ok, mais la string que tu passes est sous forme "d'url" que l'on récupère normalement en GET

    je me trompe peut-être ou alors je vais revoir mes notions . . .
    Bonjour, ta confusion vient peut-être du fait que de nombreuses bibliothèques Ajax acceptent des paires nom/valeur comme paramètre en post, mais le send s'effectue effectivement au final sous forme 'url encoded'.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

Discussions similaires

  1. [AJAX] Poster un formulaire avec AJAX
    Par faico dans le forum AJAX
    Réponses: 10
    Dernier message: 22/03/2010, 17h12
  2. [FLASH 8] Envoyer un formulaire avec TextInput
    Par teocourant dans le forum Flash
    Réponses: 5
    Dernier message: 05/08/2006, 10h18
  3. Envoyer un formulaire avec PHP mail
    Par jbidou88 dans le forum Langage
    Réponses: 8
    Dernier message: 02/06/2006, 09h16
  4. Impossible d'envoyer un formulaire avec javascript
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 14/11/2005, 20h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo