hook_form_alter called before form generated?

[mkinnan]

I am creating a custom node add page. For my form, I want to create a custom empty select list that I will populate at some point after the form is generated and before shown to user. (I want provide a different GUI for collecting input for populating an address field.) The reason is that I don't want to have the same identical chunk of code multiple times for multiple forms. Thus, I have a function that I call that populates the select lists ... it works great on panels with filters used for views pages. The problem is that I cannot get the document element by ID in hook_form_alter (it returns null) thus I cannot attach my items to the select list. Is that the expected behavior? I have to use hook_post_process_page for it to work but this then loads the code for every page.

My hook_form snippet

function my_module_form(form, form_state, node) {
  try {

    var options_countries = '';

    var options_countries_default = '';
        
    form.elements['filter_country'] = {
      title: 'Location',
      type: 'select',
      options: options_countries,
      default_value: options_countries_default,
      attributes: {
        onchange: "filter_country_onchange('edit-my-module-form-filter-country','edit-my-module-form-filter-admin-area','edit-my-module-form-filter-locality')"
      }
    };

    form.elements['submit'] = {
      type: 'submit',
      value: t('Save')
    };
    
    return form;
  
  }
  catch (error) { console.log('my_module_form - ' + error); }
}

My hook_form_alter

function my_module_form_alter(form, form_state, form_id) {
  try {
    
    if (form_id == 'my_module_form') {
    
      var form_id_country = "edit-my-module-form-filter-country";
      var select = document.getElementById(form_id_country);
      console.log(select); // THIS RETURNS NULL
      
    }
    
  }
  catch (error) { console.log('my_module_form_alter - ' + error); }
}

My hook_post_process_page

function my_module_post_process_page(variables) {
  try {

    var form_id_country = "edit-my-module-form-filter-country";
    var select = document.getElementById(form_id_country);
    console.log(select); // THIS RETURNS CORRECTLY THE ELEMENT
  
  }
  catch (error) { console.log('my_module_post_process_page - ' + error); }
}

[mkinnan]

@signalpoint It appears you had (still have?) the same or related issue: http://tylerfrankenstein.com/code/drupal-location-form-alter

[mkinnan]

@signalpoint My mistake ... your link above is for Drupal 6.x, not DrupalGap. I still haven't figured out how to add javascript to the form after it loads. After experimentation hook_post_process_page is not really a good approach.

[mkinnan]

Wrapping code in setTimeout is the best solution I have been able to devise. Tested in browser and compiled Android app.

function my_module_form_alter(form, form_state, form_id) {
  try {
    
    if (form_id == 'my_module_form') {
    
      setTimeout(function() {
      
        var form_id_country = "edit-my-module-form-filter-country";
        var select = document.getElementById(form_id_country);
    
      }, 200);
    
    }
    
  }
  catch (error) { console.log('my_module_form_alter - ' + error); }
}