如何使用jquery阻止表单提交?

时间:2013-03-27 05:03:42

标签: jquery html jsp

实际上在jsp页面我正在使用spring标签和jquery代码.. 听到我的代码..

    <form:form action="process">

        <p class="forgot">
            <a href="login/forgotPassword" class="submit_forgotPassword">Forgot your
                password?</a>
        </p>
        <p class="remember">
            <input id="signin_submit" value="Sign in" tabindex="6" type="submit">

        </p>
    </form:form>

<script>
    $('#LOGIN').ajaxForm({
        target : '#body',
        success : function(responseText, statusText, xhr, $form) {
            alert(responseText);
        },
        beforeSubmit : function() {
            $.blockUI({
                message : '<h1> Just a moment...</h1>'
            });
        }
    }); 
    $('.submit_forgotPassword').click(function(event){
        event.preventDefault(); // interrupt default hyperlink behavior
        $("#LOGIN").attr("action",$(this).attr("href"));
        $("#LOGIN").submit();
    });

</script>

问题是提交表格未执行必要的操作

实际上我的代码有两个操作1. submit 2. Forgot Password

1.首次我们提供正确的值,然后点击提交它完美地工作..

2.第二次(点击退出后)我们提供emailid并点击forgot Password?链接电子邮件将发送到给定的电子邮件ID它也正常工作......现在问题来了......

3.3当我们提供正确的值并单击提交电子邮件发送到给定的电子邮件时(它的工作方式类似于第2步)...

为什么它像这样工作我指定了每个点击处理程序表单...

每当我们提供正确的值时,每次发送邮件时都会点击forgot password?链接...

给我建议......

3 个答案:

答案 0 :(得分:1)

您正在点击“忘记密码”按钮时将表单操作更改为“忘记密码”链接。我们必须将表单操作还原为“提交”链接,否则“提交”按钮会将帖子发布到“忘记密码”链接。

<script>

    $('#LOGIN').ajaxForm({
        target : '#body',
        success : function(responseText, statusText, xhr, $form) {
            alert(responseText);
        },
        beforeSubmit : function() {
            $.blockUI({
                message : '<h1> Just a moment...</h1>'
            });
        }
    }); 
    $('.submit_forgotPassword').click(function(event){
        event.preventDefault(); // interrupt default hyperlink behavior
        //Save original form submit link before changinf it to forgot password link
        var submitBtnLink = $("#LOGIN").attr("action");
        $("#LOGIN").attr("action",$(this).attr("href"));
        $("#LOGIN").submit();
       //Revert form action to submit link after submitting forgot password
       $("#LOGIN").attr("action",submitBtnLink);
    });

</script>

试试这个

答案 1 :(得分:1)

我的建议是不要将登录表单操作用作忘记密码处理程序。

$("#LOGIN").attr("action",$(this).attr("href"));
        $("#LOGIN").submit();

如果您忘记了密码页面,为什么不简单地重定向到该页面并从那里处理请求?

混淆可能是你使用ajaxForm插件建议使用它来提交表单:

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

我会将重置密码视为单独的请求,并抓住您希望使用的任何参数,如用户名作为数据,如下所示:

var queryString = $('#myFormId').formSerialize(); 

这取决于你想要达到的目标。你能解释为什么你用重置密码动作提交表格吗?

使用JSP并没有任何区别我可以看到。

答案 2 :(得分:1)

您已在此处更改了提交网址:

$('.submit_forgotPassword').click(function(event){
        event.preventDefault(); // interrupt default hyperlink behavior
        $("#LOGIN").attr("action",$(this).attr("href"));
        $("#LOGIN").submit();
    });

因此,您需要在提交点击时重置网址:

 $('#signin_submit').click(function(event){
        event.preventDefault(); // interrupt default hyperlink behavior
        $("#LOGIN").attr("action","login/processLogin");
        $("#LOGIN").submit();
    });