[Guide] On button click call controller in Magento 2

In this article, you going to see how on button click call controller in Magento 2. It is regarding controller action which is the main thing.

As you see in the above image is given is that every controller always handle on action.

Depending upon which each module in Magento execution is depend.

You can call this URL, that is you can on button click call controller in Magento 2

As you to do this, and button tag of HTML obviously has to be declared in the phtml file in Magento 2.

So to do this you going to use Ajax, which is nothing but by passing action URL which is mention in above image.

Below is the script in which it is mention that how ajax is used.

It is achieved using action URL with the help of that it passes the data on click button.

<div class="row clearfix">
        <div class="col-md-12 column">
            <form name="form_value" method="POST" id="form_value">
                    <label>Number one</label>
                    <input type="text" name="numone" class="form-control input-md" style="margin:20px;width:300px;" autocomplete="off">
                    <label>Number two</label>
                    <input type="text" name="numtwo" class="form-control input-md" style="margin:20px;width:300px;" autocomplete="off">
                    <input type="submit" id="calculateTotalSubmit"  name="calculate-total-submit" value="Calculate Total">
                </div> 
            </form><br/><br/>
            Result<div class="result" style="display:none"></div>
        </div>
    </div>

<script>
require(['jquery'],function(){
    jQuery(document).ready(function() {
        jQuery(".result").hide();
        jQuery("#form_value").submit(function(){
            
            var oneValue = jQuery("input[name='numone']").val();
            var twoValue = jQuery("input[name='numtwo']").val();

            var url = "<?php echo $block->getBaseUrl().'ajaxtutorial/result/result/' ?>";
            jQuery.ajax({
            url: url,
            type: "POST",
            data: {numone:oneValue,numtwo:twoValue},
            showLoader: true,
            cache: false,
            success: function(response){
                console.log(response.output);
                jQuery(".result").show();
                jQuery(".result").text(response.output);
            }
        });
        return false;
        });
    });
});
</script>

After successfully process of ajax completion it will return result in phtml file using execute method of controller.

The main important thing in action URL is frontend as it is mention in above image.

This frontend name is mention in router file called "router.xml".

From above script you come to know that how we can achieve the task of controller calling using ajax.

If you want to know the complete functionality of Ajax in Magento 2.

Please check with the below link.

In which I have already given regarding the full functionality of ajax process in Magento 2.

Ajax Call in Magento 2 Module

It is a complete ajax module, you can download it from git hub.Below is git hub link to down load.

SOURCE CODE AJAX CALL IN MAGENTO TWO

I hope you liked my this article. If you have any queries or any question regarding this, Feel free to comment on Me.