0

I want to get data from <input> and <textarea> fields and redirect to other URL controller but I'm stucking in writing logic for it Here is my phtml file

<a class="action print" href="#" id="click-me" data-mage-init='{"myjs": {}}'>Custom popup</a>

<div id="popup-modal" >
    <div id="custom-modal">
        <label>
            Name:
            <input type="text" name="name" id="name1">
        </label>
        <label>
            Content Invoice:
            <textarea name="content"></textarea>
        </label>
    </div>
</div>

and my js file in frontend/web folder

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            buttons: [{
                text: $.mage.__('Submit'),
                click: function () {
                    // get input data here and redirect to another page
                }
            },
            {
                text: $.mage.__('Close'),
                class: 'mymodal1',
                click: function () {
                    this.closeModal();
                }
            }
            ]
        };

        var popup = modal(options, $('#popup-modal'));
        $("#click-me").on('click',function(){
            $("#popup-modal").modal("openModal");
        });
    }
);
Improve this question
3
  • 1
    if you are trying to save data you can use AJAX calls
    – Ghulam.M
    Mar 10, 2021 at 10:31
  • Hi @Ghulam.M Could you help me to provide some code? Thank you!
    – Tùng Nguyễn
    Mar 10, 2021 at 10:50
  • 1
    You can check these link1 and link2
    – Ghulam.M
    Mar 10, 2021 at 11:05

1 Answer 1

Reset to default
2

In layout file (change the layout as per your wish) cms_index_index.xml in Sathya/Popup/view/frontend/layout/cms_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block name="custom.popup.widget" template="Sathya_Popup::popup.phtml"/>
        </referenceContainer>
    </body>
</page>

And template file in Sathya/Popup/view/frontend/templates/popup.phtml

<h1>
    <div class="subscribe-button-wrapper">
        <a class="action-print" href="#" id="click-me">Custom popup</a>
    </div>
</h1>
<div class="popup-modal">

<!--     if not using Ajax then please give the action controller URL here.-->

    <form action="#" class="popup-form-data-submit">
        <label>
            Name:
            <input type="text" name="name" id="name1">
        </label>
        <label>
            Content Invoice:
            <textarea name="content"></textarea>
        </label>
        <button type="submit">Submit</button>
    </form>
</div>
<script type="text/x-magento-init">
     {
        "*": {
            "Sathya_Popup/js/popup": { }
        }
    }
</script>

Javascript file in Sathya/Popup/view/frontend/web/js/popup.js

define(['jquery', 'Magento_Ui/js/modal/modal'], function ($, modal) {
    'use strict';
    $.widget('sathya.customWidgetPopupForm',{
        options:{
            PopupForms: '.popup-form-data-submit',
            popupLink : '.action-print'
        },
        _create: function () {
            console.log('popup-form-connected');
            this._super();
            let self = this;
            let popupOptions = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                modalClass: 'custom_popup_box'
            };
            modal(popupOptions, this.options.PopupForms);
            $(self.options.popupLink).on('click',function () {
                $(self.options.PopupForms).modal('openModal');
            });
            $(self.options.PopupForms).on('submit',function (event) {
                event.preventDefault();
                alert('submited');
                // use ajax function to save the data
                // console.log($('.subscribe-form-data').serializeArray());
            })
        }
    });
    return $.sathya.customWidgetPopupForm;

});

enter image description here enter image description here

Improve this answer
0

Your Answer

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

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