无法使用onSubmit属性触发的Ajax响应来阻止表单提交。

时间:2011-12-14 00:36:35

标签: php mysql ajax forms onsubmit

这个问题与已经回答的问题有点不同......

我要做的是运行一个函数autoHide(),它调用一个PHP文件artistdo.php,执行一个MySQL查询,在表单提交上,如果它返回true(查询)成功),表格不提交。

我得到的是MySQL查询没有运行,即使我删除了查询并在artistdo.php页面中返回true,ajax中的return false也不会停止表单提交但它确实会导致alert("Success");被调用,但是,如果我在autoHide()函数中但在AJAX之外放置返回false,则表单无法正确提交。这是我到目前为止所做的:

表单页面:

<head>
    function autoHide() {
        $.ajax({
            'url': '/artistdo.php',
            'type': 'GET',
            'dataType': 'json',
            'data': {
                cmd: 'autoHideProduct'
            },
            'success': function () {
                alert("Success");
                return false;
            }
        });
    }
</head>

<body>
  <form action="http://off-site/form.php" method="post" 
        onSubmit="return autoHide()">
    <input type="submit" value="submit"
           onMouseOver="this.style.cursor='pointer'">
  </form>

artistdo.php页面(为便于阅读,这是一个简化版本):

if($get['cmd'] == 'autoHideProduct') {
    $query = mysql_query("UPDATE products SET house='0'");

    if ($query) {
        return true;
    } else {
        return false;
    }

所以,如果我从artistdo.php页面中完全删除整个MySQL查询并将其替换为return true;之外的任何内容,表单仍然会提交,这让我觉得问题出现在AJAX中, artistdo.php页面肯定会返回true并且正在调用alert("Success");。 如果我将return true移到AJAX调用之外,则表单无法正确提交。

我希望这是有道理的......

感谢您的帮助!

4 个答案:

答案 0 :(得分:2)

您可以使用.data()方法将元数据与表单相关联,以便您了解是否应该提交:

<head>
    <script type="text/javascript">
        $(function() {
            $('#myform').submit(function() {
                if ($(this).data('shouldSubmit')) {
                    return true;
                }

                $.ajax({
                    url: '/artistdo.php',
                    type: 'GET',
                    dataType: 'json',
                    context: this,
                    data: { cmd: 'autoHideProduct' },
                    success: function (result) {
                        if (result) {
                            $(this)
                                .data('shouldSubmit', true)
                                .submit();
                        }
                    }
                });

                return false;
            });
        });
    </script>
</head>

<body>
    <form action="http://off-site/form.php" method="post" id="myform">
        <!-- Form fields -->
        <input type="submit" value="submit" onMouseOver="this.style.cursor='pointer'">
    </form>
</body>

答案 1 :(得分:0)

如果我理解正确,这可能会有所帮助

$('form').submit(function (event)
{
    event.preventDefault();
    //handle the rest of the logic
}

这将停止表单提交,如果返回为真,你应该调用你的函数并提交表单。

答案 2 :(得分:0)

给出当前代码结构的第一个问题是对$.ajax的调用是异步的,这意味着它被执行,然后浏览器转到下一个语句并让$.ajax调用完成“在后台“。这就是为什么当您在return false调用之后放置$.ajax语句时,表单不提交,而不是将返回false置于$.ajax调用的成功函数内。

除非你创建某种全局变量,否则我认为你不想做什么。你有可能改变你在表格上的表现吗?

答案 3 :(得分:0)

我认为问题出在这一行

    if($get['cmd'] == 'autoHideProduct') {

它应该像

    if($_GET['cmd'] == 'autoHideProduct') {