I have a form that I am filling with default values in hook_form_alter. Some of the fields are in a in a field group and I need to trigger the "add more" button using code.

I figured out how to send a value to the jQuery code via $form['#attached']['js']. I thought I could use that value to run a loop in the jQuery to trigger the "add more" as often as necessary but I only see the field group values twice.

For example if there should be four sets of field group values, I will see the first and second one but not the third or fourth. If I click on the add more button two more times I'll see them in the form.

Here is the code in the js file:

(function ($, Drupal) {
  // Custom functions and variables can go here
  Drupal.behaviors.example = {
    attach: function (context, settings) {
      // Put your document's onload code here
      for (var i = 0; i < Drupal.settings.example.clicks; i++) {
}(jQuery, Drupal));

This where I attach the js file

function example_after_build($form, &$form_state) {
  // TODO: Stuff!  

  $settings['clicks'] = $_SESSION['count_of_items']; //the initial count of times to trigger jquery
  drupal_add_js(['example' => $settings], 'setting');

  // Add our JavaScript file, named after_ajax.js. This file
  // lives in the /js folder inside our module:
  $form['#attached']['js'] = [
      'type' => 'file',
      'data' => drupal_get_path('module', 'example') . '/js/after_ajax.js',
  return $form;

Any advice on how I could trigger the "add more" multiple times? Or is what I want to do not possible?

  • 1
    Any particular reason you are not using '#ajax' provided by form api?
    – Mołot
    Jul 19, 2013 at 6:52
  • The examples of '#ajax' that I've seen are associated with programmatically created forms. My form is not created via code. Also, the ajax callback functions are replacing html. I don't want to replace html. I don't see how it can help me.
    – Venn
    Jul 19, 2013 at 13:06
  • every form is created by some code, just not always yours ;) You can use '#ajax' in hook_form_alter() as well, and that's the most stable way to do it unless for some reason you can't.
    – Mołot
    Jul 19, 2013 at 13:08

2 Answers 2


It is possible that the ID of the "Add more" button you're targeting is changing as the first AJAX request comes back (the form will be rebuilt, so IDs of all elements will change). Try changing '#edit-fgm-node-example-form-group-stuff-add-more' to a class-based selector.

  • The ID is the same after the second field group appears. I tried changing to the class of the add more button but the same behavior occurs.
    – Venn
    Jul 19, 2013 at 13:02

It because each time Ajax triggered JavaScript function attached again it will be several click handler, for prevent this problem use once function.

I mean put following statement on once function

for (var i = 0; i < Drupal.settings.example.clicks; i++) {

Reference 1
Reference 2
Similar question

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.