1

jQuery Mobile を使用して送信しようとしているフォームがあります。ただし、フォームを送信すると、ページは送信ページに変わり、「未定義」と表示されます。ページには他に何もありません。

jquery/ajax は次のとおりです。

$("#submit_comment").click(function() {

            var formData = $("#comment_form").serialize();

            $.ajax({
                type: "POST",
                url: "forms/comment_form.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError          

            });

            return false;

        });

HTMLフォームは次のとおりです。

<form id="comment_form" action="forms/comment_form.php" method="POST" style="display:none";>
                    <input type="hidden" name="user_id" value="<?php echo $session_user_id; ?>">
                    <textarea id="text_area_input" name="comment" placeholder="Enter a comment here."></textarea>
                    <input type="submit" id="submit_comment" name="submit_comment" value="Post Comment">

                </form>

投稿ページはこちら：

if (empty($_POST['submit_comment']) === false) {
    if (empty($_POST['user_id']) === true) {
        $comment_errors[] = 'Sorry, there was an error submitting your comment. Please try again.';
    }
    if (empty($_POST['comment']) === true) {
        $comment_errors[] = 'You must enter something into the comment field.'; 
    } 
    if (empty($comment_errors) === false) { 
        echo "<div id='comment_errors'><?php echo output_comment_errors($comment_errors);?></div>";
    } else if (empty($comment_errors) === true) {
        $comment = $_POST['comment'];
        $user_id = $_POST['user_id'];       
        echo "ok";
    }
}
4

1 に答える 1

2

作業例: http://jsfiddle.net/Gajotres/B8mrX/

HTML :

<form id="comment_form">
        <input type="hidden" name="user_id" value=""/>
        <textarea id="text_area_input" name="comment" placeholder="Enter a comment here."></textarea>
        <input type="submit" id="submit_comment" name="submit_comment" value="Post Comment"/>
 </form>

JS:

$('#comment_form').on('submit', function(e){       
    e.preventDefault();

    var formData = $("#comment_form").serialize();

    $.ajax({
        type: "POST",
        url: "forms/comment_form.php",
        cache: false,
        data: formData,
        success: function (result) {
            alert('Success');
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }        

    });    

    return false;
});

ご覧のとおり、フォーム属性のメソッドとアクションを削除しました。

ボタンクリックイベントの代わりに、フォーム送信イベントを使用しています。Submit イベントはe.preventDefault();で防止されます。falseを返し、残りは ajax にあります。ajax 呼び出し内に成功とエラーのコールバック関数を追加しましたが、必要に応じて実行できます。

編集 ：

これは実用的な例です。新しい HTMl の中に入れてテストしてください。jsFiddle の例で 2 つのことを忘れています。最初の送信イベントは正しい jQuery Mobile ページ イベント内にある必要があり (それがないと、送信イベントはフォームにバインドされません)、フォーム タグに data-ajax="false" 属性を追加して、従来の jQuery Mobile フォームの送信を無効にする必要があります。 .

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script>
        $(document).on('pagebeforeshow', '#index', function(){      
            $('#comment_form').on('submit', function(e){

                e.preventDefault();

                var formData = $("#comment_form").serialize();

                $.ajax({
                    type: "POST",
                    url: "forms/comment_form.php",
                    cache: false,
                    data: formData,
                    success: function (result) {
                        alert('Success');
                    },
                    error: function (request,error) {
                        alert('Network error has occurred please try again!');
                    }        

                });    

                return false;
            }); 
        });         
    </script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <form id="comment_form" data-ajax="false">
                    <input type="hidden" name="user_id" value=""/>
                    <textarea id="text_area_input" name="comment" placeholder="Enter a comment here."></textarea>
                    <input type="submit" id="submit_comment" name="submit_comment" value="Post Comment"/>
             </form>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>
于 2013-03-23T17:41:13.407 に答える