Passage de données sans rafraichir la page

Passage de données sans rafraichir la page - PHP - Programmation

Marsh Posté le 03-09-2013 à 22:18:16    

Bonsoir à tous,
je viens vers vous en espérant trouver de l'aide pour ma réalisation ...
 
Voila je désire insérer des données externes dans des inputs sur une page principale par l’intermédiaire d'une page externe ( iframe dans une modale )
 
j'y arrive mais le soucis c'est que ça me relance la page et me fait sauter les données déjà saisies
 
Petit exemple ici : http://www.letoutweb.com/page_test/index.php
 
Le but étant de saisir les éléments 1 et 2 sur la page principale et par la suite de rajouter les éléments 3 et 4 à partir de la modale
 
Apparemment on utilise ajax pour cela mais je n'ai trouvé rien de concret ( pour être sincère j'y comprends rien ) ... et si l'un de vous peut me donner un exemple ou une piste ça serait bienvenue.
 
Merci par avance.
 
Page index.php

Code :
  1. <html>
  3. <head>
  4.   <title></title>
  8.   <link rel="stylesheet" href="css/jquery.superbox.css" type="text/css" media="all" />
  9.   <link rel="stylesheet" href="css/custom_superbox.css" type="text/css" media="all" />
  10.   <script type="text/javascript" src="js/jquery-min_box.js"></script>
  11.   <script type="text/javascript" src="js/jquery.superbox-min.js"></script>
  15.   <script type="text/javascript">
  16.       $(function(){
  17.          $.superbox.settings = {
  18.             closeTxt: "Fermer",
  19.             loadTxt: "Chargement...",
  20.             nextTxt: "Suivant",
  21.             prevTxt: "Précédent"
  22.          };
  23.          $.superbox();
  24.       });
  25.    </script>
  27. </head>
  29. <body>
  31. <?php
  33. $element_3 = $_POST['element_3_ext'] ;
  34. $element_4 = $_POST['element_4_ext'] ;
  37. echo'
  39. <br><br>
  41. <form method=post action="#">
  43. Elément 1 <input type="text" name="element_1" value="">
  44. <br>
  45. Elément 2 <input type="text" name="element_2" value="">
  46. <br>
  47. Elément 3 <input type="text" name="element_3" readonly="readonly" value="'.$element_3.'">
  48. <br><br>
  49. Elément 4 <textarea name="element_4" rows="1" cols="30" readonly="readonly">'.$element_4.'</textarea>
  50. <br><br><br>
  51. <a href="page_rajout.php" rel="superbox[iframe][800x800]">Ajouter les éléments 3 et 4 </a>
  57. <br><br>
  58. <input type="submit" value="Valider le formulaire" >
  59. </form>
  60. ';
  65. ?>
  67. </body>
  69. </html>


 
Page de rajout ( iframe ) page_rajout.php

Code :
  1. <html>
  3. <head>
  4.   <title></title>
  5. </head>
  7. <body>
  9. <?php
  10. echo'
  11. <br><br>
  13. <form method=post action="index.php" Target="_parent">
  15. Elément 3 : &nbsp;&nbsp;
  16. <select name="element_3_ext" >
  17.       <option value=""></option>
  18.    <optgroup label="Gamme GBI">
  19.       <option>GBI 2vtx</option>
  20.       <option>GBI 3vtx</option>
  21.       <option>GBI 4vtx</option>
  22.    </optgroup>
  23.    <optgroup label="Gamme GY">
  24.       <option>GY 2vtx</option>
  25.       <option>GY 3vtx</option>
  26.       <option>GY 4vtx</option>
  27.    </optgroup>
  29. </select>
  31. <br><br>
  33. Elémént 4 <textarea name="element_4_ext" rows="1" cols="30" ></textarea>
  36. <br><br>
  38. <input type="submit" value="Valider le formulaire" >
  41. </form>
  45. ';
  48. ?>
  50. </body>
  52. </html>

Reply

Marsh Posté le 03-09-2013 à 22:18:16   

Reply

Marsh Posté le 04-09-2013 à 09:33:52    

Tout simplement avec du Ajax (javascript) qui va envoyer au serveur les données et afficher éventuellement qq chose en retour.
 
Tu peux regarder la lib JQuery ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed