Jquery charger formulaire sans recharger

Résolu
matiou34 Messages postés 198 Date d'inscription   Statut Membre Dernière intervention   -  
 manguo -
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 !

4 réponses

matiou34 Messages postés 198 Date d'inscription   Statut Membre Dernière intervention   4
 
<!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>
3
manguo
 
salut, tu pourrais me passer le code de ton load.php stp
0
Melooo Messages postés 1405 Date d'inscription   Statut Membre Dernière intervention   84
 
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!" />
0
matiou34 Messages postés 198 Date d'inscription   Statut Membre Dernière intervention   4
 
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
0
Melooo Messages postés 1405 Date d'inscription   Statut Membre Dernière intervention   84
 
Enlève l'action dans ton formulaire et remplace le bouton par type="button"
0
A.Nonymous
 
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);
0
matiou34 Messages postés 198 Date d'inscription   Statut Membre Dernière intervention   4
 
Parfait ça marche !
Merci beaucoup !

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