9

Can anyone explain me how I can create a simple form on Magento-2 page to send data using Ajax? I already have a form and controller action, that send data without using ajax.

  • I think this link will help you click here – Pankaj Sharma Feb 7 '17 at 11:32
  • look at my answer, it could help more then the accepted one – LucScu Jan 20 '18 at 9:48
  • Showing error to response > Undefined property: > namespace\modulename\Controller\Index\Index\Interceptor::$_jsonHelper Please share to improve the answer – Rohit Chauhan Jan 22 at 9:57
13

You can just set below code in your phtml file to use ajax, You have to change your customurl in below code,

<script type="text/javascript">
    require(["jquery"],function($) {
        $(document).ready(function() {
            var customurl = "<?php echo $this->getUrl().'frontname/index/index'?>";
            $.ajax({
                url: customurl,
                type: 'POST',
                dataType: 'json',
                data: {
                    customdata1: 'test1',
                    customdata2: 'test2',
                },
            complete: function(response) {             
                country = response.responseJSON.default_country;
                state = response.responseJSON.state;         
                console.log(state+' '+country);   
                },
                error: function (xhr, status, errorThrown) {
                    console.log('Error happens. Try again.');
                }
            });
        });
    });
</script>

inside your controller file execute() method,

<?php
 use Magento\Framework\Controller\ResultFactory;
 public function execute()
    {
        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);

        $response = $this->resultFactory->create(ResultFactory::TYPE_RAW);
        $response->setHeader('Content-type', 'text/plain');
        $country = 'india';
        $state = 'gujarat';
        $response->setContents(
            $this->_jsonHelper->jsonEncode(
                [
                    'default_country' => $country,
                    'state' => $state,
                ]
            )
        );
        return $response;
    } 
  • 4
    you can get data in controller using $this->getRequest()->getParam('customdata1'); – Rakesh Jesadiya Feb 7 '17 at 11:59
  • 1
    response is getting in script response. – Rakesh Jesadiya Feb 7 '17 at 12:40
  • 2
    complete: function(response) here you have got response. – Rakesh Jesadiya Feb 7 '17 at 12:40
  • 1
    you have to set response in above $this->_jsonHelper->jsonEncode( [ 'default_country' => $country, 'state' => $state, ] ) code in controller – Rakesh Jesadiya Feb 7 '17 at 12:47
  • 1
    in above case default_country and state are return from response – Rakesh Jesadiya Feb 7 '17 at 12:47
10

Accepted answer is good, but i think could be useful take advantage of the js validation that magento core offers. So, try to use below js script:

<script type="text/javascript">
require([
    "jquery",
    "mage/mage"
],function($) {
    $(document).ready(function() {
        $('#form_id').mage(
            'validation',
            { 
                submitHandler: function(form) {
                    $.ajax({
                        url: "url to module/controller/action",
                        data: $('#form_id').serialize(),
                        type: 'POST',
                        dataType: 'json',
                        beforeSend: function() {
                            // show some loading icon
                        },
                        success: function(data, status, xhr) {
                            // data contains your controller response
                        },
                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');
                            console.log(errorThrown);
                        }
                    });
                }
            }
        );
    });
});
</script>

Don't forget that controller has to return JSON response like:

$response = $this->resultFactory
    ->create(\Magento\Framework\Controller\ResultFactory::TYPE_JSON)
    ->setData([
        'status'  => "ok",
        'message' => "form submitted correctly"
    ]);

return $response;
  • 1
    Way better solution than the accepted answer. Thanks man – medina May 22 at 2:45

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.