Jquery charger formulaire sans recharger

Résolu/Fermé

matiou34 Messages postés 198 Date d'inscription mardi 22 avril 2008 Statut Membre Dernière intervention 27 janvier 2015 - 18 juin 2012 à 07:12
manguo - 28 janv. 2013 à 23:39

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {

    $('#button').submit(function() {
      $('#load').show();
      $('#result').load('load.php', function() {
        $('#load').hide();
      });
      return false;
    });

  });
  </script>
</head>


<div id="result"></div>

<form id="button" action="load.php" method="post">
				<textarea id="title" name="title" type="text"></textarea>
				<textarea id="description" name="description" type="text"></textarea>
                <input type="submit" value="Go!" />
                </form>

<div id="load" style="display: none;">
<img src="http://www.almajidcenter.org/images/gallery_loader.gif" />
</div>

et mon fichier load.php

<?php 
$prenom = $_POST['title']; 
$nom = $_POST['description']; 
print("<center>Bonjour $prenom $nom</center>"); 
?>

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 !

A voir également:

Formulaire ajax sans rechargement
Formulaire de réclamation facebook - Guide
Récupérer compte hotmail sans formulaire ✓ - Forum Hotmail / Outlook.com
Confirmer le nouvel envoi du formulaire err_cache_miss - Forum Google Chrome
Confirmation de l'envoi d'un formulaire html ✓ - Forum HTML
Problème d'envoi de formulaire ✓ - Forum PHP

4 réponses

Réponse 1 / 4

matiou34 Messages postés 198 Date d'inscription mardi 22 avril 2008 Statut Membre Dernière intervention 27 janvier 2015 4
18 juin 2012 à 18:14

<!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>

manguo
28 janv. 2013 à 23:39

salut, tu pourrais me passer le code de ton load.php stp

Réponse 2 / 4

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
18 juin 2012 à 08:48

Salut,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {

    $('#button').click(function() { // click et pas submit
      $('#load').show();
      $('#result').load('load.php', function() {
        $('#load').hide();
      });
      return false;
    });

  });
  </script>

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

<input type="submit" id="button" value="Go!" />

Réponse 3 / 4

matiou34 Messages postés 198 Date d'inscription mardi 22 avril 2008 Statut Membre Dernière intervention 27 janvier 2015 4
18 juin 2012 à 09:04

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

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
Modifié par Melooo le 18/06/2012 à 09:17

Enlève l'action dans ton formulaire et remplace le bouton par type="button"

Réponse 4 / 4

A.Nonymous
18 juin 2012 à 09:55

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);

matiou34 Messages postés 198 Date d'inscription mardi 22 avril 2008 Statut Membre Dernière intervention 27 janvier 2015 4
18 juin 2012 à 18:14

Parfait ça marche !
Merci beaucoup !

Pour ceux que ça intéresse, solution ci-dessous

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook

Compte HOTMAIL bloqué . Que faire ?

compte hotmail bloqué

Contacter le "bon coin"

formulaire de remboursement chez Free

Discussions similaires

Newsletters