Question

我有一个HTML主页，它使用的是jQuery mobile的UI。在HTML页面的某个地方，我有一个类似于投票表单的表单：

<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>

表单的action参数调用我的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中的这些回声。

问题在于，当我点击提交时，我会看到一个白色屏幕＆＃34; undefined＆＃34;在左上角，之后没有任何内容写入数据库。我发现如果我从html主页面中删除调用顶部jQuery mobile的行一切正常，数据写入数据库（到达php中的回声）。似乎jQuery mobile与我的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;
    }

总结一下：jQuery Mobile页面（带有data-role =＆＃34; div＆＃34;的div中的页面）只能通过AJAX提交。它不会起作用。我会将主题更改为我的问题，以便更多人可以访问它。

Answer 1

我复制了您的代码并插入了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"。

看看它是否适合你。

如何在jQuery Mobile页面中提交表单？

1 个答案: