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 '18 at 16:29
  • @ColinShipton it is not the original code, but I corrected the error.
    – que le
    Jul 5 '18 at 7:05
  • 1
    Why not add your "fixed" as an answer?
    – mradcliffe
    Jul 12 '18 at 16:56

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 '18 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 '18 at 8:16
  • Also, the getJSON function also has a .fail (i.e. .fail(function( jqxhr, textStatus, error ) { Jul 5 '18 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 '18 at 12:00
  • Sounds to me as if the webservice is not returning JSON Jul 6 '18 at 8:17

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.