Submit custom form using Popup modal in Magento 2
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>