Magento 2: Submit Form on Checkbox Click – How to Guide

formsjavascriptmagento-2.1magento2

Can someone help me?

I need to know how to send the form checkout/cart/updatePost when clicking on a checkbox. It should include an input field hidden or similar with the name=udpate_cart_action and a value.

When we pulse on:

<button type="submit"
    name="update_cart_action"
    data-cart-item-update=""
    value="update_qty"
    title="<?php echo $block->escapeHtml(__('Update Shopping Cart')); ?>" class="action update">
     <span>
          <?php /* @escapeNotVerified */ echo __('Update Shopping Cart'); ?>
     </span>
</button>

We send a param in the request object with the name and value.

But I don't if I must to send this name and value with the checkbox or in the JavaScript…

I have this input type checkbox foreach item

<input id="item_<?php echo $block->escapeHtml($itemId) ?>" name="item[check][<?php echo $block->escapeHtml($itemId) ?>]"  type="checkbox" class="check_item" value="<?php echo $block->escapeHtml($itemId) ?>"

And this code javascript:

<script type="text/javascript">
    $(document).ready(function() {
        $(".check_item").on("change", ":checkbox", function() {
            console.log("check");
        });
    });
</script>

But when I pulse on checkbox and it's status change nothing happens 🙁

UPDATE

Thanks, Philipp Sander your answer was correct. The problem was to add

require(['jquery'], function ($){ //code ]);

<script type="text/javascript">
    require(['jquery'], function ($) {

        $(".check_item").change(function() {
            if(this.checked) {
                $("#update_baa").click();
            } else {

                $("#update_baa").click();
            }
        });

    });

</script>

Thanks!!

Best Answer

$(".check_item").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Related Solutions

Onepage Checkout – Reset Form Fields in Billing Form

Using the default theme's classes and id's the following will reset all the inputs inside the ul that the shipping address section is contained.

$$('#billing-new-address-form ul input, #billing-new-address-form ul input').each(
    function(item) {
        item.clear();
    }
);

Magento 2 – Simple Form Submit Guide

You start by defining a route for your module. This is done in <module_directory>/etc/frontend/routes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="timestwo" frontName="timestwo">
            <module name="Your_Module"/>
        </route>
    </router>
</config>

Then make the 'Index' controller for this route under <module_directory>/Controller/Index.php

<?php

namespace Your\Module\Controller;


use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    protected $resultPageFactory;

    public function __construct(Context $context, PageFactory $pageFactory)
    {
        $this->resultPageFactory = $pageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();

        return $resultPage;
    }
}

Make the layout file for this page under <module_directory>/view/frontend/layout/timestwo_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Form</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block name="form" class="Magento\Framework\View\Element\Template" template="Your_Module::form.phtml"/>
        </referenceContainer>
    </body>
</page>

Now make the template <module_directory>/view/frontend/templates/form.phtml

<form class="form" action="result" method="post">

    <fieldset class="fieldset">
        <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Test Form') ?></span></legend><br>
        <div class="field required">
            <label for="number" class="label">
                <span><?php /* @escapeNotVerified */ echo __('Input') ?></span>
            </label>

            <div class="control">
                <input type="text" id="number"
                       name="number"
                       class="input-text">
            </div>
        </div>
    </fieldset>

    <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" class="action submit primary" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>">
                <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
            </button>
        </div>
    </div>

</form>

Now make the controller for the result page: <module_directory>/Controller/Result.php

<?php

namespace Your\Module\Controller;


use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Element\Messages;
use Magento\Framework\View\Result\PageFactory;

class Result extends Action
{
    /** @var PageFactory $resultPageFactory */
    protected $resultPageFactory;

    /**
     * Result constructor.
     * @param Context $context
     * @param PageFactory $pageFactory
     */
    public function __construct(Context $context, PageFactory $pageFactory)
    {
        $this->resultPageFactory = $pageFactory;
        parent::__construct($context);
    }

    /**
     * The controller action
     *
     * @return \Magento\Framework\View\Result\Page
     */
    public function execute()
    {
        $number = $this->getRequest()->getParam('number');

        $resultPage = $this->resultPageFactory->create();

        /** @var Messages $messageBlock */
        $messageBlock = $resultPage->getLayout()->createBlock(
            'Magento\Framework\View\Element\Messages',
            'answer'
        );
        if (is_numeric($number)) {
            $messageBlock->addSuccess($number . ' times 2 is ' . ($number * 2));
        }else{
            $messageBlock->addError('You didn\'t enter a number!');
        }

        $resultPage->getLayout()->setChild(
            'content',
            $messageBlock->getNameInLayout(),
            'answer_alias'
        );

        return $resultPage;
    }
}

Finally, make the layout xml for the result page in <module_directory>/view/frontend/layout/timestwo_result.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Result</title>
    </head>
</page>

Run php bin/magento setup:upgrade to enable your module, if you haven't already. Now clear the cache. Go to <magento_location>/timestwo in browser to see the form.

Best Answer

Related Solutions

Onepage Checkout – Reset Form Fields in Billing Form

Magento 2 – Simple Form Submit Guide

Related Topic