I have created form in popup modal and it works successfully. After submitted a form it shows an alert. But I need success message instead of alert, in Popup itself after submitted a form. Please provide me a solution.
history.phtml
<div>
<a href="#" id="click" class="click-me" data-id="<?= $_order->getEntityId(); ?>" >Cancel</a>
</div>
<div id="popup-modal" style="display:none;">
<form action="<?php echo $block->getBaseUrl() . 'oxsales/index/index'; ?> " method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
<label>Reason:</label><textarea id="reason" rows="4" cols="10" name="reason"></textarea>
</form>
</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 () {
var form_data = jQuery("#reason").val();
var post_id = $('#click').data('id');
console.log(form_data);
jQuery.ajax({
url: "<?php echo $block->getBaseUrl() . 'oxsales/index/index'; ?>",
type: 'POST',
data: {'id': post_id, 'form_data': form_data},
success: function (data) {
alert('success');
},
error: function (result) {
alert("error");
}
});
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-modal'));
$(".click-me").on('click', function () {
$("#popup-modal").modal("openModal");
});
}
);
</script>