7

jQuery モバイルの UI を使用している HTML メイン ページがあります。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>

フォームのアクション パラメータは、このロジックを持つ私の 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モバイルを呼び出す行を削除すると、すべてが正常に機能し、データがデータベースに書き込まれることがわかりました(phpのエコーに到達します)。jQuery モバイルは私の php コードと互換性がないようです。これを修正するにはどうすればよいですか? 前もって感謝します！

UPDATED (私はそれを機能させました): これが私がフォームで変更したものです:

<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 = "page" を持つ div 内のページ) は、AJAX 経由でのみ送信できます。それ以外の場合は機能しません。より多くの人が到達できるように、トピックを私の質問に変更します。

4

1 に答える 1

6

私はあなたのコードをコピーし、jquery モバイルを挿入しました。いくつかのマイナーな変更を行った後、データを投稿しています。DB挿入ではなく、echoコマンドで実行しました。

以下を見てください。

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-19T19:04:30.463 に答える