Endless loop error in php and jQuery contact form

Question

Arrg.

I can't spot the endless loop in this contact form. The "thanks" div endlessly prints after the form submission. What am I missing? Is the error php or also jQuery? (In the working file, the JS is included via <script type="text/javascript" src="contact.js"></script>)

Thanks

<?php 
if(isset($_POST['submitted'])) {
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {

if(trim($_POST['email']) === '')  {
$emailError = 'Please enter a valid email address';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'That\'s not a valid email address';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
}

if(!isset($hasError)) {

$emailTo = 'to email';
$subject = 'site email';
$body = "$email";
$headers = 'From: webmail';
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>


<script type="text/javascript">

$(document).ready(function() {
    $('form#contactForm').submit(function() {
        $('form#contactForm .error').remove();
        var hasError = false;
        $('.requiredField').each(function() {
            if($(this).hasClass('email')) {
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if(!emailReg.test(jQuery.trim($(this).val()))) {
                    var labelText = $(this).prev('label').text();
                    $(this).parent().append('<span class="error">&nbsp;&nbsp;<i>invalid email</i></span>');

                    hasError = true;
                }
            }
        });
        if(!hasError) {
            $('#thanks').fadeOut('normal', function() {
$(this).parent().append('<img src="../loading-small.gif" alt="Loading&hellip;" height="31" width="31" />');

            });
            var formInput = $(this).serialize();
            $.post($(this).attr('action'),formInput, function(data){
                $('form#contactForm').slideUp("fast", function() {                 
                    $(this).before('<p class="thanks">&nbsp;<strong>Thanks!</strong>');
                    $(".thanks").delay(3000).fadeOut();
                });
            });
        }

        return false;

    });
});

</script>


<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks"></div>

<?php } else { ?>

<form action="http://mysite.com" id="contactForm" method="post">

Sign up for email notification <input type="text" name="email" size="30" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />

<?php if($emailError != '') { ?><span class="error"><?=$emailError;?></span><?php } ?>

<input type="hidden" name="submitted" id="submitted" value="true" />
<button type="submit">Send</form>

<?php } ?>

Answer 1

It looks like you're trying to both add an element (<p class="thanks") while having an existing element (the div). Can you narrow down which one? Also you have $("#thanks").fadeOut but don't seem to have any element with an id of thanks.

I would suggest going through the code a bit more carefully. I don't see an endless loop, but if for some reason the function is repeatedly being triggered then that would present the same symptoms.

Answer 2

I made some changes to your code and got it to work on my local machine see if this one works for you

 <?php 
 if(isset($_POST['submitted'])) {
    if(trim($_POST['checking']) !== '') {
        $captchaError = true;
    }else{
        if(trim($_POST['email']) === '')  {
            $emailError = 'Please enter a valid email address';
            $hasError = true;
        } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
            $emailError = 'That\'s not a valid email address';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }
    }

    if(!isset($hasError)) {
        $emailTo = 'to email';
        $subject = 'site email';
        $body = "$email";
        $headers = 'From: webmail';
        mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
 } 
 ?>
 <html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('form#contactForm').submit(function() {
                $('.error').remove(); //remove the existing error messages before we submit
                var hasError = false;
                //lets go through all the required feilds
                $('.requiredField').each(function() {
                    //check to see if we are processing email
                    if($(this).hasClass('email')) {
                        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                        if(!emailReg.test(jQuery.trim($(this).val()))) {
                           // var labelText = $(this).prev('label').text(); //this line seem useless
                            $(this).parent().append('<span class="error">&nbsp;&nbsp;<i>invalid email</i></span>'); // supply eror message
                            hasError = true; 
                        }
                    }
                });
                if(!hasError) {
                    $('#thanks').fadeOut('normal', function() {
                        $(this).parent().append('<img src="../loading-small.gif" alt="Loading&hellip;" height="31" width="31" />');
                    });
                    var formInput = $(this).serialize();
                    $.post($(this).attr('action'),formInput, function(data){
                        $('form#contactForm').slideUp("fast", function() {                 
                            $(this).before('<p class="thanks">&nbsp;<strong>Thanks!</strong>');
                            $(".thanks").delay(3000).fadeOut();
                        });
                    });
                }
                return false;
            });
        });

    </script>
 </head>
 <body>



 <?php if(isset($emailSent) && $emailSent == true) { ?>

 <div class="thanks"></div>

 <?php } else { ?>

 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactForm" method="post">

 Sign up for email notification <input type="text" name="email" size="30" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />

 <?php if($emailError != '') { ?><span class="error"><?=$emailError;?></span><?php } ?>

 <input type="hidden" name="submitted" id="submitted" value="true" />
 <button type="submit">Send</form>

 <?php } ?>
    </body>
 </html>