Use AJAX on a form with multiple buttons [closed]

Question

I have a form that has two text areas and three buttons, "Copy", "Reverse" and "Clear". I would like the buttons to, respectively, copy the text from one text area to the other, take the text from the first area and place the reverse of it in the other, and clear both text areas using AJAX.

I know how to do these functions in PHP but I can't seem to get the AJAX to work at all. Here is my existing code, any help would be appreciated:

<?php

    function produce_form() {
    $form['input'] = array(
        '#type' => 'textarea',
        '#title' => t('Input text'),
        '#prefix' => '<div id="in-text">',
        '#value' => '',
        '#attributes' => array(
            'placeholder' => t('Enter some text here... '),
        ),
        '#suffix' => '</div>',
    );

    $form['buttons'] = array(
        '#type' => 'fieldset',
        '#title_display' => 'invisible',
        '#attributes' => array(
            'style' => 'border: 0px; text-align: right',
            'class' => array('container-inline'),
        ),
    );

    $form['buttons']['copy'] = array(
        '#type' => 'button',
        '#value' => 'Copy text',
        '#ajax' => array(
            'callback' => 'copy_text',
            'wrapper' => 'out-text',
//          'method' => 'replace',
//          'effect' => 'fade',
        ),
    );

    $form['buttons']['reverse'] = array(
        '#type' => 'button',
        '#value' => t('Reverse text'),
    );

    $form['buttons']['clear'] = array(
        '#type' => 'button',
        '#value' => t('Clear text'),
    );

    $form['output'] = array(
        '#type' => 'textarea',
        '#title' => t('Output text:'),
        '#prefix' => '<div id="out-text">',
        '#value' => '',
        '#attributes' => array(
            'placeholder' => t('Your text will appear here...'),
        ),
        '#suffix' => '</div>',
    );

    return $form;
    }
    print render(produce_form());

    function copy_text($form, &$form_state){
        $form['output']['#value'] = $form_state['values']['input'];
        return $return['output'];
    }
?>

Answer 1

Just two problem with your form:

1. Remove #value element from 'input' element
2. replace return $return['output']; with return $form['output'];

The problem with #value is that the element gets re-initialised on form render.

Here is the working version(copy button) of your code:

<?php


function playground_menu() {
  $items['playground/form'] = array(
    'title' => 'Form',
    'description' => '',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('playground_demo_form'),
    'access arguments' => array('access content'),
  );
  return $items;
}

function playground_demo_form($form, $form_state) {

  $form['input'] = array(
    '#type' => 'textarea',
    '#title' => t('Input text'),
    '#prefix' => '<div id="in-text">',
    '#attributes' => array(
      'placeholder' => t('Enter some text here... '),
    ),
    '#suffix' => '</div>',
  );

  $form['buttons'] = array(
    '#type' => 'fieldset',
    '#title_display' => 'invisible',
    '#attributes' => array(
      'style' => 'border: 0px; text-align: right',
      'class' => array('container-inline'),
    ),
  );

  $form['buttons']['copy'] = array(
    '#type' => 'button',
    '#value' => 'Copy text',
    '#ajax' => array(
      'callback' => 'copy_text',
      'wrapper' => 'out-text',
//          'method' => 'replace',
//          'effect' => 'fade',
    ),
  );

  $form['buttons']['reverse'] = array(
    '#type' => 'button',
    '#value' => t('Reverse text'),
  );

  $form['buttons']['clear'] = array(
    '#type' => 'button',
    '#value' => t('Clear text'),
  );

  $form['output'] = array(
    '#type' => 'textarea',
    '#title' => t('Output text:'),
    '#prefix' => '<div id="out-text">',
    '#value' => '',
    '#attributes' => array(
      'placeholder' => t('Your text will appear here...'),
    ),
    '#suffix' => '</div>',
  );

  return $form;
}

function copy_text($form, $form_state){
  $form['output']['#value'] = $form_state['values']['input'];
  return $form['output'];
}