1

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>

1 Answer 1

1

Inside of your ajax request

success: function (data) {
  alert('success');
}, error: function (result) {
  alert("error");                                                               
}

Replace alert with your implementation.

If you are using jQuery then appropriate solution would be:

1 - Add html message block somewhere

<p class="message" data-message></p>;

2 - In success/error callback add message inside of element

$('[data-message]').text(YOUR_MESSAGE);
3
  • You are unable to get what? Place my code in your phtml... replace alert function with mine and add paragraph to html with proper attribute. Nov 28, 2017 at 8:46
  • Well done mate :) Nov 28, 2017 at 9:14
  • But in my script , the popup is shown aftrer submitting the form the modal is closed before showing the success message, Then again I need to open the popup then only i can see the success message . Please provide me a solution to see success message before before closing popup
    – Jaisa
    Nov 28, 2017 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.