Comment soumettre un formulaire dans une page jQuery Mobile?

J'ai une page principale HTML qui utilise l'interface utilisateur de jQuery mobile. Quelque part sur la page HTML que j'ai une forme qui est quelque chose comme une forme de vote:Comment soumettre un formulaire dans une page jQuery Mobile?

<form name = "vote" action = "logicDB.php" method = "post"> 
        <center> 
         <h3>Watch our videos above and share your opinion which manufacturer produces the best sport sedans</h3>     
         <fieldset style = "width:60%;"> 
          <legend>Choose a car:</legend> 
          <input type = "radio" name = "rc1" id = "radio-choice-1" value = "Audi"/> 
          <input type = "radio" name = "rc1" id = "radio-choice-2" value = "BMW"/> 
          <input type = "radio" name = "rc1" id = "radio-choice-3" value = "Mercedes"/>   
         </fieldset>     
         <input value = "SUBMIT" type = "submit" /> 
        </center> 
</form>

Le paramètre d'action du formulaire appelle mon fichier php qui a cette logique:

<?php 
$connection = mysql_connect("localhost","root","myPassword"); 
if(!$connection){ die('Could not connect: ' . mysql_error()); } 

mysql_select_db("mydatabase", $connection); 

if ($_POST['rc1'] == 'Audi') 
{ 
    mysql_query(" 
    UPDATE carvote 
    SET votes = votes + 1 
    WHERE Brands = 'Audi' 
    ",$connection); 

    echo "success Audi within if"; 
} 

if ($_POST['rc1'] == 'BMW') 
{ 
    mysql_query(" 
    UPDATE carvote 
    SET votes = votes + 1 
    WHERE Brands = 'BMW' 
    ",$connection); 

    echo "success BMW within if"; 
} 

if ($_POST['rc1'] == 'Mercedes') 
{ 
    mysql_query(" 
    UPDATE carvote 
    SET votes = votes + 1 
    WHERE Brands = 'Mercedes' 
    ",$connection); 

    echo "success Mercedes within if"; 
} 
mysql_close($connection); 
?>

J'ai base de données créée sur mon serveur WAMP localhost et ce code php écrit dans la base de données en fonction de l'option radio choisie et soumise à partir du formulaire. Ces échos dans le php ne sont jamais atteints. Le problème est que lorsque je clique sur Envoyer, je reçois un écran blanc disant "indéfini" dans le coin supérieur gauche et après quoi rien n'est écrit dans la base de données. J'ai trouvé que si je supprime la ligne qui appelle le mobile jQuery en haut de la page principale html tout fonctionne bien et les données sont écrites dans la base de données (les échos dans le php sont atteints). Il semble que jQuery mobile n'est pas compatible avec mon code php. Comment devrais-je résoudre ce problème? Merci d'avance!

MISE À JOUR (je l'ai fait le travail): Voici ce que je changé sous la forme:

<form id = "ContactForm" onsubmit="return submitForm();">

Le fichier php avec la base de données reste le même. Autre que j'ai également ajouté un code Ajax:

function submitForm() 
    { 
     $.ajax({type:'POST', url: 'logicDB.php', data:$('#ContactForm').serialize(), success: function(response) 
     { 
      $('#ContactForm').find('.form_result').html(response); 
     }}); 
     return false; 
    }

Pour summerize: pages jQuery Mobile (pages intérieures div avec un data-role = "page") peut être submited UNIQUEMENT via AJAX. Cela ne fonctionnera pas autrement. Je vais changer le sujet à ma question, afin que plus de gens puissent l'atteindre.

Source

2012-04-19 Viktor Georgiev

Recherchez une instruction 'echo' /' print_r' dans votre fichier 'logicDB.php', à l'exception de ce que vous avez indiqué ci-dessus. –

Je ne vois pas votre jQuery? Sans cela, nous ne pouvons pas voir ce qui se passe. –

Salut Bibhas, je ne l'ai pas inclus dans mon fichier php.Je vais éditer ma question avec le code php entier. –

J'ai copié votre code et inséré jquery mobile et après avoir apporté quelques modifications mineures je reçois des données postées. Je l'ai couru par des commandes d'écho, pas des insertions de DB.

Jetez un oeil à l'adresse suivante:

Appel sur Jquery Mobile:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head>

Reste page index.php:

<div data-role="page"> 
<center> 
    <h3>Watch our videos above and share your opinion which manufacturer produces the best sport sedans</h3>     
    <form name="vote" action="logicDB.php" method="post" data-ajax="false"> 
     <fieldset style = "width:60%;" data-role="controlgroup"> 
      <legend>Choose a car:</legend> 
      <input type = "radio" name="rc1" id = "radio-choice-1" value = "Audi"/> 
      <label for="radio-choice-1">Audi</label> 

      <input type = "radio" name="rc1" id = "radio-choice-2" value = "BMW"/> 
      <label for="radio-choice-2">BMW</label> 

      <input type = "radio" name="rc1" id = "radio-choice-3" value = "Mercedes"/> 
      <label for="radio-choice-3">Mercedes</label>        
     </fieldset>     
     <input value = "SUBMIT" type = "submit" /> 
    </form> 
</center>

Et enfin le logicDB. php

if ($_POST['rc1'] == 'Audi') { 
echo "Audi <br>"; 
} 
if ($_POST['rc1'] == 'BMW') { 
echo "BMW <br>"; 
} 
if ($_POST['rc1'] == 'Mercedes') { 
echo "Mercedes <br>"; 
}

Les principaux changements ont été à la

<fieldset style = "width:60%;" data-role="controlgroup">

et data-ajax="false" je l'ai mentionné avant.

Voyez si cela fonctionne pour vous.

Source

2012-04-19 19:04:30 jnthnjns

J'ai déjà essayé le data-ajax = "false" et je reçois à nouveau l'écran blanc sans le mot undefined (écran vide), et rien n'est écrit à nouveau dans la base de données ... J'ai lu quelque part que jQuery Mobile redirige vers ses propres pages et que je devrais inclure quelque chose d'autre dans mon code PHP, mais je ne sais pas quoi ... Merci pour votre réponse, de toute façon. –

Suggestion rapide au-delà de ma réponse la plus récente: Change les instructions 'if' en syntaxe' switch', 'case'. Les petits contrôles comme les vôtres n'ont pas vraiment d'importance mais dans les plus grands contrôles 'switch',' case' s'exécutent plus vite et s'arrêtent après le succès, plutôt que de boucler chaque 'if' si le premier est correct ou non. – jnthnjns

Bonjour Asok, merci pour votre suggestion. Cependant, j'ai trouvé la solution à mon problème. J'ai soumis le formulaire avec AJAX et enlevé la paix du code data-ajax = "false". Je vais modifier ma question avec le code que j'ai changé et ajouté. –

Comment soumettre un formulaire dans une page jQuery Mobile?

Répondre

Questions connexes