Magento 2.2 – How to Submit URL in Popup Modal

frontendmagento2.2PHPurl

I have created custom link using popup modal. I need to placed this link in My Account page->My Orders and next to Reorder link. Like below
enter image description here

While clicking cancel it shows an popup window which consist text area and submit button. While clicking submit,It should save in DB. I have written code, in my Controller file to save the message in DB, But I don't know where I need to give the submit url in below file. Please provide me a solution.

Thanks in advance

history.phtml

<div>
                                <a href="#" class="click-me">Cancel</a>
                            </div>

                            <div id="popup-modal" style="display:none;">
                                <textarea>
                                </textarea>
                            </div>
                            <script>
                                require(
                                        [
                                            'jquery',
                                            'Magento_Ui/js/modal/modal'
                                        ],
                                        function (
                                                $,
                                                modal
                                                ) {
                                            var options = {
                                                type: 'popup',
                                                responsive: true,
                                                innerScroll: true,
                                                title: 'Reason for Cancelled the item',
                                                buttons: [{
                                                        text: $.mage.__('submit'),
                                                        class: '',
                                                        click: function () {
                                                            this.closeModal();
                                                        }
                                                    }]
                                            };

                                            var popup = modal(options, $('#popup-modal'));
                                            $(".click-me").on('click', function () {
                                                $("#popup-modal").modal("openModal");
                                            });

                                        }
                                );
                            </script>

Controller

<?php

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

namespace XXX\SalesOrder\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Sales\Model\Order;

//use Magento\Framework\Controller\ResultFactory;

class Index extends Action
{

    protected $_resultPageFactory;
    protected $order;

    public function __construct(
    \Magento\Framework\App\Action\Context $context, Order $order, \Magento\Framework\View\Result\PageFactory $resultPageFactory
    )
    {
        $this->_resultPageFactory = $resultPageFactory;
        $this->order = $order;
        parent::__construct($context);
    }

    public function execute()
    {
        $orderId = 3;
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $order = $objectManager->create('\Magento\Sales\Model\Order')->load($orderId);
        $order->addStatusHistoryComment('I need to get message here');// I need to get textarea message here
        $orderState = Order::STATE_PROCESSING;
        $order->setState($orderState)->setStatus(Order::STATE_PROCESSING);
        $order->save();

        $resultPage = $this->_resultPageFactory->create();
        return $resultPage;
    }

}

Best Answer

Create <form> inside popup-modal div

<div>
    <a href="#" class="click-me">Cancel</a>
</div>

<div id="popup-modal" style="display:none;">
      <form action="<?php  echo $block->getBaseUrl() . 'frontname/controllername/actionname';?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
                <textarea id="reason" name="reason"></textarea>
      </form>
</div>

JS Code

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                //innerScroll: true,
                title: 'Reason for Cancelled the item',
                buttons: [{
                    text: $.mage.__('submit'),
                    class: '',
                    click: function(data) {

                        var form_data = jQuery("#form-validate").serialize();


                        console.log(form_data);
                        jQuery.ajax({
                            url: "<?php  echo $block->getBaseUrl() . 'frontname/controllername/actionname';?>",
                            type: 'POST',
                            data: form_data,
                            success: function(data) {

                                console.log(data);
                            },
                            error: function(result) {
                                console.log('no response !');
                            }
                        });

                        this.closeModal();

                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $(".click-me").on('click', function() {
                $("#popup-modal").modal("openModal");
            });

        }
    );
</script>