[fixed]Trigger an ajax Submit Form button by clicking on a div 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:

&lt;div class="Rectangle" id="rectangle-div" &gt;
 This is the div containing some stuff that I want to click to submit the form.
&lt;/div&gt;

&lt;form id="form-id"&gt;
{{ form.elem }}
{{ form.actions.submit }}
&lt;/form&gt;


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 

$('form-id').submit();


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?

UPDATE #1: FIXED

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' =&gt; 'submit',
            '#value' =&gt; $this-&gt;t('Save'),
            '#button_type' =&gt; 'primary',
            '#ajax' =&gt; [
                'callback' =&gt; '::setMessage',
                'event' =&gt; '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 :)
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) {
    console.log(data);
  });


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