从提交停止形式，使用jQuery [英] Stop form from submitting , Using Jquery

问题描述

我想从如果验证失败提交停止我的方式。我试图按照此 previous帖子但我不会为我工作。我缺少什么？

 ＆LT;输入ID =saveButton类型=提交值=保存/＆GT;
＆LT;输入ID =cancelButton类型=按钮值=取消/＆GT;
＆LT;脚本SRC =../../脚本/ jQuery的-1.4.1-vsdoc.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;    $（文件）。就绪（函数（）{
        $（形式）。递交（函数（五）{
            $阿贾克斯（{
                网址：'@ Url.Action（HasJobInProgress，ClientChoices）/'，
                数据：{ID：@ Model.ClientId}，
                成功：功能（数据）{
                    showMsg（数据，E）;
                }，
                缓存：假的
            }）;
        }）;
    }）;
    $（＃cancelButton）。点击（函数（）{
        window.location的='@ Url.Action（名单，默认，新的{clientid = Model.ClientId}）;
    }）;
    $（[类型=文本]）。对焦（函数（）{
        $（本）。选择（）;
    }）;
    功能showMsg（hasCurrentJob，发件人）{
        如果（hasCurrentJob ==真）{
            警报（当前客户在正在进行的作业没有变化可以保存，直到当前作业完成。）;
            如果（发送！= NULL）{
                。发信人preventDefault（）;
            }
            返回false;
        }
    }＆LT; / SCRIPT＆GT;
 

解决方案

再次AJAX异步是。所以showMsg功能后，才从服务器成功响应被称为..和表单提交事件不会等到AJAX的成功。

移动电子preventDefault（）; 在单击处理程序的第一行

  $（形式）。递交（函数（五）{
      亦即preventDefault（）; //这将prevent从提交表单。
      ...
 

见下文code，

  

我想这是允许的HasJobInProgress ==假

  $（文件）。就绪（函数（）{
    $（形式）。递交（函数（五）{
        亦即preventDefault（）; // prevent默认表单提交
        $阿贾克斯（{
            网址：'@ Url.Action（HasJobInProgress，ClientChoices）/'，
            数据：{ID：@ Model.ClientId}，
            成功：功能（数据）{
                showMsg（数据）;
            }，
            缓存：假的
        }）;
    }）;
}）;
$（＃cancelButton）。点击（函数（）{
    window.location的='@ Url.Action（名单，默认，新的{clientid = Model.ClientId}）;
}）;
$（[类型=文本]）。对焦（函数（）{
    $（本）。选择（）;
}）;
功能showMsg（hasCurrentJob）{
    如果（hasCurrentJob ==真）{
        警报（当前客户在正在进行的作业没有变化可以保存，直到当前作业完成。）;
        返回false;
    }其他{
       $（形式）解除绑定（提交）提交（）。
    }
}
 

I'm trying to stop my form from submitting if a validation fails. I tried following this previous post but I doesn't work for me. What am I missing?

<input id="saveButton" type="submit" value="Save" />
<input id="cancelButton" type="button" value="Cancel" />
<script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("form").submit(function (e) {
            $.ajax({
                url: '@Url.Action("HasJobInProgress", "ClientChoices")/',
                data: { id: '@Model.ClientId' },
                success: function (data) {
                    showMsg(data, e);
                },
                cache: false
            });
        });
    });
    $("#cancelButton").click(function () {
        window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })';
    });
    $("[type=text]").focus(function () {
        $(this).select();
    });
    function showMsg(hasCurrentJob, sender) {
        if (hasCurrentJob == "True") {
            alert("The current clients has a job in progress. No changes can be saved until current job completes");
            if (sender != null) {
                sender.preventDefault();
            }
            return false;
        }
    }

</script>

解决方案

Again, AJAX is async. So the showMsg function will be called only after success response from the server.. and the form submit event will not wait until AJAX success.

Move the e.preventDefault(); as first line in the click handler.

$("form").submit(function (e) {
      e.preventDefault(); // this will prevent from submitting the form.
      ...

See below code,

I want it to be allowed HasJobInProgress == False

$(document).ready(function () {
    $("form").submit(function (e) {
        e.preventDefault(); //prevent default form submit
        $.ajax({
            url: '@Url.Action("HasJobInProgress", "ClientChoices")/',
            data: { id: '@Model.ClientId' },
            success: function (data) {
                showMsg(data);
            },
            cache: false
        });
    });
});
$("#cancelButton").click(function () {
    window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })';
});
$("[type=text]").focus(function () {
    $(this).select();
});
function showMsg(hasCurrentJob) {
    if (hasCurrentJob == "True") {
        alert("The current clients has a job in progress. No changes can be saved until current job completes");
        return false;
    } else {
       $("form").unbind('submit').submit();
    }
}

这篇关于从提交停止形式，使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！