How to implement a custom button in edit form page that takes few edit form values,sends to ajaxURL and populates some API response in another field on same page in magento2?

  • have seen multiple questions here but could not make it up by reading part part solutions. Also most questions are being labeled as possible duplicate and hence no one provides complete solutions.
    – MSQ
    Jul 10, 2017 at 13:25

1 Answer 1


I sorted out a lot earlier but thought someone might get help from this. Well, I wanted to add a TestAPI button in the line of Save and Back Buttons. Then I wanted to an ajax call for that TestAPI button that would take the required fields and send it to an admin controller that would call the API and get response and display it in the response field.

So, firstly I added a button in file like:



                'label' => __('Test API'),
                'onclick' => 'javascript:testApi(); return false;',
                'class' => 'customTestrun'


Now in file:


with other fields, I added some code with a last field with after_element_htmlattribute with complete JS part in it as follows:

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$FormKey = $objectManager->get('Magento\Framework\Data\Form\FormKey');
$myKey = $FormKey->getFormKey();
$url = $this->getUrl('module/api/testapi');

            'request_packet', 'editor', ['name' => 'request_packet',
        'label' => __('Request Packet'),
        'title' => __('Request Packet'),
        'required' => true,
        'after_element_html' => '<script type="text/javascript">

                                    function testApi() {
                                        var requestPacket = jQuery("#post_request_packet").val();
                                        var u_identifier = jQuery("#post_unique_identifier").val();
                                        var url_key = jQuery("#post_url_key").val();
                                            url: "' . $url . '",
                                            type: "POST",
                                            data: {u_identifier: u_identifier,url_key:url_key, requestpacket:requestPacket, formkey: "' . $myKey . '"},
                                            //dataType: "json",
                                            success: function (response) {



Then I made a file here:


and put code below:


 * Author: Shoaib
 * Method: API Testing Controller

namespace Company\Module\Controller\Adminhtml\Api;

use \Magento\Backend\App\Action\Context;
use \Company\Module\Helper\Data;

class Testapi extends \Magento\Backend\App\Action {

    protected $helper;

    public function __construct(Context $context, Data $helper) {
        $this->helper = $helper;

    public function execute() {
        $identifier = $this->getRequest()->getPost('u_identifier');
        $request_parameters = $this->getRequest()->getPost('requestpacket');
        $url_key = $this->getRequest()->getPost('url_key');
        //Called a helper method which has CURL functionality and returns response.
        $api_response = $this->helper->callApi($identifier, $request_parameters, $url_key); 


This returned the response to Ajax Method and in turn displays response in one of the assigned Field.

This solution worked great! I hope this helps others as well.

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.