Magento – How to make a form and submit datas using popup modal in magento2 admingridmagento2modal-popup When a user clicks the open modal button the popup modal opened correctly. I want a form in a modal and save the data into the database. please, anyone gives the solution. Best Answer Form in form.phtml <div id="myModel"> <form action="<?php echo $block->getBaseUrl().'your path to controller';?>" method="post" id="form_validate contact-form" data-mage-init='{"validation": {}}'> <label>Name</label> <input type="text" name="name" id="name" data-validate="{required:true}"> <label>Quantity </label> <input type="number" name="quote_qty" id="quote_qty" data-validate='{"required":true}'> <label>price</label> <input type="text" name="quote_price" id="quote_price" data-validate="{required:true}"> <label>description</label> <input type="text" name="quote_desc" id="quote_desc" data-validate='{"required":true}'> <input type="hiddden" name="product_price" id="product_price" hidden> <button type="submit" id="submit" name="submit">submit</button> <button type="reset" name="reset">Reset</button> </form> </div> <script type="text/x-magento-init"> { "#custom-form": { "validation": {} } } </script> Call this form.phtml into model.phtml <button class="open-contact-form">Quote This Product</button> <div id="popup-modal"> <div class="contact-form-popup" style="display: none;"> <?php echo $this->getLayout() ->createBlock("Infy\Quotesystem\Block\Quote\Quote" ) ->setTemplate("Infy_Quotesystem::form.phtml") ->toHtml(); ?> </div> <div class="static-block-message" style="display: none;"> <?php echo 'display error'; ?> </div> </div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function($, modal) { jQuery(document).ready(function(){ var options = { type: 'popup', responsive: true, innerScroll: true, title: 'Contact Form', buttons: [{ text: $.mage.__('Close'), class: '', click: function () { this.closeModal(); } }] }; var openModal = modal(options, $('#popup-modal')); jQuery('body').on('click', '.open-contact-form', function(){ jQuery('.contact-form-popup').show(); jQuery('.static-block-message').hide(); jQuery('#popup-modal').modal('openModal'); }); jQuery('body').on('click', '#contact-form .action.submit', function(e){ e.preventDefault(); e.stopImmediatePropagation(); jQuery.ajax({ type: 'post', url: '<?php echo $block->getBaseUrl().'Your path to controller';?>', data: jQuery('#contact-form').serialize(), cache: false, showLoader: 'true', success: function(data, status, xhr) { // data contains your controller response }, error: function (xhr, status, errorThrown) { console.log('Error happens. Try again.'); console.log(errorThrown); } }); return false; }); }); } ); </script> Create your controller namespace Vender\Modulename\Controller\Index; use Magento\Framework\App\Action\Context; use Magento\Framework\Controller\ResultFactory; class Controllername extends \Magento\Framework\App\Action\Action { protected $_pageFactory; public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\Controller\ResultFactory $resultFactory, \Magento\Framework\View\Result\PageFactory $pageFactory, \Infy\Quotesystem\Helper\Data $helperData, \Infy\Quotesystem\Model\PostFactory $postFactory ) { parent::__construct($context); $this->_pageFactory = $pageFactory; $this->resultFactory = $resultFactory; $this->_postFactory = $postFactory; $this->helperData = $helperData; } public function execute() { $resultPage = $this->_pageFactory->create(); $post = $this->getRequest()->getPostValue(); $qty = $this->getRequest()->getParam('quote_qty'); $price = $this->getRequest()->getParam('quote_price'); $desc = $this->getRequest()->getParam('quote_desc'); $p_name = $this->getRequest()->getParam('name'); $p_price = $this->getRequest()->getParam('p_price'); $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $customerSession = $objectManager->create('Magento\Customer\Model\Session'); if ($customerSession->isLoggedIn()) { $emailcust = $customerSession->getCustomer()->getEmail(); $std = $this->_postFactory->create(); $std->setProduct_quantity($qty); $std->setQuotePrice($price); $std->setQuoteDescription($desc); $std->setProductName($p_name); $std->setProduct_price($p_price); $std->setCustom_email($emailcust); $adminuserId = 1; $user1 = \Magento\Framework\App\ObjectManager::getInstance()->create( 'Magento\User\Model\User'); $user1->load($adminuserId); $name = $user1->getUsername(); $email = $user1->getEmail(); $msg = 'User Add Quote in '.$p_name.' Quote Price is: '.$price; $user = $emailcust; if ($std->save()) { $sendmail = $this->helperData->sendMail($msg, $user, $p_name, $name, $email); } else{$this->messageManager->addError(__($e->getMessage()));} // $resultJson = $this->resultFactory->create(ResultFactory::TYPE_JSON); $resultRedirect = $this->resultFactory->create(\Magento\Framework\Controller\ResultFactory::TYPE_REDIRECT); $resultRedirect->setPath('*/index/*'); return $resultRedirect; } else{ $response = $this->resultFactory ->create(\Magento\Framework\Controller\ResultFactory::TYPE_JSON) ->setData([ 'status' => "Incomplete", 'message' => "Please Login/Register!!" ]); return $response; } } } Related SolutionsMagento 2 – Submit Custom Form Using Popup Modal try this one for ajax request on modal popup window. html Code <div style="margin-top: 15px;"> <button type="button" id="openModel" class="custom_model_popup">Questions?</button> <div id="myModel"> <form action="<?php echo $baseURL . 'pq/';?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"> //fields </form> </div> <span id='ajax_loader1' style='display:none'> <img src="<?php echo $baseURL; ?>pub/media/home/loader-2.gif" style="height: 150px;width: 150px"> </span> </div> JS Code <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function($,modal) { var options = { type: 'popup', responsive: true, innerScroll: true, title: 'Product Question', closeText: 'Close', buttons: [{ text: $.mage.__('Submit'), class: '', click: function (data) { var form_data = jQuery("#form-validate").serialize(); jQuery('#ajax_loader1').show(); //alert(form_data); jQuery.ajax({ url: "<?php echo $block->getBaseUrl() . 'pq/';?>", type: 'POST', data : form_data, success: function(data){ jQuery('#ajax_loader1').hide(); console.log(data); }, error: function(result){ console.log('no response !'); } }); this.closeModal(); } }], /** * Escape key press handler, * close modal window */ escapeKey: function () { if (this.options.isOpen && this.modal.find(document.activeElement).length || this.options.isOpen && this.modal[0] === document.activeElement) { this.closeModal(); } } }; var popup = modal(options, $('#myModel')); $("#openModel").on("click",function(){ $('#myModel').modal('openModal'); }); } ); </script> How to Close the Popup Modal After Showing Success Message in Magento 2 To close popup model there is method closeModal(). Updated code: function ($) { "use strict"; // Review form var x = { type: 'popup', responsive: true, innerScroll: true, buttons: false, title: "Header contant", modalClass: "popup-center abc-product-review", clickableOverlay: true, heightStyle: "content" }; var a = $('#review-form-content-wrapper').modal(x); $(".add-your-review").click(function () { var status = $(this).attr('data-status'); if (status === 'logged in') a.modal("openModal"); else alert("Please loggin"); }); return function (config) { $('#review-form').on("click", "#review-submit", function () { var form_data = $("#review-form").serialize(); var reviewurl = config.url; $.ajax({ url: reviewurl, type: 'POST', // Pass the submitted form data to Controller data: form_data, success: function (response) { var returnedData = JSON.parse(response); if (returnedData.status === 'success') $("#success").html(returnedData.messages); else $("#error").html(returnedData.messages); }, error: function (response) { var returnedData = JSON.parse(response); $("#error").html(returnedData.messages); a.closeModal(); } }); return false; }); }; }); Related TopicMagento – How to remain modal popup open by clicking outside the modal-content in Magento 2.6Magento 2 – How to Open Modal Popup with Dynamic ValuesMagento – how to create a form popup-modal in magento2.3
Best Answer
Form in form.phtml
Call this form.phtml into model.phtml
Create your controller