如何在jQuery Mobile頁面內提交表單？

我有一個使用jQuery手機UI的HTML主頁面。某處在HTML頁面上我有一種形式，是像一個投票的形式：如何在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>

形式的作用參數調用我的PHP文件，該文件有這樣的邏輯：

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

我有一個數據庫在我的WAMP localhost服務器上創建，並且此php代碼正在寫入數據庫，具體取決於從表單中選擇和提交哪個無線電選項。這些php中的回聲從未達到過。

問題是，當我點擊提交，我得到一個白色的屏幕在左上角說「未定義」，之後沒有什麼被寫入數據庫。我發現，如果我從html主頁中刪除頂部調用jQuery mobile的行，那麼所有工作都正常並且數據寫入數據庫（PHP中的迴響已達到）。看來，jQuery手機不兼容我的PHP代碼。我應該如何解決這個問題？提前謝謝！

被更新（我做了工作）：以下是我在形式變化：

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

與數據庫中的PHP文件保持不變。除此之外，我還添加了一個Ajax代碼：

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

要summerize：jQuery Mobile的網頁（內DIV頁與數據角色=「頁面」）只能通過AJAX所需提交。否則它將無法工作。我會改變主題爲我的問題，讓更多的人可以達到它。

來源

2012-04-19 Viktor Georgiev

在您的'logicDB.php'文件中查找'echo' /'print_r'語句，除了上面提供的內容。 – 2012-04-19 16:34:40

我沒有看到你的jQuery？沒有這個，我們不能看到發生了什麼。 – 2012-04-19 16:38:38

嗨Bibhas，我沒有包含在我的PHP文件中。我將用整個php代碼編輯我的問題。 – 2012-04-20 07:13:21

我複製了你的代碼並插入了jquery mobile，並且在做了一些小改動後，我得到了發佈的數據。我通過echo命令運行它，而不是DB插入。

看看下面的例子：在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>

休息的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>

最後的logicDB。 php

個

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

主要變化是對

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

和data-ajax="false"我先前提及。

看看是否適合你。

來源

2012-04-19 19:04:30 jnthnjns

我已經嘗試過data-ajax =「false」，並且我再次接收到白色屏幕而沒有undefined（空白屏幕）這個詞，並且沒有任何內容再次寫入數據庫......我在某處讀到jQuery Mobile重定向到它自己的頁面並且我應該在我的PHP代碼中包含其他內容，但是我不知道該如何......感謝您的回覆，無論如何。 – 2012-04-20 07:11:24

超出我最近的答案的快速建議：將'if'語句更改爲'switch'，'case'語法。像你這樣的小檢查並不重要，但在更大的檢查'switch'中，'case'運行得更快並且在成功之後退出，而不管循環通過每個if都是否正確。 – jnthnjns 2012-05-07 19:38:35

嗨Asok，謝謝你的建議。但是，我找到了解決我的問題的方法。我用AJAX提交表單，並刪除了代碼數據的和平 - ajax =「false」。我將用我更改和添加的代碼編輯我的問題。 – 2012-05-09 06:52:05

如何在jQuery Mobile頁面內提交表單？

回答

相關問題