Magento – how to pass a variable from one phtml to another

You need a controller to access the block. In the controller you then call the block with:

$this->loadLayout()
->_addContent($this->getLayout()->createBlock('[module_alias]/[block]'))
->renderLayout();

You can also pass the needed url parameter to you block if you use in the code above:

$this->getLayout()
->createBlock('[module_alias]/[block]')
->setRequestId($this->getRequest()->getParam('id')

The block then processes the request and outputs the data, the output can be formatted as HTML or Json depending on your needs.

Below is the code which was functional -

define(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {  
            'use strict';
            $.widget('vendor.mod', {
                options: {
                    submitUrl: '',
                },                                        
                _create: function() {
                    this._initElement();
                },
                _initElement: function() {
                    var that = this;
                    var options = {
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        title: 'Ask A Question',
                        buttons: [{
                            text: $.mage.__('Submit Question'),
                            class: '',
                            click: function () {
                                var form_data = $("#popup-modal").serialize();
                                console.log(that.options.formUrl);
                                return false;                        
                                $.ajax({
                                    url: options.formUrl,
                                    type: 'POST',
                                    data : form_data,
                                    success: function(data){                                
                                        console.log(data);
                                        console.log("sdfss");
                                    },
                                    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, $('#popup-modal'));
                    $(".open-modal-form").on('click',function(){ 
                        $("#popup-modal").modal("openModal");
                    });
                }
            });
            return $.vendor.mod;
        }
);

The changes made by me were -

1) Created widget and named it as - vendor.mod

2) Used the _create function in which I called my code using _initElement function

3) within _initElement I used var that = this; to use the options variables

4) return $.vendor.mod; to end after all functions

5) console.log(that.options.formUrl); is the line which you can use to check the difference