Why is my JS code running in an apparent loop?

I have the following code:

JS

<script type="text/javascript">
$(function(){      
  $('#fgotpwfield').hide();        

  $('#login_submit').click(function() {
    $('#form_result').fadeOut('fast');
    $('#myccrxlogin input').removeAttr('disabled');
    $('#myccrxlogin').submit();
  });

  if ($("#myccrxlogin").length > 0) {
    $("#myccrxlogin").validate({
        rules: {
            email: { required: true, email: true },
            password: 'required'
        },
        messages: {
            email: { required: 'Your email address is required.',
            email: 'Please enter a valid email address.'},
            password: 'Your password is required.'
        },
        submitHandler: function(form) {
            $('#myccrxlogin input').attr('disabled','true');
            $('#login_submit').fadeOut('fast');
            $('#forgotpw').fadeOut('fast');
 开发者_如何学编程           $('body').append('<div id="page_load"></div>');

            var email = $("#email").val();
            var pw = $("#password").val();
            var data = 'email=' + email + '&password=' + pw;

            $.ajax({
                url: "hidden url",
                type: "POST",
                data: data,
                cache: false,
                success: function (html) {
                    $('#page_load').remove();

                    if(html == 'OK') {
                        alert(html);
                    } else {
                        //$("#password").val('');
                        $("#form_result").html(html);
                        $('#form_result').fadeIn('slow');
                        $('#myccrxlogin input').removeAttr('disabled');
                        $('#login_submit').fadeIn('slow');
                        $('#forgotpw').fadeIn('slow');
                    }
                }
            });
        } /*close submit handler */
    });
  };
});
</script>

HTML

<div id="form_result" style="margin:10px; display:none;" class="field-submit-error"></div><div style="clear:both;"></div>
        <div id="loginformfield">
        <p style="font-size:24px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#f93;">Login</p>
        <form class="loginform" id="myccrxlogin" method="post" target="_parent">            
                <p>
                <input name="email" type="text"  id="email" tabindex="1" />
                <label for="email">E-mail</label></p>

                <p><input name="password" type="password" class="text large required" id="password" tabindex="2" />
                <label for="password">Password</label></p>

                <div class="loading"></div>
                <p><a href="#" id="forgotpw">I forgot my password</a></p>
                <p><a class="readmore" href="#" id="login_submit" style="margin-bottom:0.5em;" tabindex="3">Login!</a></p>
        </form>
        </div>

A person enters their email and password, the file is first validated then run through an ajax call successfully. The ajax PHP page echo's either an error or 'OK'. I know the code gets to 'OK' because the alert(html) is triggered but it runs infinitely. Not sure why?

update

I believe I might be running into the recursion issue described here: http://docs.jquery.com/Plugins/Validation#General_Guidelines although I am not sure it applies.

I can't step through, but I believe you need to have your submithandler return false.

I believe the form is being submitted by the form action and the ajax submission.

Looking at the recursion link you posted, you would need to change this line:

$('#myccrxlogin').submit();

so that the raw form is being submitted, rather than the jquery-ized version of the form. In their example,

$(form).submit();

becomes

form.submit();

Try changing your submit line in a similar way.

The amazingly unclear and wild answer is this: I had to add the following into my ajaxed-PHP page. Something about running locally or with the setup I have is wacky. Hopefully this helps somebody.

Add to the first line of your ajax php page:

header('Access-Control-Allow-Origin: *');