How to submit ajax drupal form using javascript

Question

first of all, i've tried Amar Ravikumar solution there, but it still doesn't work.

I have this piece of code :

$form['button'] = array(
  '#type' => "button",
  '#id' => "mymoduleAjaxButton",
  '#value' => t("Process"),
  '#ajax' => array(
    'callback' => "mymodule_form_callback",
    'wrapper' => "message",
    'method' => "html",
  ),
);

And i have a canvas which contains many graphicals stuffs on which i can click.

When i click on a particular element, i want my ajax form to submit (like if i pressed the button).

Here is the js code:

// circle is a Kinetic.Circle object. 
circle.on("click touchcancel tap", function() {
  var fill = onClick(posX, posY);
  this.setFill(fill);
  layer.draw();
});
function onClick(x, y) {
  // Some stuff
  jQuery("#mymoduleAjaxButton").trigger("mousedown");
  return "red";
}

As you can see, i'm following the advices given by Amar (see the first line), but i doesn't work. My circle color changes, but the form isn't submitted.

Other solutions i've tried:

jQuery("#mymoduleAjaxButton").trigger("click"); // Like mousedown
jQuery("#mymoduleAjaxForm").submit(); // It refreshes my page... Not what i want, otherwise i wouldn't use ajax
jQuery(document).ready(function() { jQuery("#mymoduleAjaxButton").trigger("click"); });
 /* Replace the click by mousedown doesn't change anything too, 
moreover i believe it's useless here to add this here... */

Does anyone know how i can perform that or know what i'm doing wrong? Thanks.

From what I can remember, no (I'm pretty sure that it was, obviously, the first thing I did check). By the way, I'm not working on it anymore, and I don't know if the person who took this project fixed it. — GeoffreyB, Feb 22 '13 at 12:42

score 2 · Answer 1 · answered Dec 04 '13 at 08:24

2

I had some trouble with this too, what worked for me was:

$('#my-form').trigger('submit');

So instead of triggering the button's click event you trigger the forms submit event.

I read you are not working on this anymore but I thought I'd share anyway for the ones that come across this thread while searching for the same problem.

answered Dec 04 '13 at 08:24

MidnightMotion

63
8

Oh, i think i didn't try this. If i ever find this code somewhere on my computer i'll give it a look. – GeoffreyB Jan 02 '14 at 22:10
4

This does not trigger an ajax submit for me, but instead reloads the entire page. – JoBu1324 Jan 03 '14 at 16:41
It works for me, a reload would typically happen if there are javascript errors when submitting. Have you checked the console for errors? They might occur before but also right after clicking the button. – MidnightMotion Jan 06 '14 at 14:36

score 2 · Answer 2 · answered Nov 30 '16 at 20:43

Instead of calling the submit (which will reload the entire page), trigger the click action on the submit button.

Note that because of the AJAX, the IDs of form elements get replaced. So I had to use the data-drupal-selector in my jQuery so the javascript worked multiple times. See my code below:

Drupal.behaviors.myCustomModule = {
    attach: function (context, settings) {
        $('select[data-drupal-selector="edit-YOUR-FIELD"]', context).change(function(){
            $('#views-exposed-form-YOUR-VIEW-block-1 input.form-submit').trigger('click');
        });
    }
};

score 1 · Answer 3 · answered Jun 06 '18 at 10:13

an example on d8 exposed filters :

/*
*   @file
*
*
* */

(function ($, Drupal, drupalSettings) { // closure
  'use strict';
  Drupal.behaviors.videos = {
    attach: function (context) {

      $('main', context).ready(init);

      function init() {

        SelectToUlFilter();

        $('ul').on('click', '.selectlist-option', function () {
          //stockage du filtre selectionné
          var selected_filter = $(this).attr('data-value');
          localStorage.setItem('data-value', selected_filter);

          var $selectlist = $(this).closest('.selectlist');
          $selectlist.find('.selectlist-option').removeClass('active');
          $(this).addClass('active');
          $($selectlist.data('select')).val($(this).data('value'));
          $('.views-exposed-form input.form-submit').trigger('click');
          SelectToUlFilter();
        })

      }

      /**
       * convertit select/option to ul/li
       * affranchit de l'usage du submit bouton
       * memoire des clicks
       */
      function SelectToUlFilter() {

        $(".views-exposed-form .form-select").once().each(function () {
          $(this).hide();
          $(".views-exposed-form").find("input[type='submit']").addClass("visually-hidden");

          var $ul = $("<ul/>", {
            'class': 'selectlist'
          });
          $ul.data('select', $(this));
          $(this).find('option').each(function () {
            var $li = $("<li/>", {
              'class': 'selectlist-option',
              'data-value': $(this).val(),
              'text': $(this).text(),
              'selected': 'selected'
            });
            $ul.append($li);
          });
          $(this).after($ul);

          //affichage du filtre selectionné
          if (localStorage.getItem("data-value") === null) {
            localStorage.setItem('data-value', 'All');
          }
          var selected_filter = localStorage.getItem('data-value');
          $("li[data-value=" + selected_filter + "]").attr('selected', "selected");


        });
      }
    }
  };
}(jQuery, Drupal, drupalSettings));

How to submit ajax drupal form using javascript

3 Answers3