0

I am working on a simple custom module, where user can input height and the weight/BMI will be shown as output on form submit. The page where user enters input is Calculation Page while output is shown on Result Page.On clicking the submit button user will be redirected to different controller/action. Below is the code

Calculation Layout - Vendor/Module/view/frontend/layout/calculator_index_index.xml

     <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

        <head>
            <title>Calculator</title>
        </head> 

        <body>
            <referenceContainer name="content">
                <block class="Vendor\Calculator\Block\Index" name="calculation_index" template="Vendor_Calculator::calculation.phtml" />
            </referenceContainer>
        </body>
    </page>

Calculation Input PHTML -Vendor/Calculator/view/frontend/templates/calculation.phtml

    <div class="row clearfix">
        <div class="col-md-12 column">
            <?php echo $block->getBaseUrl(); ?>
            <form name="form_height" method="POST" id="form_height">
                <input type="text" name="height" class="form-control input-md">
                <input type="text" name="weight" class="form-control input-md">
                <input type="submit" id="calculateTotalSubmit"  name="calculate-total-submit" value="Calculate Total">
                </div> 
            </form>
        </div>
    </div>


    <script>
        require(['jquery', 'jquery/ui'], function ($) {
            $(document).ready(function ($) {


                $("#form_height").submit(function () {
                    var heightValue = $("input[name='height']").val();
                    var weightValue = $("input[name='weight']").val();
                    var url = "<?php echo $block->getBaseUrl() . 'calculator/result/result/'  ?>";


                    $.ajax({
                       url : url,
                       type : 'POST',
                       //dataType:'json',
                       data: {height:heightValue,weight:weightValue},                   
                       success : function(data) {              
                           alert('Data: '+data);
                       },
                       error : function(request,error)
                       {
                           alert("Error");
                       }
                   });



                });
            });
        });     
    </script>

Block - Vendor/Caculator/Block/Index.php

    namespace Vendor\Calculator\Block;

    use \Magento\Framework\View\Element\Template;
    use \Magento\Framework\View\Element\Template\Context;

    class Index extends Template
    {

        public function __construct(Context $context,      
            \Magento\Store\Model\StoreManagerInterface $storeManager
        )
        {        
            $this->_storeManager = $storeManager;
            parent::__construct($context);
        }

        public function getBaseUrl()
        {
            return $this->_storeManager->getStore()->getBaseUrl();
        }

        public function getHeightData()
        {
            return $this->getHeight();
        }

        public function getWeightData()
        {
            return $this->getWeight();
        }
    }

Calculation Controller - Vendor/Calculator/Controller/Index/Index.php

    namespace Vendor\Calculator\Controller\Index;

    use \Magento\Framework\App\Action\Action;
    use \Magento\Framework\App\Action\Context;
    use \Magento\Framework\View\Result\PageFactory;


    class Index extends Action
    {

        /**
        * @var PageFactory
        */
        protected $resultPageFactory;


        /**
        * Result constructor.
        * @param Context $context
        * @param PageFactory $pageFactory
        */
        public function __construct(Context $context, PageFactory $pageFactory)
        {
            $this->resultPageFactory = $pageFactory;
            parent::__construct($context);
        }


        /**
        * The controller action
        *
        * @return \Magento\Framework\View\Result\Page
        */
        public function execute()
        {
            $resultPage = $this->resultPageFactory->create();
            return $resultPage;
        }
    }

Result Page Controller - Vendor/Calculator/Controller/Result/Result.php

    <?php

    namespace Vendor\Calculator\Controller\Result;

    use Magento\Framework\App\Action\Context;
    use Magento\Framework\View\Result\PageFactory;
    use Magento\Framework\Controller\Result\JsonFactory;

    class Result extends \Magento\Framework\App\Action\Action
    {

         /**
         * @var Magento\Framework\View\Result\PageFactory
         */
        protected $resultPageFactory;

        protected $resultJsonFactory; 

        /**
         * @param Context     $context
         * @param PageFactory $resultPageFactory
         */
        public function __construct(
            Context $context,
            PageFactory $resultPageFactory,
            JsonFactory $resultJsonFactory
            )
        {

            $this->resultPageFactory = $resultPageFactory;
            $this->resultJsonFactory = $resultJsonFactory; 
            return parent::__construct($context);
        }


        public function execute()
        {
             $query=$this->getRequest()->getPost('height');
             echo '<pre>';
             print_r($query);
             echo '<pre>';

             exit();

            $height = $this->getRequest()->getParam('height');
            $weight = $this->getRequest()->getParam('weight');
            $result = $this->resultJsonFactory->create();
            $resultPage = $this->resultPageFactory->create();

            $block = $resultPage->getLayout()
                    ->createBlock('Vendor\Calculator\Block\Index')
                    ->setTemplate('Vendor_Calculator::result.phtml')
                    ->setData('height',$height)
                    ->setData('weight',$weight)
                    ->toHtml();

            $result->setData(['output' => $block]);
            return $result;
        } 
    }

Result Layout File - Vendor/Calculator/view/frontend/layout/calculator_result_result.xml

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

        <head>
            <title>Calculator</title>
        </head> 

        <body>
            <referenceContainer name="content">
                <block class="Vendor\Calculator\Block\Index" name="result_result" template="Vendor_Calculator::result.phtml" />
            </referenceContainer>
        </body>
    </page>

Result PHTML file - Vendor/calculator/view/frontend/templates/result.phtml

 <?php 

  echo $block->getAjaxData();

 ?>




The workflow - user comes on calculation.phtml page > enters input > call result ctrl via ajax on button submit > process data in result ctrl > show the data in updated result.html with page reload.

While trying to call controller action using AJAX, it is not working. How do I call and pass data to controller via AJAX ?
How do I return data from controller in JSON format and send it back to result.phtml file in order to show the output ?

Your Answer

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

Browse other questions tagged or ask your own question.