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

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);
  • 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. – Bartosz Herba Nov 28 '17 at 8:46
  • Well done mate :) – Bartosz Herba Nov 28 '17 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 '17 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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