Get Div's Text in Drupal Forms API

Question

I have this code below:

$form['id']['mypreview_modal'] = array(
    '#type' => 'item',
    '#markup' => 
        '<div id="mypreview_modal" title="ID Preview">12345</div>'
);  

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Save',         
    '#ajax' => array(
        'event' => 'click',
        'callback' => 'myid_user_page_form_ajax_submit',          
    ),     
);


function myid_user_page_form_ajax_submit() {    
     $myid_user = ; //Get mypreview_modal's text/innerHTML    
}

I want to get mypreview_modal text and assign it to myid_user. How will I do that?

Answer 1

An AJAX callback is not a submission callback; the submission callback is the usual one a form uses, independently from the form using AJAX or not.
An AJAX callback is given the $form and $form_state parameters, allowing it to produce a result, which it returns for rendering. Since it gets $form as parameter, accessing that value simply means parsing $form['id']['mypreview_modal']['#markup'].

function myid_user_page_form_ajax_submit($form, $form_state) {    
  // Parse $form['id']['mypreview_modal']['#markup'].
}

Keep in mind that usually an AJAX callback just returns the part of the form that needs to be rendered. See poll_choice_js() as example.

function poll_choice_js($form, $form_state) {
  return $form ['choice_wrapper']['choice'];
}

The rest is done from the submission handler. (In the case of the Poll module, and for the form using the previous AJAX callback, this is poll_more_choices_submit().)

  // If this is a Ajax POST, add 1, otherwise add 5 more choices to the form.
  if ($form_state ['values']['poll_more']) {
    $n = $_GET ['q'] == 'system/ajax' ? 1 : 5;
    $form_state ['choice_count'] = count($form_state ['values']['choice']) + $n;
  }
  // Renumber the choices. This invalidates the corresponding key/value
  // associations in $form_state['input'], so clear that out. This requires
  // poll_form() to rebuild the choices with the values in
  // $form_state['node']->choice, which it does.
  $form_state ['node']->choice = array_values($form_state ['values']['choice']);
  unset($form_state ['input']['choice']);
  $form_state ['rebuild'] = TRUE;

Answer 2

If you want to pass values you should just use one of the form api form elements. Doing something similar to this

// This shows a preview to the user but doesn't actually pass any values.
$form['mypreview_modal'] = array(
    '#type' => 'item',
    '#markup' => 
        '<div id="mypreview_modal" title="ID Preview">12345</div>'
);  

// This passes the actual value (change this dynamically aswel).
$form['id'] = array(
    '#type' => 'hidden', 
    '#value' => 12345
); 

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Save',         
    '#ajax' => array(
        'event' => 'click',
        'callback' => 'myid_user_page_form_ajax_submit',          
    ),     
);

After form submission you will be able to access all the user input via the $form_state, notice that 2 parameters have been added to the submit handler.

function myid_user_page_form_ajax_submit($form, &$form_state) {    
    $myid_user = $form_state['input']['id']; // Gets the value of the hidden form element.  
}

On a side note, any submit button automatically calls the submit handler. Wich is normally used to process the input of the form. As previously mentioned you should use that instead of your custom ajax callback for processing.