Magento Ajax Form Submit – Fix Redirect to Controller Issue

ajaxform-validationformsrouter

I'm working on a newsletter signup form (following this tutorial). When I hit the signup button Magento redirects me to the "form action url" and displays the response on a white page only:

{"message":"
Thanks for signing up!
"}

I have no idea what is causing the issue.

My controller

class MyModule_Signupx_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout(array('default'));
        $this->renderLayout();
    }

    public function signupxAction()
    {
        $response = array();
        $response['message']="TEST";
        $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
    }
}

Javascript in template

<script type="text/javascript">
    //< ![CDATA[
    var customForm = new VarienForm('form-signupx');

        jQuery('#signupx').click(function (){
            var data = jQuery('#form-signupx').serialize();
            var url= "<?php echo $formActionUrl; ?>";
            console.log(data);
            if(customForm.validator.validate()){
                console.log("This does show up, just before the redirect happens");
                jQuery.ajax({
                          url: url,
                          dataType: 'json',
                          type : 'post',
                          data: data,
                          success: function(data){
                                console.log("This does not show up in console");
                          }
                    });
        }
    //]]>
</script>

config.xml

<frontend>
    <routers>
        <signupx>
            <use>standard</use>
                <args>
                    <module>MyModule_Signupx</module>
                    <frontName>signupx</frontName>
                </args>
        </signupx>
    </routers>

Thank you so much in advance!

Best Answer

I do not know your form but please make sure you submit the form with a button from type button and not submitting it by an input field:

<button id="xyz" title="Sign up" type="button"><span><span>Sign up</span></span></button>

Input won't work

Related Solutions

Dynamic Form Submission with Ajax

EDIT: I managed to do it. Here is the solution if it can help :

First the .phtml form:

<form id="form-configurator" class="form-configurator " name="formconfigurator" action="" method="post" enctype="multipart/form-data">

    <div class="item" id="item-1">
        <label class="conf_label">BlaBla</label>
        <div class="inputselect">
            <select class="selector" name="name1" id="input-1"><option value="2" selected="selected">2</option><option value="4">4</option></select>    
        </div>
    </div>

    <div class="item" id="item-2">
        <label class="conf_label">Quantity :</label>
        <div class="inputselect">
            <input id="input-quantity" name="quantity" type="number" value="1" min="1" max="50" style="width: 63px;" maxlength="2" class="input-text required-entry"></input>
        </div>
    </div>

    <strong><span class="devis_Nb" id="Devis_totalF"></span></strong>
</form>

Th JS/ajax script (which send data to php controller and treat the answer):

<script type="text/javascript">
//<![CDATA[
(function($) {

  function doAjax() {
    $.ajax({
        url : "<?php echo Mage::getBaseUrl().'mymodule/index/mymethode' ?>",
        type: "POST",
        data : $("#form-configurator").serializeArray(),
        dataType: 'json',
        success: function(data)
        {
            console.log(data);    
            $("#Devis_totalF").html(data['total_price']);

        },
        error: function ()
        {
        }
    });
  }

// for number type input scan
$('input[type=number]').change(function() {
       doAjax();
    }
  });

// for selectinput scan
$("select").change(function() {
    doAjax();
  });

  //To run script at page load
  doAjax();

})(jQuery);
//]]>
</script>

and the controller.php file:

<?php
class Mine_mymodule_IndexController extends Mage_Core_Controller_Front_Action
{
   public function indexAction()
   {
        $this->loadLayout();
        $this->renderLayout();
   }

   public function mymethodeAction()
   {
    //if ($post = $this->getRequest()->getPost()) {

    $output = array();

    $output = array('total_price' => 10);

    echo json_encode($output);

    }

}
?>

Magento Admin – Running AJAX Script from Admin Area

Looks like your admin route declaration is incorrect. Try this:

<admin>
    <routers>
        <adminhtml>
            <args>
                <modules>
                    <TwilitGrotto_AutoCustomerLookup after="Mage_Adminhtml">TwilitGrotto_AutoCustomerLookup</TwilitGrotto_AutoCustomerLookup>
                </modules>
            </args>
        </adminhtml>
    </routers>
</admin>

Here is a good article on the topic: Magento Admin Hello World Revisited

EDIT:

I'm posting a working solution below:

File: TwilitGrotto\AutoCustomerLookup\etc\adminhtml.xml

<?xml version="1.0"?>
<config>
    <acl>
        <resources>
            <admin>
                <children>
                    <sales>
                        <children>
                            <twilitgrotto_autocustomerlookup translate="title" module="twilitgrotto_autocustomerlookup">
                                <title>Auto Customer Lookup</title>
                            </twilitgrotto_autocustomerlookup>
                        </children>
                    </sales>
                </children>
            </admin>
        </resources>
    </acl>
</config>

File: TwilitGrotto\AutoCustomerLookup\etc\config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <TwilitGrotto_AutoCustomerLookup>
            <version>1.0.0.0</version>
        </TwilitGrotto_AutoCustomerLookup>
    </modules>
    <global>
        <helpers>
            <twilitgrotto_autocustomerlookup>
                <class>TwilitGrotto_AutoCustomerLookup_Helper</class>
            </twilitgrotto_autocustomerlookup>
        </helpers>
    </global>
    <adminhtml>
        <layout>
            <updates>
                <twilitgrotto>
                    <file>twilitgrotto_autocustomerlookup_layout.xml</file>
                </twilitgrotto>
            </updates>
        </layout>
    </adminhtml>
    <admin>
        <routers>
            <adminhtml>
                <args>
                    <modules>
                        <TwilitGrotto_AutoCustomerLookup after="Mage_Adminhtml">TwilitGrotto_AutoCustomerLookup_Adminhtml</TwilitGrotto_AutoCustomerLookup>
                    </modules>
                </args>
            </adminhtml>
        </routers>
    </admin>
</config>

File: TwilitGrotto\AutoCustomerLookup\controllers\Adminhtml\Autocustomerlookup\AddressController.php

<?php

class TwilitGrotto_AutoCustomerLookup_Adminhtml_Autocustomerlookup_AddressController
    extends Mage_Adminhtml_Controller_Action
{
    public function checkEmailExistsAction()
    {
        $emailAddress = $this->getRequest()->getParam('emailAddress');
        $result = Mage::helper('twilitgrotto_autocustomerlookup')->checkEmailExists($emailAddress);
        $this->getResponse()->setBody($result);
    }

    protected function _isAllowed()
    {
        return Mage::getSingleton('admin/session')->isAllowed('sales/twilitgrotto_autocustomerlookup');
    }
}

Controller URL: Mage::getUrl('adminhtml/autocustomerlookup_address/checkEmailExists');

Best Answer

Related Solutions

Dynamic Form Submission with Ajax

Magento Admin – Running AJAX Script from Admin Area

Related Topic