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

I have a HTML main page which is using jQuery mobile's UI. Somewhere on the HTML page I have a form which is something like a voting form:

我有一个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>

The action parameter of the form is calling my php file which has this logic:

表单的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);
?>

I have a database created on my WAMP localhost server and this php code is writing to the database depending on which radio option is chosen and submitted from the form. These echoes in the php are never reached.

我在我的WAMP localhost服务器上创建了一个数据库,这个php代码正在写入数据库,具体取决于从表单中选择和提交的无线电选项。从未达到过php中的这些回声。

The problem is that when I click submit I get a white screen saying "undefined" in the top left corner and after that nothing is written to the database. I have found that if I remove the line which calls the jQuery mobile at the top from the html main page everything is working fine and data is written to the database (the echoes in the php are reached). It seems that jQuery mobile is not compatible with my php code. How should I fix this? Thank you in advance!

问题是,当我点击提交时,我会在左上角看到一个白色的屏幕,显示“未定义”,之后没有任何内容写入数据库。我发现如果我从html主页面顶部删除调用jQuery mobile的行,一切正常,数据写入数据库(到达php中的回声)。似乎jQuery mobile与我的php代码不兼容。我该怎么解决这个问题?先谢谢你!

UPDATED (I made it work): Here is what I changed in the form:

更新(我使它工作):这是我在表单中更改的内容:

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

The php file with the database remains the same. Other than that I have also added an Ajax code:

带有数据库的php文件保持不变。除此之外,我还添加了一个Ajax代码:

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

To summerize: jQuery Mobile pages (pages inside div with a data-role = "page") can be submited ONLY via AJAX. It won't work otherwise. I will change the topic to my question, so that more people can reach it.

总结一下:jQuery Mobile页面(div中带有data-role =“page”的页面)只能通过AJAX提交。它不会起作用。我会将主题改为我的问题,以便更多人能够达到它。

1 个解决方案

#1

I copied your code and inserted jquery mobile and after making a couple minor changes I am getting data posted. I ran it through echo commands, not DB inserts.

我复制了您的代码并插入了jquery mobile,在进行了一些小的更改后,我发布了数据。我通过echo命令运行它,而不是DB插入。

Take a look at the following:

看看以下内容:

Call on Jquery Mobile:

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

Rest of index.php 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>

And finally the logicDB.php

最后是logicDB.php

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

The primary changes were to the

主要的变化是

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

and the data-ajax="false" I mentioned prior.

和之前提到的data-ajax =“false”。

See if that works for you.

看看它是否适合你。

1 个解决方案

#1

更多相关文章

随机推荐