1

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

0

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.

  • No it's not working – Magento 2 Apr 21 '16 at 10:42
  • Check my updated question – Magento 2 Apr 21 '16 at 10:53
  • check my updated code – liyakat Apr 21 '16 at 11:06
  • Check my updated question – Magento 2 Apr 21 '16 at 11:15
0

Please check below code i'm using many ajax form with validation in my website magento 1.9.2 using this code for submit form with ajax.

<div id="contact_results"></div>        
                <form id="requestform" name="requestform" action="your_email.php" class="col-xs-12" method="post">
                    <div class="form-wrapper">
                        <div class="col-xs-12">
                            <div class="field">
                                <label class="formlabel"> Full Name </label> 
                                <input class="textfield"  data-required="true" type="text" name="fname" id="fname" placeholder="enter your name" />
                            </div>
                            <div class="field">
                                <label class="formlabel"> Email </label> 
                                <input class="textfield"  data-required="true" type="email" name="email" placeholder="enter email address" />
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="col-xs-12">                 
                            <div class="field">
                                <label class="formlabel" for="mobile"> Phone </label>
                                <input class="phone"  data-required="true" name="phone" type="tel" pattern="[0-9]*" id="mobile" placeholder="enter phone number">
                                <input id="hidden" type="hidden" name="full_phone">
                            </div>
                            <div class="field">
                                <label class="formlabel"> Message </label>
                                <textarea class="textfield textarea" type="textarea" placeholder="enter your message"  data-required="true" name="details"/></textarea >
                            </div>
                            <div class="clear"></div>
                        </div>

                        <div class="col-xs-12">                 
                            <div class="field emailfunc">
                                <label class="formlabel"> What can we help you with ? </label>                      
                                <span>
                                    <input name="interested" id="logistics" value="logistics" onchange="" type="radio">
                                    <label class="inline" >Logistics</label>
                                </span>
                                <span>
                                    <input name="interested" id="sales" value="sales" onchange="" type="radio">
                                    <label class="inline" >Sales</label>
                                </span>
                                <span>
                                    <input name="interested" id="customer" value="customer" onchange="" type="radio">
                                    <label class="inline" >Customer Care</label>
                                </span>
                            </div>

                            <div class="field">
                                <input class="submit" type="submit" value="<?php echo Mage::helper('contacts')->__('Submit') ?>" name="submit">
                            </div>                      
                            <div class="clear"></div>
                        </div>
                    </div>      
                    <div class="clear"></div>
                </form> 



<script type="text/javascript">
jQuery(document).ready(function(){   

var border_color = "#C2C2C2"; //initial input border color    
jQuery("#requestform").submit(function(e){
    e.preventDefault(); //prevent default action 
    proceed = true; //set proceed flat to true

    //simple input validation
    jQuery(jQuery(this).find("input[data-required=true], textarea[data-required=true]")).each(function(){
            if(!jQuery.trim(jQuery(this).val())){ //if this field is empty 
                jQuery(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag
            }
            //check invalid email
            /*var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?jQuery/; 
            if(jQuery(this).attr("type")=="email" && !email_reg.test(jQuery.trim(jQuery(this).val()))){
                jQuery(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag              
            } */  
    }).on("input", function(){ //change border color to original
         jQuery(this).css('border-color', border_color);
    });

    //if everything's ok, continue with Ajax form submit
    if(proceed){ 
        var post_url = jQuery(this).attr("action"); //get form action url
        var request_method = jQuery(this).attr("method"); //get form GET/POST method
        var form_data = new FormData(this); //constructs key/value pairs representing fields and values

        jQuery.ajax({ //ajax form submit
            url : post_url,
            type: request_method,
            data : form_data,
            dataType : "json",
            contentType: false,
            cache: false,
            processData:false
        }).done(function(res){ //fetch server "json" messages when done
            if(res.type == "error"){
                jQuery("#contact_results").html('<div class="error">'+ res.text +"</div>");
            }

            if(res.type == "done"){
                jQuery("#contact_results").html('<div class="success">'+ res.text +"</div>").show().delay(3000).fadeOut(400);
                jQuery( '#requestform' ).each(function(){
                    this.reset(1500);
                });
            }
        });
    }           
});
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.