6

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

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>
  • Thanks for you comment. I think it will work but i have another issue i have created form while i inspect that popup means that form tag is not there. So , the data is not passing after submit. Do you have any idea why that form tag is coming inside that form. Remaining fields coming fine like email,password,etc – Jeeva Chezhiyan Nov 1 '17 at 7:06
  • @JeevaChezhiyan see jQuery.ajax({}); inside the code how form data will send through Ajax request. – Bojjaiah Nov 1 '17 at 7:09
  • Yeah i know in that i have added console.log after var form_data = jQuery("#form-validate").serialize(); to print that data but data is not coming – Jeeva Chezhiyan Nov 1 '17 at 7:12
0

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.

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.