11485 sujets

JavaScript, DOM et API Web HTML5

Ajax Post et Serialize

Bonjour à tous,

J'essaye de créer une fonction ajax généraliste pour mes formulaires :

function update_post(jsdiv, jsurl, jsdocument) {
$(jsdiv).html("<img src=\"/styles/loading.svg\">");
$.ajax({
type:'POST',
url:jsurl,
data: $(jsdocument).serialize(),
success:function(data){
}
})
.done(function(data){
$(jsdiv).html(data);
})
.fail(function() {
alert( "Erreur lors de l'envoi du formulaire." );
});
return false;
};

j'ai un formulaire associé :
<FORM name=Form1 id=Form1>
<input type=text name=test value=123>
<input type=text name=test2 value=456>
<button type="button" onclick=update_post('#madiv','script.php','#Form1');>Envoyer</button>
</form>

Et mon script.php
$test=$_POST['test'];
$test2=$_POST['test2'];

Malheureusement le serveur me retourne que les variables test et test2 n'existent pas...

Avez-vous une piste ?
Merci de votre aide !
Bonne soirée.
Franck
Salut frank54300,
j'ai récupéré ton code et testé : çà fonctionne!
Enfin j'ai mis des quotes là où cela me semblais nécessaire et j'en ai oublié mais le pb ne viens pas de là : Comment essais tu de visualiser tes valeurs?

front :


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        
        <div id="madiv"></div>
        <FORM name=Form1 id=Form1>
            <input type=text name=test value=123>
            <input type=text name=test2 value=456>
            <button type="button" onclick="update_post('#madiv','traiter.php','#Form1');">Envoyer</button>
        </form>
        
        <script>
            function update_post(jsdiv, jsurl, jsdocument) {
                //$(jsdiv).html("<img src=\"/styles/loading.svg\">");
                $.ajax({
                type:'POST',
                url:jsurl,
                data: $(jsdocument).serialize(),
                success:function(data){
                }	
                })
                .done(function(data){
                $(jsdiv).html(data);
                })
                .fail(function() { 
                alert( "Erreur lors de l'envoi du formulaire." );
                });
                return false;
                };
        </script>
    </body>
</html>


traitement appelé via ajax : traiter.php


<?php

$test=$_POST['test'];
$test2=$_POST['test2'];

echo "Traitement fait : test=$test et test2=$test2";
?>

Modifié par GJboba (06 Dec 2017 - 22:46)
Sujet clos
Aller à