Как создать AJAX форму

Главные вкладки

Аватар пользователя HelloMufacalo HelloMufacalo 12 марта 2017 в 18:32

Здравствуйте, требуется создать AJAX форму для обратной связи
Нашел вот этот урок https://niklan.net/blog/127
Создал, вроде как модуль сам работает, валидация полей работает, ноя не пойму как мне отправить письмо, точнее как продебажить запрос.

Собственно вот мой класс для формы

<?phpclass ContactFormAjax extends FormBase
{
    const FORM_ID = "contact_ajax_form";
    private $mailClient;

    /**
     * {inheritdoc}.
     */
    public function getFormId()
    {
        return self::FORM_ID;
    }

    /**
     * {inheritdoc}.
     */
    public function buildForm(array $form, FormStateInterface $form_state)
    {
        $form['name'] = [
            '#title' => 'Name',
            '#type' => 'textfield',
            '#label_display' => 'after',
            '#attributes' => array('class' => array('form-element__field form-element__field--textfield')),
            '#required' => TRUE,
        ];
        $form['email'] = [
            '#title' => 'Email',
            '#label_display' => 'after',
            '#type' => 'email',
            '#attributes' => array('class' => array('form-element__field form-element__field--email')),

            '#required' => TRUE,
        ];
        $form['message'] = [
            '#title' => t('Message'),
            '#attributes' => array('class' => array('form-element__field form-element__field--textarea')),
            '#type' => 'textarea',
            '#label_display' => 'after',
            '#required' => TRUE,
        ];

        $form['submit'] = [
            '#type' => 'submit',
            '#name' => 'submit',
            '#value' => t('Submit this form'),
            '#ajax' => [
                'callback' => '::ajaxSubmitCallback',
                'event' => 'click',
                'progress' => [
                    'type' => 'throbber',
                ],
            ],
        ];
        $form['#attributes'] = array('class' => array('form', 'form--control', 'form--contact'));
        return $form;
    }

    private function setMailClient()
    {
        $mailClientConfig = \Drupal::config('contact_form_ajax.settings');
     //   kint($mailClientConfig);
        $this->mailClient = \Drupal::service('custom.php_mailer');
        $this->mailClient->isSMTP();
        $this->mailClient->SMTPDebug = 2;
        $this->mailClient->Debugoutput = 'html';
        $this->mailClient->Host = 'smtp.gmail.com';
        $this->mailClient->Port = 587;
        $this->mailClient->SMTPSecure = 'tls';
        $this->mailClient->SMTPAuth = true;
        $this->mailClient->Username = "username@gmail.com";
        $this->mailClient->Password = "yourpassword";
        $this->mailClient->setFrom('from@example.com', 'First Last');
        $this->mailClient->addReplyTo('replyto@example.com', 'First Last');
        $this->mailClient->addAddress('whoto@example.com', 'John Doe');
        $this->mailClient->Subject = 'PHPMailer GMail SMTP test';
        $this->mailClient->msgHTML("<h1>HELLO</h1>");
        $this->mailClient->AltBody = 'This is a plain-text message body';
        if (!$this->mailClient->send()) {
            echo "Mailer Error: " . $this->mailClient->ErrorInfo;
        } else {
            echo "Message sent!";
        }

    }

    /**
     * {inheritdoc}
     */
    public function submitForm(array &$form, FormStateInterface $form_state)
    {
       return $this->setMailClient();
    }

    /**
     * {inheritdoc}
     */
    public function ajaxSubmitCallback(array &$form, FormStateInterface $form_state)
    {
        $ajax_response = new AjaxResponse();
        $message = [
            '#theme' => 'status_messages',
            '#message_list' => drupal_get_messages(),
            '#status_headings' => [
                'status' => t('Status message'),
                'error' => t('Error message'),
                'warning' => t('Warning message'),
            ],
        ];
        $messages = \Drupal::service('renderer')->render($message);
        $ajax_response->addCommand(new HtmlCommand('#form-system-messages', $messages));
        return $ajax_response;
    }

}?>

Запрос идет с такими параметрами

«http://domena.net/main?ajax_form=1&_wrapper_format=drupal_ajax»

При незаполненных данных назад возвращается какой-то JSON с ошибкой и остальными параметрами, а когда отправляешь полностью, что-то думает и назад выплевывает главную страницу и все.

Непонятно как дебажить эту форму. Знатоки подскажите пожалуйста как правильно обрабатывать запрос и верно ли написан у меня код.

Еще сразу спрошу, каким образом можно сделать, чтобы вместо AJAX валидации была сначала стандартная HTML5 валидация ?

Спасибо

Комментарии

Аватар пользователя HelloMufacalo HelloMufacalo 13 марта 2017 в 15:36

Спасибо за ответ, мне как Вы можете видеть у меня уже есть строчка дебага с помощью Kint. Я понимаю как все работает, немного не понятно как мне получить данные засабмиченные, то бишь $_POST запрос. За примеры спасибо, посмотрел, но так же сделано как и у меня. Но проблема в том что не могу поймать входящий запрос, пробовал смотреть сорцы движка, но еще больше если честно запутался как это все хендлится.
И мне валидация не нужна по сути, я знаю что можно повесить на change. Мне вообще желательно валидация для начала HTML5.
Да и вообще главный вопрос не в валидации, а как продебажить входящий запрос.
Подскажите пожалуйста правильно ли у меня форма вообще сделана ?
И конкретно если то в чем разница между submitForm и ajaxSubmitCallback в данном случае ?

Аватар пользователя sas@drupal.org sas@drupal.org 14 марта 2017 в 7:06

Продебажить можно например

ob_start();
print_r($xxx);
$plain = ob_get_contents();
ob_end_clean();

if ($handle = fopen($_SERVER['DOCUMENT_ROOT'] . base_path() . "sites/default/files/tmp/temp_".  microtime() .".txt", 'w+')) {
fwrite($handle, $plain. "\n");
fclose($handle);
}

Разница сабмитов в том что второй срабатывает на ajax e