Як перевірити та подати форму за допомогою AJAX?


12

Я створив веб-форму за допомогою API API. Я використовую параметр #AJAXполя, щоб додати перевірку AJAX до кожного поля.

Чи можливо перевірити та подати форму за допомогою AJAX, не завантажуючи сторінку. Якщо перевірка не вдалася, я хочу показати повідомлення про помилку, і якщо перевірка пройшла успішно, я хочу показати повідомлення (в ідеалі в лайтбоксі) і скинути поля форми.

Мій код поки що:

$form['name'] = array(
    '#type' => 'textfield',
    '#title' => t('Name'),
    '#default_value' => '',
    '#maxlength' => '128',
    '#required' => TRUE,
    '#ajax' => array(
        'callback' => '_validate_name',
        'wrapper' => 'name-error-icon-container',
        'method' => 'html',
        'effect' => 'none',
        'progress' => array(
            'message' => NULL,
        ),
    ),
);

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
    '#ajax' => array(
        'callback' => '_handle_form_submit',
        'effect' => 'fade',
    ),
);

Функції зворотного виклику виглядають приблизно так:

function _validate_name($form, $form_state) {

    if ($form_state['values']['name'] != '') {
    $output = 'OK';
    }
    else {
      $output = 'Enter a value';
    }

   return $output;

}

function _handle_form_submit($form, $form_state) {
}

Але я не впевнений, що повинно перейти в _handle_form_submitфункцію перевірки, а потім або повернути повідомлення, або надіслати форму та скинути поля?

Відповіді:


-2

Модуль прикладів має форму ajax, на яку можна посилатися, як і на багато інших. Ось посилання на приклад форми ajax у сховищі коду, але я пропоную завантажити, щоб у будь-якому випадку переглянути самостійно реалізацію.


1
Вибачте - я не можу знайти прикладів перевірки ajaxy у прикладі модуля
ErichBSchulz

Так, це роздута відповідь саме там. Я фактично також не бачу ніякої перевірки. Кожен зворотний дзвінок просто повертає форму.
AlxVallejo

2
Як це прийнята відповідь? Він навіть не говорить про те, куди шукати в наданому посиланні (і у будь-якому випадку в цьому випадку немає прикладу перевірки).
robinmitra

Нове посилання на приклад форми ajax: cgit.drupalcode.org/examples/tree/ajax_example/…
Brentg

Я зробив свою відповідь вікі, оскільки це прийнято, але поганої якості
rocketeerbkw

11

Я знаю, що це питання лежить вже пару років, але я не відчуваю, що жодна з інших відповідей справді отримує сенс подання форми Drupal 7 ajax, тому я спробую пояснити це.

У вашій формі ваша форма також може працювати без аяксу, згідно з належною практикою, ваш обробник програм для відправлення Ajax не повинен нічого робити, крім повернення форми. Все інше має бути у вашій валідації та функції подання.

function ex_form($form, $form_state) {
  $form['name'] = array(
    '#type' => 'textfield',
     '#title' => t('Name'),
     '#default_value' => '',
     '#maxlength' => '128',
     '#required' => TRUE,
  );

  $form['submit'] = array(
   '#type' => 'submit',
   '#value' => 'Submit',
   '#ajax' => array(
     'callback' => 'ex_form_ajax_handler',
     'effect' => 'fade',
   ),
  );
}

function ex_form_submit(&$form, &$form_state) {
  // Submit logic - runs when validation is ok
  // You can alter the form here to be just a markup field if you want.
}

function ex_form_validate(&$form, &$form_state) {
  // Validation logic - invalidate using form_set_error() or form_error()
}

function ex_form_ajax_handler(&$form, &$form_state) {
  return $form;
}

Мабуть, найкраща відповідь
Андрій Козоріз

Ви хочете сказати, що методи перевірки та надсилання автоматично будуть викликані для зворотного виклику AJAX на кнопці подання? У якому порядку називають методи?
Джефф

3

Я думаю, що повідомлення від maxtorete 17 жовтня 2011 року, здається, є більш повним прикладом із використанням обох form_validate()таform_submit()

(Я ще не перевіряв цього.)

Також відповідь Джошуа Стюардсона при переповненні стека є хорошим робочим прикладом:

function dr_search_test_form($form, &$fstate) {

  $form['wrapper'] = [
    '#markup' => '<div id="test-ajax"></div>',
  ];

  $form['name'] = [
    '#type'     => 'textfield',
    '#required' => TRUE,
    '#title'    => 'Name',
  ];

  $form['submit'] = [
    '#type'  => 'submit',
    '#value' => 'Send',
    '#ajax'  => [
      'callback' => 'dr_search_test_form_callback',
      'wrapper'  => 'test-ajax',
      'effect'   => 'fade',
    ],
  ];

  return $form;
}

function dr_search_test_form_callback($form, &$fstate) {

  return '<div id="test-ajax">Wrapper Div</div>';
}

function dr_search_test_form_validate($form, &$fstate) {

  form_set_error('name', 'Some error to display.');
}

Джошуа вказує на те, що повідомлення про помилки перевірки #ajax['wrapper']повністю замінюють елемент, тому зворотній виклик потребує повторного введення цього елемента під час його заміни.


коли це посилання визнає недійсним це знак, питання вже не актуальне!
ErichBSchulz

2
голосування вниз - трохи суворе - навіть якщо це було лише посилання - це посилання на відповідь - не просто посилання на модуль, на який немає відповіді - на відміну від прийнятої відповіді !! у будь-якому разі я надав деякий робочий код, коли мене вимагали заборонити.
ErichBSchulz

дякую @ mbomb007 - виправлено зараз
ErichBSchulz

2

Загалом, перевірка та обробка форми подачі повинні відбуватися у звичайних зворотних викликах _validate () та _submit (). Ідея полягає в тому, що форми все одно повинні працювати без аякса.

Насправді єдине, що повинно робити #ajax callback - це повернути ту частину форми, яку слід замінити, відповідно до визначеної обгортки.


2
Будьте обережні зі своїм формулюванням. Зворотний виклик повинен повернути ЦІЛУ ФОРМУ, перебудовану з form_state. Повернення ЧАСТИНИ форми є найбільшою помилковою думкою щодо Drupal / AHAH. Дивіться katbailey.net/blog/ahah-drupal-may-it-one-day-live-its-acronym .

7
Це питання стосується Drupal 7 ... AHAH більше не існує в Drupal. У #ajaxфункції зворотного дзвінка в Drupal 7 ви повертаєте лише ту частину форми, яку ви хочете замінити.
Клайв

1
@ChrisD. Як згадував Клайв, це Drupal 7, і зараз у нас є приємна рамка ajax, яка дозволяє робити всілякі химерні речі, такі як повернення декількох окремих частин форми тощо.
Бердір

@Clive Я натрапив на ще одне питання, пов’язане з ajax, drupal.stackexchange.com/a/142316/19205, де автор згадував, що "форму потрібно будувати заново, після зміни елементів_рахунку", що також для d7. Мене плутають, яке твердження є правильним (не сперечаючись, хто правий :-)). Не могли б ви поділитися інформацією про це?
киранкінг

0

Є два способи

1)

function abc_form_validate(&$form, &$form_state) {
  // Validation logic - invalidate using form_set_error() or form_error()
}

function abc_form_ajax_handler(&$form, &$form_state) {
  return $form;
}

2) Прикладний модуль http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402


Зараз я не знаю, наскільки точна ваша відповідь, але форматування її, безумовно, потребує вдосконалення (якщо ви не хочете, щоб її видаляли модератори). Перевірте сторінку довідки, якщо потрібно, або просто скористайтесь деякими кнопками редактора wysiwyg, щоб принаймні позначити ваш код як ... код.
Pierre.Vriens

Неправильно відформатований код - це не привід видаляти відповідь. Для його виправлення потрібен користувач із правом редагування.
kiamlaluno

Ось я прийшов у відчаї, шукаючи рішення, лише через 2 роки після цієї відповіді натиснув на посилання, яке веде мене до неіснуючого дерева / гілки. Будь ласка, не використовуйте посилання на відповіді, або якщо ви вставляєте вміст під час написання.
Макк

0

У моєму випадку, використовуючи submitтип викликав форму завжди підкорятися, тому я змінив його до buttonс #ajaxзазначенням. Потім мені довелося провести перевірку в зворотному звороті ajax.

Я робив панель ctools; Я не знаю, чи це в цьому грає.

function mymodule_form($form, &$form_state) {
  ...
  $form['button'] = array(
    '#type' => 'button',
    '#value' => t('Subscribe'),
    '#ajax' => array(
      'callback' => '_mymodule_ajax',
    ),
  );
  return $form;
}

function _mymodule_ajax($form, &$form_state) {
  if ( ! valid_email_address($form_state['values']['email']) ) {
    form_set_error($form, t('Please enter a valid email address.'));
  } else {
    $form = array(
      '#markup' => t('You have subscribed.'),
    );
  }
  return $form;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.