Magento check if customer already exists by email with jQuery

Question

I am trying to avoid offline people from entering an email on the firecheckout page that is already registered as customer. Therefor I created this sample php script in one of my development controllers:

public function mailExists(Varien_Object $customer, $mail, $websiteId)
{
    if($websiteId){
        $customer->setWebsiteId($websiteId);
    }
    $customer->loadByEmail($mail);
    if($customer->getId()){
        return $customer->getId();
    }
    return FALSE;
}

public function formAction()
{
    $customer = Mage::getModel('customer/customer');
    $websiteId = Mage::app()->getWebsite()->getId();
    $email = $_POST['email'];
    if($this->mailExists($customer, $email, $websiteId))
    {
        echo 'mail <u>'.$email.'</u> exists containing customer id '.$this->mailExists($customer, $email, $websiteId);
    }
    else{
        $this->_formPost();
    }
}

public function _formPost()
{
    echo "<form enctype='multipart/form-data' action='".Mage::getUrl('index/form/')."' method='post'>";
    echo "<input type='text' value='shane.test@hotmail.com' id='email' name='email' />";
    echo "<input type='submit' value='verzend' />";
    echo "</form>";
}

which works perfectly fine. But my concern is the fact that when someone entered all fields on the checkout page and presses the submit button, all the entered data gets set to empty. Which will cause frustration to my customers. So I thought a jQuery script will be better to notify the offline customers to not use an already registered email or either to login on their account when they enter an email address in the email address input field.

I would like to make my jQuery script run on user's entered text on the email input field. I only came up with this:

public function testAction()
{
    echo("
            <script src='http://code.jquery.com/jquery-latest.js'></script>
            <script type='text/javascript'>
            $(document).ready(function()
            { 
                $('#email').onChange(function()
                {
                    alert('input');
                });
            });
            </script>
        ");
    $this->_testPost();
}

public function _testPost()
{
    echo "<form name='test' enctype='multipart/form-data' action='".Mage::getUrl('index/form/')."' method='post'>";
    echo "<input type='text' value='' id='email' name='email' />";
    echo "<input type='submit' value='verzend' />";
    echo "</form>";
}

This prints input on the alert box. How would I implement my php check in jQuery? Thanks in advance, Shane

Answer 1

You don't need ajax. If the user login in the onepage checkout the page is reloaded, so a simple javascript in a template should work. you can do your check directly on page load and only add the javascript if needed.
for example:

<?php if({your check for the email}):?>
<script type='text/javascript'>
    $(document).ready(function()
    { 
        $('#email').onChange(function()
        {
            alert('input');
        });
    });
</script>
<?php endif;?>

or in case you want to use prototype instead of jquery:

<?php if({your check for the email}):?>
<script type='text/javascript'>
    $(document).observe('dom:loaded', function(){         
        $('#email').observe('change', function(){            
            alert('input');
        });
    });
</script>
<?php endif;?>

Answer 2

What I would do use an jQuery AJAX call to call your controller function which I would rewrite to be more like the following:

public function ajaxAction()
{
    $customer = Mage::getModel('customer/customer');
    $websiteId = Mage::app()->getWebsite()->getId();

    if (array_key_exists('email', $_POST)) {
        $email = $_POST['email'];
    } else {
        $this->getResponse()->setBody(false);
        return;
    }
    if ($websiteId) {
        $customer->setWebsiteId($websiteId);
    }
    $customer->loadByEmail($email);
    if ($customer->getId()) {
        $this->getResponse()->setBody(true);
        return;
    }
    $this->getResponse()->setBody(false);
    return;
}

So really you want to move all your javascript out of your controller and into your view, then use the jQuery.ajax method to do something like:

    var mail = 'a@a.com';
jQuery.ajax({
    type: "POST",
    url: "<?php echo Mage::getUrl('your/frontend/ajax') ?>",
    dataType: "json",
    data: {email: mail},
    success: function (exists) {
        if (exists == 0) {
            // js for fail, hide disable button etc etc
        } else if (exists == 1) {
            // js for success bits
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
                   // error handling
    }
});

The beauty with AJAX is you can fire checks when you want, so you can listen for the email to be complete and fire the request as soon as they have entered their details.