0

Magento AJAX form does not post any data. Also does not show any error / success message.

I used form in Popup

In Console it shows 302 Found

My form

<div style="display:none">

    <div id="myDivID">
        <div class="popup-wrap">
        <div class="popup-txt-01"><img src="<?php echo $this->getSkinUrl('images/proxelle/txt_1.png');?>"></div>
        <div class="popup-txt-02"><img src="<?php echo $this->getSkinUrl('images/proxelle/txt_2.png');?>"></div>
          <form class="my-form" name="myForm" id="proxelle">
            <input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>" />
            <input type="text" name="fname" id="only-text" placeholder="Enter Your Name Here" required="true" autocomplete="off"/>
            <input type="email" name="email" placeholder="Enter Your Email Id Here" required="true" autocomplete="off"/>
            <input type="submit" name="Go">
            <div class="popup-txt-03"><img src="<?php echo $this->getSkinUrl('images/proxelle/txt_3.png');?>"></div>
            <span id="formLoader" style="display:none;">Loss</span>
        </form>
        <div id="formSuccess" style="display:none;">Super</div>
    </div>
    </div>

</div>

Ajax Script

<script type="text/javascript">
//<![CDATA[
    var formId = 'proxelle';
    var myForm = new VarienForm(formId, true);
    var postUrl = '<?php echo $this->getUrl('proxelle/index/addme') ?>';

    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>

Popup Script

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("a#fancyBoxLink").fancybox({
        'href'   : '#myDivID',
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'openEffect'    : 'elastic',
        'closeEffect'   : 'elastic',
        'maxWidth'  : 800,
        'maxHeight' : 600,
        'fitToView' : false,
        'width'     : '70%',
        'height'        : '70%',
        'autoSize'  : false,
        'closeClick'    : false
    });

    $("#only-text").on('keyup', function(e) {
    var val = $(this).val();
   if (val.match(/[^a-zA-Z]/g)) {
       $(this).val(val.replace(/[^a-zA-Z]/g,' '));
   }
});
     });
</script>
  • Any console error are display? Have you checked your controller action are working? – Rakesh Jesadiya Nov 4 '16 at 7:03
  • it shows 302 not post any data if i use without ajax it's working fine – Magento 2 Nov 4 '16 at 7:04
0

I had the same problem. I solved mine like this

var data =  jQuery(".fancybox-skin #proxelle").serialize(true);

then in parameters

 parameters: data,

Since fancy box creates a copy of your form, the ids are also duplicated... just get the one inside fancybox

0
  <div style="display:none">

      <div id="myDivID">
          <div class="popup-wrap">
          <div class="popup-txt-01"><img src="<?php echo $this->getSkinUrl('images/proxelle/txt_1.png');?>"></div>
          <div class="popup-txt-02"><img src="<?php echo $this->getSkinUrl('images/proxelle/txt_2.png');?>"></div>
          <form id="proxelle" method="post" action="javascript:submitForm();">
              <input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>" />
              <input type="text" name="fname" id="fname" placeholder="Enter Your Name Here" class="required-entry" autocomplete="off"/>
              <input type="email" name="email" id='email' placeholder="Enter Your Email Id Here"  class="required-entry" autocomplete="off"/>
              <input type="submit"  title="<?php echo $this->__('Submit') ?>" >
              <div class="popup-txt-03"><img src="<?php echo $this->getSkinUrl('images/proxelle/txt_3.png');?>"></div>
              <span id="formLoader" style="display:none;">Loss</span>
          </form>
          <div id="formSuccess" style="display:none;">Super</div>
      </div>
      </div>

  </div>
  <script type="text/javascript">
     //<![CDATA[
       function submitForm() {
       var url = '<?php echo $this->getUrl('proxelle/index/addme') ?>';

       var formData = new VarienForm('proxelle', true);
       var parameters = {
         fname: jQuery('input[name=fname]').val(),
         email: escape(jQuery('input[name=email]').val()),
         formkey: escape(jQuery('input[name=form_key]').val()),
        };
       $('formLoader').show();
       var request = new Ajax.Request(
         url,
         {
           method: 'post',
           onSuccess: function (transport) {
             var data = transport.responseText.evalJSON();
             if (data.error) {
                 $('formLoader').hide();
                 alert('Submit Error');
             }
             else {
                   $('formLoader').hide();
                   $('proxelle').hide();
                   $('formSuccess').show();
             }
           },
           parameters: parameters,
         }
       );
       }
       //]]>

  </script>

Please try this code

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.