I've a form inside a custom template and I would like to trigger the submit button clicking on one div. Then the function submitForm sends the form-data to a webservices using Drupal httpClient.

The twig template is like:

<div class="Rectangle" id="rectangle-div" >
 This is the div containing some stuff that I want to click to submit the form.

<form id="form-id">
{{ form.elem }}
{{ form.actions.submit }}

I tried with a simple jQuery function like:

jQuery(function($) {
    $(document).ready(function () {
        $('#rectangle-div').on('click', function () {
            var wrapper = $('#form-id');
            $('.form-submit', wrapper).trigger( "click" );

I tried also to write a selector like:

$('button[id^="edit-mod-submit"]', wrapper).trigger( "click");

if I try with a simple submit like


the js code submits the form but refresh the page avoiding ajax and furthermore doesn't send data to the WS:

(if I use the submit button the data goes to the WS).

Any other ideas?


I added inside the ajax option of my submit button the event 'click' and now, using jQuery, I am able to send the post request to the WS. The form is like:

 $form['actions']['submit'] = array(
            '#type' => 'submit',
            '#value' => $this->t('Save'),
            '#button_type' => 'primary',
            '#ajax' => [
                'callback' => '::setMessage',
                'event' => 'click',


The jQuery function is:

jQuery(function($) {
        var wrapper = $('#form-id');
        $('.form-submit', wrapper).trigger( "click" );

Now I should intercept the response coming from the webserver and then execute a JS script, but these are other questions :)

  • Is this copied and pasted from your code? The <div class="Rectangle id="rectangle-div" > is missing a " after Rectangle which would cause the rest of the code to not work correctly Jul 4, 2018 at 16:29
  • @ColinShipton it is not the original code, but I corrected the error.
    – que le
    Jul 5, 2018 at 7:05
  • 1
    Why not add your "fixed" as an answer?
    – mradcliffe
    Jul 12, 2018 at 16:56

1 Answer 1


Your code is not triggering an AJAX call, it will just submit the form normally via JavaScript rather than pressing a button, etc. If you want submit the form via AJAX you will need something like:

  var url = $('#form-id').attr('action');
  $.getJSON(url, {
    field1: 'data1',
    field2: 'data2'
  }).done(function(data) {

Place this inside $('#rectangle-div').on('click', function () {

  • Ok I tried this piece of code but it cannot enter inside the done(function) and the ws doesn't receive any post request. Furthermore: why do I use Key,Value pairs inside the function if I use the form to send data to the webservice?
    – que le
    Jul 5, 2018 at 7:48
  • You need to use key/value pairs as you're not submitting the form, you're replacing the submit with an AJAX call, etc. can you post the whole code rather than just snippets? Jul 5, 2018 at 8:16
  • Also, the getJSON function also has a .fail (i.e. .fail(function( jqxhr, textStatus, error ) { Jul 5, 2018 at 8:19
  • the error is "parsererror: SyntaxError: JSON.parse: unexpected character at line 3 column 1 of the JSON data". The original code is very similar, but it contains more data. In any case now I can contact the webserver using jQuery, but I'm not able to receive the response. I'm going to update the question.
    – que le
    Jul 5, 2018 at 12:00
  • Sounds to me as if the webservice is not returning JSON Jul 6, 2018 at 8:17

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.