7

I have a page with a form where the user can add multiple items to the form by using a [+] button. The plus button is adding another set of fields to enter more data every time it is clicked.

Right now the javascript code is just appending some HTML string with jQuery, but I'd like to do this in a cleaner way just like Magento 2 is doing this with their x-magento-template blocks, like:

<script id="some-template" type="text/x-magento-template">
    <div class="wrapper">
        <input id="<%- data.id %>" name="<%- data.name %>" placeholder="<%- data.placeholder %>" />
    </div>
</script>

How can I now take this template and render it with the input of a data object? And after that, append it to my form?

The JS I have (of which I'm going to put the HTML in newField into the x-magento-template):

define([
    "jquery",
    "mage/translate",
    "domReady!"
], function($) {

    $("button#js-add-more").click(function(e) {
        e.preventDefault();

        var newField = '<div class="wrapper"><input id="field-' + ($('form#myform input[id^=field-]').length + 1) + ' " name="field[]" placeholder="' + $.mage.__('Enter data') + '" /></div>';

        $('form#myform').append(newField);
    });

});
1
  • 1
    I think the best way to do this would be with Knockout templates, similar to how the checkout is built. This live example may help.
    – Ben Crook
    May 8, 2017 at 10:48

1 Answer 1

6

I found out how to do this. You can use mage/template to use these x-magento-template JS templates and render them.

define([
    "jquery",
    "mage/template",
    "mage/translate",
    "domReady!"
], function($, mageTemplate) {

    $("button#js-add-more").click(function(e) {
        e.preventDefault();

        var num = $('form#myform input[id^=field-]').length + 1,
            template = mageTemplate('#some-template');

        var newField = template({
            data: {
                id: 'field-' + num,
                name: 'field[]',
                placeholder: $.mage.__('Enter data')
            }
        });

        $('form#myform').append(newField);
    });

});

And the some-template is like I also posted in my question:

<script id="some-template" type="text/x-magento-template">
    <div class="wrapper">
        <input id="<%- data.id %>" name="<%- data.name %>" placeholder="<%- data.placeholder %>" />
    </div>
</script>
2
  • Is it possible to replace the data instead of append? I am fetching image URLs using a Magento template. whenever I click a button I get images but they are just appending. what I want is when we click on the button we get one image then we click again and this time image should be replaced with the new one. I tried to use the below code but it didn't work either. $('form#myform').after(newField); Nov 8, 2023 at 12:39
  • It is a long time ago for me. I guess you can just replace it? Or remove all children and then append, that will do the same. You probably need to search for how to do that with jQuery. It is kind of unrelated topic of Magento2 JS template here...
    – 7ochem
    Nov 9, 2023 at 13:14

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.