Search code examples
javascriptjqueryajaxfacebox

Facebox login form loading my entire index page


I'm not good with javascript. I'm using a facebox login form based on this tutorial:

http://freecss.info/css-tutorials/jquery-ajax-contact-form-in-facebox/

Error handling works fine. Problem = If there are no errors, my header("location: index.php") loads in the facebox.

How do I close the facebox and reload the page?


Solution

  • You need to change the behavior of the responses so that you can control when to show errors on success and when to redirect, check these changes:
    sendemail.php:

    <?php
    
    /************************
    * Variables you can change
    *************************/
    
    $mailto = "mikkaclarke@hotmail.com";
    $cc = "";
    $bcc = "";
    $subject = "Email subject";
    $vname = "BrightCherry enquiry";
    
    
    /************************
    * do not modify anything below unless you know PHP/HTML/XHTML
    *************************/
    
    
    $email = $_POST['email'];
    $resp['error'] = FALSE; // by default there are no errors
    
    function validateEmail($email)
    {
       if(eregi('^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}(\.[a-zA-Z]{2,3})?(\.[a-zA-Z]{2,3})?$', $email))
          return true;
       else
          return false;
    }
    
    
    if((strlen($_POST['name']) < 1 ) || (strlen($email) < 1 ) || (strlen($_POST['message']) < 1 ) || validateEmail($email) == FALSE){
        $resp['error'] = TRUE;
        $emailerror .= 'Error:';
    
        if(strlen($_POST['name']) < 1 ){
            $emailerror .= '<li>Enter name</li>';
        }
    
        if(strlen($email) < 1 ){
            $emailerror .= '<li>Enter email</li>';
        }
    
        if(validateEmail($email) == FALSE) {
            $emailerror .= '<li>Enter valid email</li>';
        }
    
        if(strlen($_POST['message']) < 1 ){
            $emailerror .= '<li>Enter message</li>';
        }
        $err = "<div id='emailerror'><ul>$emailerror</ul></div>";
        $resp['error_msg'] = $err;
    } else {
        $emailerror .= "<span>Your email has been sent successfully!</span>";
    
    
    
        // NOW SEND THE ENQUIRY
    
        $timestamp = date("F j, Y, g:ia");
    
        $messageproper ="\n\n" .
            "Name: " .
            ucwords($_POST['name']) .
            "\n" .
            "Email: " .
            ucwords($email) .
            "\n" .
            "Comments: " .
            $_POST['message'] .
            "\n" .
            "\n\n" ;
    
            $messageproper = trim(stripslashes($messageproper));
            mail($mailto, $subject, $messageproper, "From: \"$vname\" <".$_POST['e_mail'].">\nReply-To: \"".ucwords($_POST['first_name'])."\" <".$_POST['e_mail'].">\nX-Mailer: PHP/" . phpversion() );
    
    }
    echo json_encode($resp);
    ?>
    

    And your ajaxForm in your contact and index (i don't know why you need it there):

    $('#submitform').ajaxForm({
        dataType: 'json',
        success: function(resp) {
            if(resp.error)
                $('#error').html(resp.error_msg).fadeIn('slow');
            else
                window.location = 'index.php';
        }
    });
    

    What I've done is the following:

    1. Validate the form and echo the results as json
    2. if there are errors, set the error flag and the error message
    3. else just pass the error flag set to false
    4. in your success method, if you the error flag is set to true then display errors
    5. else redirect!