Magento 2 - Send form data to Controller using AJAX and return Result to PHTML
Calculation Layout -
Vendor/Module/view/frontend/layout/module_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\Module\Block\Index" name="calculation_index" template="Vendor_Module::calculation.phtml" />
</referenceContainer>
</body>
</page>
Calculation Input PHTML -
Vendor/Module/view/frontend/templates/calculation.phtml
<div class="row clearfix">
<div class="col-md-12 column">
<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'],function(){
jQuery(document).ready(function() {
jQuery("#form_height").submit(function(){
var heightValue = jQuery("input[name='height']").val();
var weightValue = jQuery("input[name='weight']").val();
var url = "<?php echo $block->getBaseUrl().'module/result/result/' ?>";
jQuery.ajax({
url: url,
type: "POST",
data: {height:heightValue,weight:weightValue},
showLoader: true,
cache: false
success: function(response){
console.log(response.output);
}
});
return false;
});
});
});
</script>
Block -
Vendor/Module/Block/Index.php
<?php
namespace Vendor\Module\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/Module/Controller/Index/Index.php
<?php
namespace Vendor\Module\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/Module/Controller/Result/Result.php
<?php
namespace Vendor\Module\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()
{
$height = $this->getRequest()->getParam('height');
$weight = $this->getRequest()->getParam('weight');
$result = $this->resultJsonFactory->create();
$resultPage = $this->resultPageFactory->create();
$block = $resultPage->getLayout()
->createBlock('Vendor\Module\Block\Index')
->setTemplate('Vendor_Module::result.phtml')
->setData('height',$height)
->setData('weight',$weight)
->toHtml();
$result->setData(['output' => $block]);
return $result;
}
}
Result Layout File -
Vendor/Module/view/frontend/layout/module_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>Result</title>
</head>
<body>
<referenceContainer name="content">
<block class="Vendor\Module\Block\Index" name="result_result" template="Vendor_Module::result.phtml" />
</referenceContainer>
</body>
</page>
Result PHTML file -
Vendor/Module/view/frontend/templates/result.phtml
<?php
echo $block->getHeightData();
echo $block->getWeightData();
?>