Jquery charger formulaire sans recharger Résolu/Fermé

Question

Bonjour, Je cherche à afficher les informations qui retourne d'un formulaire sur la même page (dans un div) et surtout sans recharger la page (avec un petit "loading): Ma page index.php:

et mon fichier load.php Bonjour $prenom $nom"); ?> Bien entendu, le $_post ne récupère pas la valeur des textarea. L'animation et la page load.php se charge bien mais sans les valeurs. Je pense que je fais une erreur d'incompréhension. Quelqu'un peut-il m'éclairer ? Merci bien ! Configuration: Windows 7 / Safari 536.5

matiou34 · Accepted Answer

<!DOCTYPE html>
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.io/jquery.form.js"></script> 
 
    <script> 
      // prepare Options Object 
var options = { 
target: '#update', 
url: 'load.php', 
beforeSubmit : function(){ 
$('#load').show(); 
}, 
success: function() { 
$('#load').hide(); 
alert('Thanks for your comment!'); 
} 
}; 

// pass options to ajaxForm 
$('#myForm').ajaxForm(options);
    </script> 
</head>
<body>
<div id="update"></div>
<form id="myForm" action="load.php" method="post"> 
    Name: <input type="text" name="title" /> 
    Comment: <textarea name="description"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>
</body>
</html>

Melooo · Answer

Salut, Tu n' a pas mis d'ID à ton bouton...

matiou34 · Answer

Merci Melooo mais ça ne marche pas.

En fait, ça retourne bien le "bonjour" mais pas les valeurs des textarea. La page load.php se charge donc. Mais sans les données générées par les textarea

D'autres options ?

Merci !

PS: ça marche si je ne passe pas par jquery (simple $_post). Hors ce que je souhaite c'est afficher les valeurs des textarea dynamiquement sans recharger la page. C'est pour ça que j'utilise jquery

A.Nonymous · Answer

A aucun moment les données du formulaire sont envoyées, load.php reçoit un $_POST vide.
Je te suggère d'utiliser jQuery Form plugin et la méthode ajaxSubmit ou ajaxForm

http://jquery.malsup.com/form/#api

// prepare Options Object 
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    beforeSubmit : function(){
       $('#load').show();
    },
    success:    function() { 
        $('#load').hide();
        alert('Thanks for your comment!'); 
    } 
}; 
 
// pass options to ajaxForm 
$('#myForm').ajaxForm(options);

Jquery charger formulaire sans recharger

4 réponses

Discussions similaires