Redirection formulaire Jquery

Résolu/Fermé

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 - 15 févr. 2016 à 10:46
roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 - 16 févr. 2016 à 14:05

Bonjour,

J'ai créé une petite appli en jquery mobile avec un formulaire de satisfaction.

Le problème est que quand l'utilisateur valide le formulaire, il est redirigé sur une page blanche sur laquelle je ne peux pas afficher de texte.

Voici mon index.php :

<!DOCTYPE html>
<html>
<head>
	<title>Appli Jquery Mobile</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="jquery.mobile-1.4.5.css" /> 
	<script src="jquery-1.12.0.min.js"></script>
	<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <!-- Start of first page -->
  <div data-role="page" id="home">
  	<div data-role="header">
  		<h1>Appli Jquery Mobile</h1>
  	</div><!-- /header -->
    <div data-role="navbar" class="navbar">
      <ul>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

  	<div role="content" class="ui-content">
      <a href="#nb_user" class="ui-btn ui-corner-all">Nombre d'utilisateurs d'internet par pays</a>
      <a href="#App_coder" class="ui-btn ui-corner-all">Apprendre à coder</a>
      <a href="#form" class="ui-btn ui-corner-all">Que pensez vous de cette appli ?</a>

  	</div><!-- /content -->

  	<div data-role="footer">
  		<h4>© RR</h4>
  	</div><!-- /footer -->
  </div><!-- /page -->

  <!-- Debut de la page Formulaire -->
  <div data-role="page" id="form">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
    <h2>Que pensez vous de cette appli ?</h2>

    <form method="post" action="valid_form.php">
      <label for="select-choice-a" class="select">Sexe :</label>
      <select name="sexe" id="select-choice-a" data-native-menu="false">
          <option value="homme">Homme</option>
          <option value="femme">Femme</option>
      </select><br />
      <label for="date">Date de naissance :</label>
      <input type="date" name="date" id="date" value="" required="required" /><br />

      <label for="slider-fill">Trouvez vous cette application utile ? (notez sur 20)</label>
      <input type="range" name="utile" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Avez vous appris des choses grâce à ce site ? (notez sur 20)</label>
      <input type="range" name="appris" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Notez l'apparence du site (sur 20)</label>
      <input type="range" name="apparence" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="textarea">Donnez votre avis</label>
      <textarea cols="40" rows="8" name="avis" id="textarea"></textarea>
      
      <input type="submit" value="Envoyer">
    </form>
    </div><!-- /content -->
    <div data-role="footer">
      <h4>© RR</h4>
    </div><!-- /footer -->
  </div> <!-- Fin de la page Formulaire -->
</body>
</html>

Voici mon valid_form.php :

<?php
//pour l'affichage des erreurs php
error_reporting(E_ALL);

//connexion à la BDD
require_once('connect.php');

//récupération "propre" des variables
$sexe = isset($_POST['sexe']) ? $_POST['sexe'] : NULL;
$date = isset($_POST['date']) ? $_POST['date'] : NULL;
$utile = isset($_POST['utile']) ? $_POST['utile'] : NULL;
$appris = isset($_POST['appris']) ? $_POST['appris'] : NULL;
$apparence = isset($_POST['apparence']) ? $_POST['apparence'] : NULL;
$avis = isset($_POST['avis']) ? $_POST['avis'] : NULL;

if ($sexe && $date && $utile && $appris && $apparence) 
{

  try{
      $sql_avis = 
      "INSERT INTO avis
      (sexe, date_naissance, note_utile, note_appris, note_apparence, avis)
      VALUES (:sexe, :date_naissance, :note_utile, :note_appris, :note_apparence, :avis)";

      $result = $db->prepare($sql_avis);
      $result->bindValue('sexe', $sexe, PDO::PARAM_INT);
      $result->bindValue('date_naissance', $date, PDO::PARAM_STR);
      $result->bindValue('note_utile',$utile, PDO::PARAM_INT);
      $result->bindValue('note_appris', $appris, PDO::PARAM_INT);
      $result->bindValue('note_apparence', $apparence, PDO::PARAM_INT);
      $result->bindValue('avis', $avis, PDO::PARAM_STR);
      $result->execute(); 
  
   } catch (Exception $e){
     //en cas d'erreur
     echo 'Erreur : ' . $e->getMessage();
   }

  echo 'Merci de nous avoir transmis votre avis sur cette appli';
}
echo 'Merci de remplir tout les champs svp';

?>

Si le formulaire est valide, l'envoi dans la base de donnée s’exécute correctement en revanche ma ligne 'Merci de nous avoir transmis votre avis sur cette appli' ne s'affiche pas

Savez vous comment remédier au problème ?

Merci d'avance

A voir également:

Redirection formulaire Jquery
Formulaire de réclamation facebook - Guide
Formulaire de reclamation instagram - Guide
Confirmer le nouvel envoi du formulaire err_cache_miss - Forum Google Chrome
Confirmation de l'envoi d'un formulaire html ✓ - Forum HTML
Probleme avec formulaire et sous formulaire independant. ✓ - Forum Access

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743
Modifié par jordane45 le 15/02/2016 à 11:08

Re,

Le problème est que quand l'utilisateur valide le formulaire, il est redirigé sur une page blanche

Ca ... c'est par ce que tu as indiqué dans ta balise FORM d'aller sur la page : valid_form.php

Tu devrais, au contraire, rester sur ta page actuelle (et donc mettre tout ton code dans ta première page...
Comme ceci par exemple :

<?php
//-------------------------------------------------------------------//
//Fichier index.php
//-------------------------------------------------------------------//

//pour l'affichage des erreurs php
error_reporting(E_ALL);

//connexion à la BDD
require_once('connect.php');

//récupération "propre" des variables
$sexe = isset($_POST['sexe']) ? $_POST['sexe'] : NULL;
$date = isset($_POST['date']) ? $_POST['date'] : NULL;
$utile = isset($_POST['utile']) ? $_POST['utile'] : NULL;
$appris = isset($_POST['appris']) ? $_POST['appris'] : NULL;
$apparence = isset($_POST['apparence']) ? $_POST['apparence'] : NULL;
$avis = isset($_POST['avis']) ? $_POST['avis'] : NULL;

//Traitement du formulaire:
if ($sexe && $date && $utile && $appris && $apparence) {
  try{
      $sql_avis = 
      "INSERT INTO avis
      (sexe, date_naissance, note_utile, note_appris, note_apparence, avis)
      VALUES (:sexe, :date_naissance, :note_utile, :note_appris, :note_apparence, :avis)";

      $result = $db->prepare($sql_avis);
      $result->bindValue('sexe', $sexe, PDO::PARAM_INT);
      $result->bindValue('date_naissance', $date, PDO::PARAM_STR);
      $result->bindValue('note_utile',$utile, PDO::PARAM_INT);
      $result->bindValue('note_appris', $appris, PDO::PARAM_INT);
      $result->bindValue('note_apparence', $apparence, PDO::PARAM_INT);
      $result->bindValue('avis', $avis, PDO::PARAM_STR);
      $result->execute(); 
      $msg = 'Merci de nous avoir transmis votre avis sur cette appli';
   } catch (Exception $e){
     //en cas d'erreur
     echo 'Erreur : ' . $e->getMessage();
   exit();
   }
}else{
  $msg =  'Merci de remplir tout les champs svp';
}
?>
<!DOCTYPE html>
<html>
<head>
 <title>Appli Jquery Mobile</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile-1.4.5.css" /> 
 <script src="jquery-1.12.0.min.js"></script>
 <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <!-- Start of first page -->
  <div data-role="page" id="home">
   <div data-role="header">
    <h1>Appli Jquery Mobile</h1>
   </div><!-- /header -->
    <div data-role="navbar" class="navbar">
      <ul>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

   <div role="content" class="ui-content">
      <a href="#nb_user" class="ui-btn ui-corner-all">Nombre d'utilisateurs d'internet par pays</a>
      <a href="#App_coder" class="ui-btn ui-corner-all">Apprendre à coder</a>
      <a href="#form" class="ui-btn ui-corner-all">Que pensez vous de cette appli ?</a>

   </div><!-- /content -->

   <div data-role="footer">
    <h4>© RR</h4>
   </div><!-- /footer -->
  </div><!-- /page -->

  <!-- Debut de la page Formulaire -->
  <div data-role="page" id="form">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
    <h2>Que pensez vous de cette appli ?</h2>

    <form method="post" action="">
      <label for="select-choice-a" class="select">Sexe :</label>
      <select name="sexe" id="select-choice-a" data-native-menu="false">
          <option value="homme">Homme</option>
          <option value="femme">Femme</option>
      </select>
   <br>
      <label for="date">Date de naissance :</label>
      <input type="date" name="date" id="date" value="" required="required" /><br />

      <label for="slider-fill">Trouvez vous cette application utile ? (notez sur 20)</label>
      <input type="range" name="utile" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Avez vous appris des choses grâce à ce site ? (notez sur 20)</label>
      <input type="range" name="appris" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Notez l'apparence du site (sur 20)</label>
      <input type="range" name="apparence" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="textarea">Donnez votre avis</label>
      <textarea cols="40" rows="8" name="avis" id="textarea"></textarea>
      
      <input type="submit" value="Envoyer">
    </form>
  
  <div id="zone_message">
    <!-- Zone d'affichage des messages -->
   <?php
     if(!empty($msg)){
     echo $msg;
    }
   ?>
  </div>
    </div><!-- /content -->
    <div data-role="footer">
      <h4>© RR</h4>
    </div><!-- /footer -->
  </div> <!-- Fin de la page Formulaire -->
</body>
</html>

Cordialement,
Jordane

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7
15 févr. 2016 à 11:28

Bonjour,

J'ai essayé votre méthode mais ca ne fonctionne toujours pas.

Cette fois ci quand je valide le formulaire ca me redirige directement vers ma page d'acceuil sans afficher mon message de validation

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743 > roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017
15 févr. 2016 à 11:32

Tu peux nous coller un imprime écran de ta page une fois le formulaire validé ?
Rien n'apparaît sous ton formulaire ?
Tu as bien mis tout le code que je t'ai donné ?

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7 > jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025
15 févr. 2016 à 11:39

en dessous de mon formulaire le message "Merci de remplir tout les champs svp" est affiché avant même que je commence à remplir le formulaire et quand je valide ca me renvoi vers ma page index ci dessous :

https://www.cjoint.com/c/FBpkMHoONCg

Oui j'ai bien mis votre code

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743
15 févr. 2016 à 11:45

Commence par remplacer

 if(!empty($msg)){
     echo $msg;
    }

par :

 if(isset($msg)){
     echo $msg;
    }

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743
15 févr. 2016 à 11:47

quand je valide ca me renvoi vers ma page index

Heu .. oui .. c'est le principe ... ( le fait d'avoir tout mis dans ta page index.php )
Donc.. c'est normal que tu restes sur cette page là après validation.

Réponse 2 / 4

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743
15 févr. 2016 à 12:43

Bizarre....

On va faire un test :
que donne ceci :

if( isset($_POST['Envoyer'])){


//Traitement du formulaire:
if ($sexe && $date && $utile && $appris && $apparence) {
  try{
      $sql_avis = 
      "INSERT INTO avis
      (sexe, date_naissance, note_utile, note_appris, note_apparence, avis)
      VALUES (:sexe, :date_naissance, :note_utile, :note_appris, :note_apparence, :avis)";

      $result = $db->prepare($sql_avis);
      $result->bindValue('sexe', $sexe, PDO::PARAM_INT);
      $result->bindValue('date_naissance', $date, PDO::PARAM_STR);
      $result->bindValue('note_utile',$utile, PDO::PARAM_INT);
      $result->bindValue('note_appris', $appris, PDO::PARAM_INT);
      $result->bindValue('note_apparence', $apparence, PDO::PARAM_INT);
      $result->bindValue('avis', $avis, PDO::PARAM_STR);
      $result->execute(); 

      echo " TEST : Insertion en BDD OK ! ";
      $msg = "Merci de nous avoir transmis votre avis sur cette appli";
   } catch (Exception $e){
     //en cas d'erreur
     echo 'Erreur : ' . $e->getMessage();
     exit();
   }
}else{
  $msg =  'Merci de remplir tout les champs svp';
}
 
}

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7
15 févr. 2016 à 13:15

Rien ne change je suis renvoyé vers l'index

Rien ne change je suis renvoyé vers l'index

...... Si par "index" ... tu veux dire la page index.php ... et donc... la page qui contient ton formulaire ET le code php de traitement...... comme je te l'ai déjà dit plus haut : C'EST NORMAL !
Et à part ça :
- L'insertion en BDD se fait bien ?
- Rien ne s'affiche sur la page (sous le formulaire ou ailleurs ) ??

Peux-tu, une fois le formulaire valildé, faire un clic-droit (dans ton navigateur internet) sur la page et faire afficher la source ( le code source généré ... pas celui présent dans ton éditeur de texte... ) et nous le coller ici ??

Peux tu également nous mettre une capture écran de la page ?
=> Directement sur le forum (chose réalisable en utilisant le bouton "REPONDRE" et non via les commentaires ).
Voir ceci : https://www.commentcamarche.net/infos/25913-ccm-inserer-une-image-dans-une-discussion/

Réponse 3 / 4

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7
15 févr. 2016 à 14:56

Pardon je m'exprime mal, par "index" j'entend la page d’accueil.

- A part ca oui l'insertion en BDD se fait bien.
- Non rien ne s'affiche sur la page du formulaire

Voici le code généré une fois le formulaire validé :

<html class="ui-mobile"><head><base href="http://localhost/Application%20mobile/">
 <title>Appli Jquery Mobile</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
 <script src="jquery-1.12.0.min.js"></script><style type="text/css"></style>
 <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-a">

  <!-- Start of first page -->
  <div data-role="page" id="home" data-url="home" tabindex="0" class="ui-page ui-page-theme-a" style="min-height: 631px;">
   <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
    <h1 class="ui-title" role="heading" aria-level="1">Appli Jquery Mobile</h1>
   </div><!-- /header -->
    <div data-role="navbar" class="navbar ui-navbar" role="navigation">
      <ul class="ui-grid-b">
          <li class="ui-block-a"><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide" class="ui-link ui-btn ui-icon-eye ui-btn-icon-top">Qu'est-ce que le Jquery Mobile</a></li>
          <li class="ui-block-b"><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide" class="ui-link ui-btn ui-icon-action ui-btn-icon-top">Télécharger le Pack jquery mobile</a></li>
          <li class="ui-block-c"><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide" class="ui-link ui-btn ui-icon-info ui-btn-icon-top">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

   <div role="content" class="ui-content">
      <a href="#nb_user" class="ui-btn ui-corner-all">Nombre d'utilisateurs d'internet par pays</a>
      <a href="#App_coder" class="ui-btn ui-corner-all">Apprendre à coder</a>
      <a href="#form" class="ui-btn ui-corner-all">Que pensez vous de cette appli ?</a>

   </div><!-- /content -->

   <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
    <h4 class="ui-title" role="heading" aria-level="1">© RR</h4>
   </div><!-- /footer -->
  </div><!-- /page -->

  <!-- page 2 : Nombre d'utilisateur d'internet -->
  <div data-role="page" id="nb_user" data-url="nb_user">

    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>
    <div role="main" class="ui-content">
    <h2>Nombre d'habitants qui utilisent internet</h2>
      
               
                 
                   
                   
                   
                 
               
               
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
                 
                   
                   
                   
                   
                   
                 
               
             <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Colonne à afficher..." data-column-popup-theme="a"><thead><tr class="ui-bar-d"><th>Nom du pays</th>
                   <th data-priority="1">2011 (pour 100 habitants)</th>
                   <th data-priority="2">2012 (pour 100 habitants)</th><th data-priority="3">2013 (pour 100 habitants)</th><th data-priority="4">2014 (pour 100 habitants)</th></tr></thead><tbody><tr><th>Allemagne</th><td>81.3</td><td>82.3</td><td>84.2</td><td>86.2</td></tr><tr><th>Australie</th><td>79.5</td><td>79.0</td><td>83.0</td><td>84.6</td></tr><tr><th>Brésil</th><td>45.7</td><td>48.6</td><td>51.0</td><td>57.6</td></tr><tr><th>Espagne</th><td>67.6</td><td>69.8</td><td>71.6</td><td>76.2</td></tr><tr><th>France</th><td>77.8</td><td>81.4</td><td>81.9</td><td>83.8</td></tr><tr>
                   <th>Italie</th><td>54.4</td><td>55.8</td><td>58.5</td><td>62.0</td></tr><tr><th>Japon</th><td>79.1</td><td>79.5</td><td>89.7</td><td>90.6</td></tr><tr><th>Portugal</th><td>55.2</td><td>60.3</td><td>62.1</td><td>64.6</td></tr><tr><th>Thaïlande</th><td>23.7</td><td>26.5</td><td>28.9</td><td>34.9</td></tr><tr><th>Viet Nam</th><td>35.1</td><td>39.5</td><td>43.9</td><td>48.3</td></tr></tbody></table>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>© Romain Richard</h4>
    </div><!-- /footer -->
  </div><!-- /page Nombre d'utilisateur d'internet -->

  <!-- Debut de la page Apprendre à coder -->
  <div data-role="page" id="App_coder" data-url="App_coder">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
      <a href="http://www.lehtml.com/html/" class="ui-btn ui-corner-all">Apprendre le HTML</a>
      <a href="http://www.cssdebutant.com/" class="ui-btn ui-corner-all">Apprendre le CSS</a>
      <a href="https://openclassrooms.com/courses/tout-sur-le-javascript" class="ui-btn ui-corner-all">Apprendre le Javascript</a>
      <a href="https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/introduction-a-php" class="ui-btn ui-corner-all">Apprendre le PHP</a>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>© Romain Richard</h4>
    </div><!-- /footer -->
  </div>
    <!-- Fin de la page Apprendre à coder -->

  <!-- Debut de la page Avis Formulaire -->
  <div data-role="page" id="form" data-url="form" tabindex="0" class="ui-page ui-page-theme-a">
    <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
      <h1 class="ui-title" role="heading" aria-level="1">Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-c">
          <li class="ui-block-a"><a href="#home" data-icon="home" data-transition="slide" class="ui-link ui-btn ui-icon-home ui-btn-icon-top">Accueil</a></li>
          <li class="ui-block-b"><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide" class="ui-link ui-btn ui-icon-eye ui-btn-icon-top">Qu'est-ce que le Jquery Mobile</a></li>
          <li class="ui-block-c"><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide" class="ui-link ui-btn ui-icon-action ui-btn-icon-top">Télécharger le Pack jquery mobile</a></li>
          <li class="ui-block-d"><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide" class="ui-link ui-btn ui-icon-info ui-btn-icon-top">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
    <h2>Que pensez vous de cette appli ?</h2>

    <form method="post" action="">
      <label for="select-choice-a" class="select">Sexe :</label>
      <div class="ui-select"><a href="#" role="button" id="select-choice-a-button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span>Homme</span></a><select name="sexe" id="select-choice-a" data-native-menu="false" tabindex="-1">
          <option value="homme">Homme</option>
          <option value="femme">Femme</option>
      </select><div style="display: none;" id="select-choice-a-listbox-placeholder"><!-- placeholder for select-choice-a-listbox --></div></div>
   <br>
      <label for="date">Date de naissance :</label>
      <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="date" name="date" id="date" value="" required="required"></div><br>

      <label for="slider-fill" id="slider-fill-label">Trouvez vous cette application utile ? (notez sur 20)</label>
      <div class="ui-slider"><input type="number" data-type="range" name="utile" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" class="ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input"><div role="application" class="ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all"><div class="ui-slider-bg ui-btn-active" style="width: 20%;"></div><a href="#" class="ui-slider-handle ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="20" aria-valuenow="4" aria-valuetext="4" title="4" aria-labelledby="slider-fill-label" style="left: 20%;"></a></div></div>

      <label for="slider-fill" id="slider-fill-label">Avez vous appris des choses grâce à ce site ? (notez sur 20)</label>
      <div class="ui-slider"><input type="number" data-type="range" name="appris" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" class="ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input"><div role="application" class="ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all"><div class="ui-slider-bg ui-btn-active" style="width: 40%;"></div><a href="#" class="ui-slider-handle ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="20" aria-valuenow="8" aria-valuetext="8" title="8" aria-labelledby="slider-fill-label" style="left: 40%;"></a></div></div>

      <label for="slider-fill" id="slider-fill-label">Notez l'apparence du site (sur 20)</label>
      <div class="ui-slider"><input type="number" data-type="range" name="apparence" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" class="ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input"><div role="application" class="ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all"><div class="ui-slider-bg ui-btn-active" style="width: 25%;"></div><a href="#" class="ui-slider-handle ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="20" aria-valuenow="5" aria-valuetext="5" title="5" aria-labelledby="slider-fill-label" style="left: 25%;"></a></div></div>

      <label for="textarea">Donnez votre avis</label>
      <textarea cols="40" rows="8" name="avis" id="textarea" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 51.3333px;"></textarea>
      
      <div class="ui-btn ui-input-btn ui-corner-all ui-shadow">Envoyer<input type="submit" value="Envoyer" name="Envoyer"></div>
    </form>
  
  <div id="zone_message">
    <!-- Zone d'affichage des messages -->
     </div>
    </div><!-- /content -->
    <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
      <h4 class="ui-title" role="heading" aria-level="1">© RR</h4>
    </div><!-- /footer -->
  <div class="ui-screen-hidden ui-popup-screen ui-overlay-inherit" id="select-choice-a-listbox-screen"></div><div class="ui-popup-container ui-popup-hidden ui-popup-truncate" id="select-choice-a-listbox-popup"><div id="select-choice-a-listbox" class="ui-selectmenu ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all"><div class="ui-header ui-bar-inherit ui-screen-hidden"><h1 class="ui-title"></h1></div><ul class="ui-selectmenu-list ui-listview" id="select-choice-a-menu" role="listbox" aria-labelledby="select-choice-a-button"><li data-option-index="0" data-icon="false" class="ui-first-child" role="option" aria-selected="true"><a href="#" tabindex="-1" class="ui-btn ui-btn-active">Homme</a></li><li data-option-index="1" data-icon="false" class="ui-last-child" role="option" aria-selected="false"><a href="#" tabindex="-1" class="ui-btn">Femme</a></li></ul></div></div></div> <!-- Fin de la page Formulaire -->

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" id="home" data-url="/Application mobile/" data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
   <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
    <h1 class="ui-title" role="heading" aria-level="1">Appli Jquery Mobile</h1>
   </div><!-- /header -->
    <div data-role="navbar" class="navbar ui-navbar" role="navigation">
      <ul class="ui-grid-b">
          <li class="ui-block-a"><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide" class="ui-link ui-btn ui-icon-eye ui-btn-icon-top">Qu'est-ce que le Jquery Mobile</a></li>
          <li class="ui-block-b"><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide" class="ui-link ui-btn ui-icon-action ui-btn-icon-top">Télécharger le Pack jquery mobile</a></li>
          <li class="ui-block-c"><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide" class="ui-link ui-btn ui-icon-info ui-btn-icon-top">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

   <div role="content" class="ui-content">
      <a href="#nb_user" class="ui-btn ui-corner-all">Nombre d'utilisateurs d'internet par pays</a>
      <a href="#App_coder" class="ui-btn ui-corner-all">Apprendre à coder</a>
      <a href="#form" class="ui-btn ui-corner-all">Que pensez vous de cette appli ?</a>

   </div><!-- /content -->

   <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
    <h4 class="ui-title" role="heading" aria-level="1">© RR</h4>
   </div><!-- /footer -->
  </div></body></html>

Et voici le screenshot de la page générée:

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743
15 févr. 2016 à 15:06

Tu peux nous poster le code php de ta page index.php complet ?

Aurais tu des INCLUDE de sous-pages dedans ??
Dans le code html généré que tu nous montres;.. il y a toute une partie qui n'apparait dans les codes que tu nous montres depuis le début....

Réponse 4 / 4

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7
Modifié par jordane45 le 15/02/2016 à 15:13

Le seul include que j'ai c'est celui pour la connexion à la BDD,

Dans le code posté au debut, j'ai enlever une partie qui me sert pour d'autres pages afin ne vous éclaircir un peu le code mais voici mon code complet :

<?php
//-------------------------------------------------------------------//
//Fichier index.php
//-------------------------------------------------------------------//

//pour l'affichage des erreurs php
error_reporting(E_ALL);

//connexion à la BDD
require_once('connect.php');

//récupération des variables
$sexe = isset($_POST['sexe']) ? $_POST['sexe'] : NULL;
$date = isset($_POST['date']) ? $_POST['date'] : NULL;
$utile = isset($_POST['utile']) ? $_POST['utile'] : NULL;
$appris = isset($_POST['appris']) ? $_POST['appris'] : NULL;
$apparence = isset($_POST['apparence']) ? $_POST['apparence'] : NULL;
$avis = isset($_POST['avis']) ? $_POST['avis'] : NULL;


if( isset($_POST['Envoyer'])){


//Traitement du formulaire:
if ($sexe && $date && $utile && $appris && $apparence) {
  try{
      $sql_avis = 
      "INSERT INTO avis
      (sexe, date_naissance, note_utile, note_appris, note_apparence, avis)
      VALUES (:sexe, :date_naissance, :note_utile, :note_appris, :note_apparence, :avis)";

      $result = $db->prepare($sql_avis);
      $result->bindValue('sexe', $sexe, PDO::PARAM_INT);
      $result->bindValue('date_naissance', $date, PDO::PARAM_STR);
      $result->bindValue('note_utile',$utile, PDO::PARAM_INT);
      $result->bindValue('note_appris', $appris, PDO::PARAM_INT);
      $result->bindValue('note_apparence', $apparence, PDO::PARAM_INT);
      $result->bindValue('avis', $avis, PDO::PARAM_STR);
      $result->execute(); 

      echo " TEST : Insertion en BDD OK ! ";
      $msg = "Merci de nous avoir transmis votre avis sur cette appli";
   } catch (Exception $e){
     //en cas d'erreur
     echo 'Erreur : ' . $e->getMessage();
     exit();
   }
}else{
  $msg =  'Merci de remplir tout les champs svp';
}
 
}
?>
<!DOCTYPE html>
<html>
<head>
 <title>Appli Jquery Mobile</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile-1.4.5.css" /> 
 <script src="jquery-1.12.0.min.js"></script>
 <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <!-- Start of first page -->
  <div data-role="page" id="home">
   <div data-role="header">
    <h1>Appli Jquery Mobile</h1>
   </div><!-- /header -->
    <div data-role="navbar" class="navbar">
      <ul>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

   <div role="content" class="ui-content">
      <a href="#nb_user" class="ui-btn ui-corner-all">Nombre d'utilisateurs d'internet par pays</a>
      <a href="#App_coder" class="ui-btn ui-corner-all">Apprendre à coder</a>
      <a href="#form" class="ui-btn ui-corner-all">Que pensez vous de cette appli ?</a>

   </div><!-- /content -->

   <div data-role="footer">
    <h4>© RR</h4>
   </div><!-- /footer -->
  </div><!-- /page -->

  <!-- page 2 : Nombre d'utilisateur d'internet -->
  <div data-role="page" id="nb_user">

    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>
    <div role="main" class="ui-content">
    <h2>Nombre d'habitants qui utilisent internet</h2>
      <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Colonne à afficher..." data-column-popup-theme="a">
               <thead>
                 <tr class="ui-bar-d">
                   <th>Nom du pays</th>
                   <th data-priority="1">2011 (pour 100 habitants)</th>
                   <th data-priority="2">2012 (pour 100 habitants)</th>
                   <th data-priority="3">2013 (pour 100 habitants)</th>
                   <th data-priority="4">2014 (pour 100 habitants)</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th>Allemagne</th>
                   <td>81.3</td>
                   <td>82.3</td>
                   <td>84.2</td>
                   <td>86.2</td>
                 </tr>
                 <tr>
                   <th>Australie</th>
                   <td>79.5</td>
                   <td>79.0</td>
                   <td>83.0</td>
                   <td>84.6</td>
                 </tr>
                 <tr>
                   <th>Brésil</th>
                   <td>45.7</td>
                   <td>48.6</td>
                   <td>51.0</td>
                   <td>57.6</td>
                 </tr>
                 <tr>
                   <th>Espagne</th>
                   <td>67.6</td>
                   <td>69.8</td>
                   <td>71.6</td>
                   <td>76.2</td>
                 </tr>
                 <tr>
                   <th>France</th>
                   <td>77.8</td>
                   <td>81.4</td>
                   <td>81.9</td>
                   <td>83.8</td>
                 </tr>
                 <tr>
                   <th>Italie</th>
                   <td>54.4</td>
                   <td>55.8</td>
                   <td>58.5</td>
                   <td>62.0</td>
                 </tr>
                 <tr>
                   <th>Japon</th>
                   <td>79.1</td>
                   <td>79.5</td>
                   <td>89.7</td>
                   <td>90.6</td>
                 </tr>
                 <tr>
                   <th>Portugal</th>
                   <td>55.2</td>
                   <td>60.3</td>
                   <td>62.1</td>
                   <td>64.6</td>
                 </tr>
                 <tr>
                   <th>Thaïlande</th>
                   <td>23.7</td>
                   <td>26.5</td>
                   <td>28.9</td>
                   <td>34.9</td>
                 </tr>
                 <tr>
                   <th>Viet Nam</th>
                   <td>35.1</td>
                   <td>39.5</td>
                   <td>43.9</td>
                   <td>48.3</td>
                 </tr>
               </tbody>
             </table>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>© Romain Richard</h4>
    </div><!-- /footer -->
  </div><!-- /page Nombre d'utilisateur d'internet -->

  <!-- Debut de la page Apprendre à coder -->
  <div data-role="page" id="App_coder">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
      <a href="http://www.lehtml.com/html/" class="ui-btn ui-corner-all">Apprendre le HTML</a>
      <a href="http://www.cssdebutant.com/" class="ui-btn ui-corner-all">Apprendre le CSS</a>
      <a href="https://openclassrooms.com/courses/tout-sur-le-javascript" class="ui-btn ui-corner-all">Apprendre le Javascript</a>
      <a href="https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/introduction-a-php" class="ui-btn ui-corner-all">Apprendre le PHP</a>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>© Romain Richard</h4>
    </div><!-- /footer -->
  </div>
    <!-- Fin de la page Apprendre à coder -->

  <!-- Debut de la page Avis Formulaire -->
  <div data-role="page" id="form">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
    <h2>Que pensez vous de cette appli ?</h2>

    <form method="post" action="">
      <label for="select-choice-a" class="select">Sexe :</label>
      <select name="sexe" id="select-choice-a" data-native-menu="false">
          <option value="homme">Homme</option>
          <option value="femme">Femme</option>
      </select>
   <br>
      <label for="date">Date de naissance :</label>
      <input type="date" name="date" id="date" value="" required="required" /><br />

      <label for="slider-fill">Trouvez vous cette application utile ? (notez sur 20)</label>
      <input type="range" name="utile" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Avez vous appris des choses grâce à ce site ? (notez sur 20)</label>
      <input type="range" name="appris" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Notez l'apparence du site (sur 20)</label>
      <input type="range" name="apparence" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="textarea">Donnez votre avis</label>
      <textarea cols="40" rows="8" name="avis" id="textarea"></textarea>
      
      <input type="submit" value="Envoyer" name="Envoyer">
    </form>
  
  <div id="zone_message">
    <!-- Zone d'affichage des messages -->
   <?php
     if(isset($msg)){
         echo $msg;
        }
   ?>
  </div>
    </div><!-- /content -->
    <div data-role="footer">
      <h4>© RR</h4>
    </div><!-- /footer -->
  </div> <!-- Fin de la page Formulaire -->
</body>
</html>

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 743
Modifié par jordane45 le 15/02/2016 à 15:21

Nouvel essai :

<?php
//-------------------------------------------------------------------//
//Fichier index.php
//-------------------------------------------------------------------//


//Le temps des tests :
echo " <br> Affichage d'un message php pour tester...<br>";

//pour l'affichage des erreurs php
error_reporting(E_ALL);

//connexion à la BDD
require_once('connect.php');

//récupération des variables
$sexe = isset($_POST['sexe']) ? $_POST['sexe'] : NULL;
$date = isset($_POST['date']) ? $_POST['date'] : NULL;
$utile = isset($_POST['utile']) ? $_POST['utile'] : NULL;
$appris = isset($_POST['appris']) ? $_POST['appris'] : NULL;
$apparence = isset($_POST['apparence']) ? $_POST['apparence'] : NULL;
$avis = isset($_POST['avis']) ? $_POST['avis'] : NULL;

$msg=array();
if( isset($_POST['Envoyer'])){

 $msg['Valid_Formulaire'] = "Formulaire validé";
 //Traitement du formulaire:
 if ($sexe && $date && $utile && $appris && $apparence) {
  $msg['Valid_Formulaire_variables'] = "Les variables sont correctement remplies";
  try{
   
    $sql_avis = 
    "INSERT INTO avis
    (sexe, date_naissance, note_utile, note_appris, note_apparence, avis)
    VALUES (:sexe, :date_naissance, :note_utile, :note_appris, :note_apparence, :avis)";
  
    $result = $db->prepare($sql_avis);
    $result->bindValue('sexe', $sexe, PDO::PARAM_INT);
    $result->bindValue('date_naissance', $date, PDO::PARAM_STR);
    $result->bindValue('note_utile',$utile, PDO::PARAM_INT);
    $result->bindValue('note_appris', $appris, PDO::PARAM_INT);
    $result->bindValue('note_apparence', $apparence, PDO::PARAM_INT);
    $result->bindValue('avis', $avis, PDO::PARAM_STR);
    $insert = $result->execute(); 
        $msg['INSERT']= "Resultat INSERT : ".$insert;
    echo " TEST : Insertion en BDD OK ! ";
    $msg['OK'] = "Merci de nous avoir transmis votre avis sur cette appli";
   } catch (Exception $e){
    //en cas d'erreur
    echo 'Erreur : ' . $e->getMessage();
    $msg['Erreur Requete'] = 'Erreur : ' . $e->getMessage();
    exit();
   }
 }else{
  $msg['Erreur'] =  'Merci de remplir tout les champs svp';
 }
 
}
?>
<!DOCTYPE html>
<html>
<head>
 <title>Appli Jquery Mobile</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile-1.4.5.css" /> 
 <script src="jquery-1.12.0.min.js"></script>
 <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <!-- Start of first page -->
  <div data-role="page" id="home">
   <div data-role="header">
    <h1>Appli Jquery Mobile</h1>
   </div><!-- /header -->
    <div data-role="navbar" class="navbar">
      <ul>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

   <div role="content" class="ui-content">
      <a href="#nb_user" class="ui-btn ui-corner-all">Nombre d'utilisateurs d'internet par pays</a>
      <a href="#App_coder" class="ui-btn ui-corner-all">Apprendre à coder</a>
      <a href="#form" class="ui-btn ui-corner-all">Que pensez vous de cette appli ?</a>

   </div><!-- /content -->

   <div data-role="footer">
    <h4>© RR</h4>
   </div><!-- /footer -->
  </div><!-- /page -->

  <!-- page 2 : Nombre d'utilisateur d'internet -->
  <div data-role="page" id="nb_user">

    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>
    <div role="main" class="ui-content">
    <h2>Nombre d'habitants qui utilisent internet</h2>
      <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Colonne à afficher..." data-column-popup-theme="a">
               <thead>
                 <tr class="ui-bar-d">
                   <th>Nom du pays</th>
                   <th data-priority="1">2011 (pour 100 habitants)</th>
                   <th data-priority="2">2012 (pour 100 habitants)</th>
                   <th data-priority="3">2013 (pour 100 habitants)</th>
                   <th data-priority="4">2014 (pour 100 habitants)</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th>Allemagne</th>
                   <td>81.3</td>
                   <td>82.3</td>
                   <td>84.2</td>
                   <td>86.2</td>
                 </tr>
                 <tr>
                   <th>Australie</th>
                   <td>79.5</td>
                   <td>79.0</td>
                   <td>83.0</td>
                   <td>84.6</td>
                 </tr>
                 <tr>
                   <th>Brésil</th>
                   <td>45.7</td>
                   <td>48.6</td>
                   <td>51.0</td>
                   <td>57.6</td>
                 </tr>
                 <tr>
                   <th>Espagne</th>
                   <td>67.6</td>
                   <td>69.8</td>
                   <td>71.6</td>
                   <td>76.2</td>
                 </tr>
                 <tr>
                   <th>France</th>
                   <td>77.8</td>
                   <td>81.4</td>
                   <td>81.9</td>
                   <td>83.8</td>
                 </tr>
                 <tr>
                   <th>Italie</th>
                   <td>54.4</td>
                   <td>55.8</td>
                   <td>58.5</td>
                   <td>62.0</td>
                 </tr>
                 <tr>
                   <th>Japon</th>
                   <td>79.1</td>
                   <td>79.5</td>
                   <td>89.7</td>
                   <td>90.6</td>
                 </tr>
                 <tr>
                   <th>Portugal</th>
                   <td>55.2</td>
                   <td>60.3</td>
                   <td>62.1</td>
                   <td>64.6</td>
                 </tr>
                 <tr>
                   <th>Thaïlande</th>
                   <td>23.7</td>
                   <td>26.5</td>
                   <td>28.9</td>
                   <td>34.9</td>
                 </tr>
                 <tr>
                   <th>Viet Nam</th>
                   <td>35.1</td>
                   <td>39.5</td>
                   <td>43.9</td>
                   <td>48.3</td>
                 </tr>
               </tbody>
             </table>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>© Romain Richard</h4>
    </div><!-- /footer -->
  </div><!-- /page Nombre d'utilisateur d'internet -->

  <!-- Debut de la page Apprendre à coder -->
  <div data-role="page" id="App_coder">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
      <a href="http://www.lehtml.com/html/" class="ui-btn ui-corner-all">Apprendre le HTML</a>
      <a href="http://www.cssdebutant.com/" class="ui-btn ui-corner-all">Apprendre le CSS</a>
      <a href="https://openclassrooms.com/courses/tout-sur-le-javascript" class="ui-btn ui-corner-all">Apprendre le Javascript</a>
      <a href="https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/introduction-a-php" class="ui-btn ui-corner-all">Apprendre le PHP</a>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>© Romain Richard</h4>
    </div><!-- /footer -->
  </div>
    <!-- Fin de la page Apprendre à coder -->

  <!-- Debut de la page Avis Formulaire -->
  <div data-role="page" id="form">
    <div data-role="header">
      <h1>Appli Jquery Mobile</h1>
    </div><!-- /header -->
    <div data-role="navbar">
      <ul>
          <li><a href="#home" data-icon="home" data-transition="slide">Accueil</a></li>
          <li><a href="https://jquerymobile.com/" data-icon="eye" data-transition="slide">Qu'est-ce que le Jquery Mobile</a></li>
          <li><a href="http://jquerymobile.com/download/" data-icon="action" data-transition="slide">Télécharger le Pack jquery mobile</a></li>
          <li><a href="http://demos.jquerymobile.com/1.4.5/" data-icon="info" data-transition="slide">Documentation Jquery Mobile</a></li>
      </ul>
    </div>

    <div role="content" class="ui-content">
    <h2>Que pensez vous de cette appli ?</h2>

    <form method="post" action="" name="formulaire">
      <label for="select-choice-a" class="select">Sexe :</label>
      <select name="sexe" id="select-choice-a" data-native-menu="false">
          <option value="homme">Homme</option>
          <option value="femme">Femme</option>
      </select>
      <br>
      <label for="date">Date de naissance :</label>
      <input type="date" name="date" id="date" value="" required="required" /><br />

      <label for="slider-fill">Trouvez vous cette application utile ? (notez sur 20)</label>
      <input type="range" name="utile" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Avez vous appris des choses grâce à ce site ? (notez sur 20)</label>
      <input type="range" name="appris" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="slider-fill">Notez l'apparence du site (sur 20)</label>
      <input type="range" name="apparence" id="slider-fill" value="0" min="0" max="20" step="1" data-highlight="true" />

      <label for="textarea">Donnez votre avis</label>
      <textarea cols="40" rows="8" name="avis" id="textarea"></textarea>
      
      <input type="submit" value="Envoyer" name="Envoyer">
    </form>
  
  <div id="zone_message">
    <!-- Zone d'affichage des messages -->
   <?php
    if(!empty($msg)){
      foreach($msg as $K=>$V){
      echo $K . " -> " .$V;  
      }
    }
   ?>
  </div>
    </div><!-- /content -->
    <div data-role="footer">
      <h4>© RR</h4>
    </div><!-- /footer -->
  </div> <!-- Fin de la page Formulaire -->
</body>
</html>

On voit le message "Affichage d'un message php pour tester..." apparaitre 1 seconde entre chaque redirection de page (juste la temps que la nouvelle page se charge)

Heu... qu'appelles tu : "entre chaque redirection de page"
Tu n'as aucune redirection de page dans ton code ....

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7
15 févr. 2016 à 15:27

en quelques sorte si... c'est du Jquery Mobile, tout le code est sur la même page "index.php" mais a l’exécution j'ai plusieurs pages...

roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017 7 > roms75001 Messages postés 395 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 9 juillet 2017
Modifié par roms95200 le 15/02/2016 à 15:32

Sur ma page d'acceuil j'ai 3 catégories :

- Nombre d'utilisateurs d'internet par pays

- Apprendre à coder

- Que pensez vous de cette appli ?

Chacune de ces catégories renvoi vers une page dont le code sources se trouve sur index.php

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

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

Contact LEBONCOIN

Google Chrome : "Nouvel envoi du formulaire"

Problème d'envoi de formulaire