Magento – submit Form in Ajax

ajaxmagento-1.9

How to submit Form in Ajax in below it reload the page and display nextpage

Controller

public function ajaxcheckoutAction()
      {
          $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;
      }

Form

 <form class="my-form" name="myForm" id="myForm">

    <label><h1>Get started with our login flow</h1></label>
    <div class="email-enter-field">
        <input placeholder="Email Address" type="email" name="email" id= "email" class="input-text check_custom_login" required autocomplete="on"/> 
    </div>
    <a href="<?php echo $this->getUrl('customer/account/forgotpassword') ?>" class="f-left"><?php echo $this->__('Forgot your password?') ?></a>  
    <button class="button" name="submit"/> <span><span><?php echo $this->__('Submit') ?></span></span> </button>

</form>


<script type="text/javascript">
//<![CDATA[
    var formId = 'myForm';
    var myForm = new VarienForm(formId, true);
    var postUrl = '<?php echo $this->getUrl("ajax/index/ajaxcheckout") ?>';
    function doAjax() {
        if (myForm.validator.validate()) {
            new Ajax.Updater(
                { success:'formSuccess' }, postUrl, {
                    method:'post',
                    asynchronous:true,
                    evalScripts:false,
                    onComplete:function(request, json) {
                        Element.hide(formId);
                        Element.show('formSuccess');
                    },
                    onLoading:function(request, json){
                        Element.show('formLoader');
                    },
                    parameters: $(formId).serialize(true),
                }
            );
        }
    }

    new Event.observe(formId, 'submit', function(e){
        e.stop();
        doAjax();
    });
//]]>
</script>

If already register i need to show this form

<form action="<?php echo Mage::geturl('customer/account/loginPost/')?>" method="post" id="login-form" class="Custom_checkout">

</form>

else this form 

<form action="<?php echo Mage::geturl('customer/account/createpost/')?>" method="post" name="fom" id="form-validate">

</form>

How to achieve this

Best Answer

you should have to call onclick function on submit and put this ajax function in to it

like

 <input id="button" type="submit" value="Submit" name="submit" class="submit" onclick="return callAjax();">

then in javascript

<script type="text/javascript">

function callAjax() {

jQuery.ajax({
    type: "POST",
    url: "<?php echo Mage::getUrl('ajax/index/ajaxcheckout') ?>",
    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
    }
});

}
</script>

Edit

we forget in new code 

<button class="button" name="submit" type="submit"/>

i am sure it will work for you.

Related Topic