0

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.
</div>

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

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' => '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 – Colin Shipton 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
0

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 () {

  • 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? – Colin Shipton Jul 5 '18 at 8:16
  • Also, the getJSON function also has a .fail (i.e. .fail(function( jqxhr, textStatus, error ) { – Colin Shipton 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 – Colin Shipton 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.