Why is my JS code running in an apparent loop?

Question

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.

by runs infinitely, i mean the alert fires over and over and over. and no. $(function() is the same, shortcode — JM4
– JM4, Commented Sep 16, 2011 at 0:33
Can you set up a test page to demonstrate this? We need a bit more code I think. — Nick Brunt
– Nick Brunt, Commented Sep 16, 2011 at 0:41
@Nick - our team does not have the server for new site up and running yet so unfortunately no. I initially built a JS fiddle but obviously without ajax running it doesn't help too much. I'll see what I can do though. — JM4
– JM4, Commented Sep 16, 2011 at 0:42
You can mock up the AJAX request like this: $.ajax({url: "/echo/html/", type: "POST", data: {'html': 'OK'}, dataType: 'text/html',... — Nick Brunt
– Nick Brunt, Commented Sep 16, 2011 at 0:57
@Nick Brunt - running the URl with "/echo/html/" in jsfiddle is really throwing my machine off. I'm going to do a couple resets and cache clears and see if perhaps there are additional factors in play. — JM4
– JM4, Commented Sep 16, 2011 at 4:00

RSG · Accepted Answer · 2011-09-16 00:37:06Z

1

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.

answered Sep 16, 2011 at 0:37

RSG

7,1436 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JM4 Over a year ago

thank you for the suggestion but even if I remove the action (normally I add this onto the form itself (.attr) later, but for demo purposes showed more simply here.

Jonah · Accepted Answer · 2011-09-16 02:08:22Z

0

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.

answered Sep 16, 2011 at 2:08

Jonah

16.3k23 gold badges94 silver badges172 bronze badges

2 Comments

JM4 Over a year ago

the problem with this method is that my page has more than one form. It is my understanding that form.submit(); will trigger/conflict with both forms.

Jonah Over a year ago

i'm sure you could use the good old fashioned document.forms[0].submit() -- with the appropriate index of course -- to do it. The point is to avoid using the jquery wrapper around the form.

JM4 · Accepted Answer · 2011-09-19 23:39:07Z

0

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: *');

answered Sep 19, 2011 at 23:39

JM4

6,80819 gold badges80 silver badges130 bronze badges

Collectives™ on Stack Overflow

Why is my JS code running in an apparent loop?

JS

HTML

update

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS

HTML

update

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related