Submit custom form using Popup modal in Magento 2

Question

I have created a modal popup and I have added my custom fields inside that popup. Now, that popup and fields are coming and it's working fine. But the form is not showing inside that Popup. I want to sent that using Ajax to another controller to perform an action. Please help me how to do that.

<a href="#" id="click-me">Get Quote</a>
<div id="popup-modal" style="display:none;">
    <form class="form" id="custom-form" method="post" autocomplete="off">
        <fieldset class="fieldset">
          <legend class="legend"><span><?php echo __('Personal Information') ?></span></legend><br>
           <div class="field required">
               <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
                <div class="control">
                    <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
                </div>
            </div>
        </fieldset>
        <div class="actions-toolbar">
            <div class="primary">
                <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
            </div>
        </div>
    </form>
</div>

<script>
    require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'Get Quote',
            buttons: [{
                text: $.mage.__('Continue'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

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

    }
    );
</script>

Answer 1

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>

Answer 2

For Issue: form tag disappear in model popup:

Current 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>

Change it to:

<div style="margin-top: 15px;">
    <button type="button" id="openModel" class="custom_model_popup">Questions?</button>
    <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>

And create another phtml file called form_content.phtml and add your model popup code to new phtml file.

<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>

Now call form_content.phtml from layout xml.

<referenceContainer name="before.body.end">
    <block class="YOUR_CLASS"
           name="form.content"
           template="Vendor_Module::form_content.phtml"
           cacheable="false" />
</referenceContainer>

This will add form your form content to just before the body end. So your form tag will not disappear.

EDIT: for anyone looking for an explanation about it this question may be useful