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

如您所见，我已删除表单属性方法和操作。

我使用的是表单提交事件，而不是按钮单击事件。使用e.preventDefault()阻止提交事件；并返回 false并休息在 ajax 上。我在 ajax 调用中添加了成功和错误回调函数，但您可以按照自己的意愿进行操作。

编辑 ：

这是一个工作示例，只需将其放入新的 HTMl 中并对其进行测试。我在 jsFiddle 示例中忘记了两件事。首先提交事件需要在正确的 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 回答