input form does not work when call it from jquery ajax

Question

Sorry but i am totally newbie for ajax and jQuery if i am asking ridiculous question.

Basically i've a form like below;

<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>

and my captcha.php is

<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>

also login/login.php includes

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

I am ok to call captcha.php and show up on the page however, form does not work for captcha input. Should i call it in different way that i could not find out anywhere what i should do exactly.

Edit: it seems input value of captcha_code does not send/post correctly. If i use the captcha.php code embedded into login form, than it works. Thanks in advance,

Answer 1

It appears your captcha input is outside of the <form> element, therefore it will not be included in the POST data when you serialize() the form. Move the input inside the form element.

You seem to be missing some closing parenthesis and braces.

Doing return false from the success function does nothing because of the async nature. Instead you should return false from the submit event, or prevent default.

Corrected code with commented changes (assuming you've moved the captcha input):

$("#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

For future debugging, remember to check the console (F12) for errors, and indent your code because it makes missing braces more obvious. You can use the TidyUp feature of JSFiddle to auto indent it.