Adding ajax to text field in node edit form

Question

I have created a content type "Type A" and added three fields to content type. I want to display value in third field equal to (value of first field - value of second field).

I want to implement the same using ajax functionality. I have created a custom module and alter the "node form" and add ajax to field 1 but ajax is not working on change event of textfield.

Code Snippet:

function employee_login_form_alter(&$form, &$form_state, $form_id){

    $form['field_total_value']['#prefix'] = '<div id="calculate-total-value">';
    $form['field_total_value']['#suffix'] = '</div>';


    $form['field_value_first']['#ajax'] = array(
        'callback' => 'employee_login_ajax',
        'wrapper' => 'calculate-total-value',
        'method' => 'replace',
        'event' => 'change',    
    );

    $form['field_value_first']['und'][0]['#ajax'] = array(
        'callback' => 'employee_login_ajax',
        'wrapper' => 'calculate-total-value',
        'method' => 'replace',  
        'event' => 'change',        
    );

}

function employee_login_ajax(&$form, &$form_state) { //print_r($form); exit;
  print_r($form_state['values']);
}

Answer 1

You don't need ajax, you can do this with jQuery or javascript. Something like this might work.

First, create an external js file and set up your change events.

jQuery(document).ready(
    function()
    {
        jQuery("#field2").change(subtract_fields);
        jQuery("#field1").change(subtract_fields);

        function subtract_fields()
        {
            if (jQuery("#field1").value != "" && jQuery("#field2").value != "")
            {
                return jQuery("#field1").value - jQuery("#field2").value;
            }

            return "";
        }
    }
);

Next, load the external js file using drupal_add_js.

Clear your cache and voila.

Answer 2

In ajax callback you are not supposed to print form part you want updated. You are supposed to return form part that needs updating. And you can set field's value using $form_state['input'].

function employee_login_ajax(&$form, &$form_state) {
  $form_state['input']['field_total_value'] = $your_value;
  return $form['field_total_value'];
}

Ah, and don't forget <input> usually does not support change event. You can use one of the following instead:

• keyup
• blur
• maybe input, this one depends on browser

Or don't set ['#ajax']['event'] at all, to let Drupal decide.