从jquery ajax调用时,输入表单不起作用

时间:2015-03-02 08:03:40

标签: javascript php jquery ajax

很抱歉,如果我问一个荒谬的问题,我对ajax和jQuery完全是新手。

基本上我的表格如下;

<form id="login_form" >
<input type="text" id="inputEmail" name="username">
<input type="password" id="inputPassword" name="password">
<div id="MyDynamicDiv"></div>
<button id="signin" name="signin" type="submit">button</button>
</form>

<script>
$("#login_form").submit(function() {
             if ($("#login_form").valid()) {
                    $('.messagebox').slideUp('slow');
                    var data1 = $('#login_form').serialize();
                            $("button").button('loading');
                    $.ajax({
                        type: "POST",
                        url: "login/login.php",
                        data: data1,
                           dataType: 'json',
                        success: function(msg) {
if (msg.result == 12) {
$('#MyDynamicDiv').load('captcha.php');
}
if (msg.result == 1) {    
      $('.messagebox').addClass("success-message");
         $('.message').slideDown('slow');
            $('#alert-message').text("....");
                $('#login_form').fadeOut(5000);
                     window.location = "members.php"
                  } else { return false;}
</script>

我的captcha.php是

<input type="text" name="captcha_code">
<img id="captcha" src="/test/securimage/securimage_show.php">
<a href="#" id="captcha_link" onclick="document.getElementById('captcha').src = '/test/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image]</a>

还登录/ login.php包括

echo json_encode( array('result'=>12));

我可以调用captcha.php并显示在页面上但是,表单不适用于验证码输入。我应该以不同的方式打电话给我,我无法找到我应该做的事情。

编辑: 似乎captcha_code的输入值没有正确发送/发布。如果我使用嵌入登录表单的captcha.php代码,那么它的工作原理。 提前谢谢,

1 个答案:

答案 0 :(得分:0)

您的验证码输入似乎在<form>元素之外,因此当您serialize()表单时,它不会包含在POST数据中。在表单元素中移动输入。

你好像缺少一些右括号和括号。

由于异步性质,从成功函数执行return false不会做任何事情。相反,您应该从提交事件返回false,或者阻止默认。

使用注释更改更正代码(假设您已移动验证码输入):

$("#login_form").submit(function (e) { // capture event
    e.preventDefault(); // always prevent the form from submitting
    if ($("#login_form").valid()) {
        $('.messagebox').slideUp('slow');
        var data1 = $('#login_form').serialize();
        $("button").button('loading');
        $.ajax({
            type: "POST",
            url: "login/login.php",
            data: data1,
            dataType: 'json',
            success: function (msg) {
                if (msg.result == 12) {
                    $('#MyDynamicDiv').load('captcha.php');
                }
                if (msg.result == 1) {
                    $('.messagebox').addClass("success-message");
                    $('.message').slideDown('slow');
                    $('#alert-message').text("....");
                    $('#login_form').fadeOut(5000);
                    window.location = "members.php"
                }
            } // was missing
        }); // was missing
    } // was missing
}); // was missing

为了将来的调试,请记得检查控制台(F12)是否有错误,并缩进代码,因为它会使缺失的大括号更加明显。您可以使用JSFiddle的TidyUp功能自动缩进它。