Обработка формы

@Serj190492 · Регистрация: 19.02.2015

Студворк — интернет-сервис помощи студентам

Всем здравствуйте!

Никак не могу победить обработку формы. Проблема еще в том, что JS я не знаю, только PHP.

В общем, есть форма на HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
                <form class="news-letter" method="post">
                    <p class="alert-success"></p>
                    <p class="alert-warning"></p>
 
                    <div class="subscribe-hide">
                        <input class="form-control" type="email" id="subscribe-email" name="subscribe-email" placeholder="Ваш Email"  required>
                        <button  type="submit" id="subscribe-submit" class="btn"><i class="fa fa-envelope"></i></button>
                        <span id="subscribe-loading" class="btn"> <i class="fa fa-refresh fa-spin"></i> </span>
                        <div class="subscribe-error"></div>
                    </div><!-- /.subscribe-hide -->
                    <div class="subscribe-message"></div>
                </form><!-- /.news-letter -->

Есть её обработчик на PHP. Не знал, как правильно в JSON вывести, но вроде с этим справился...

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
require_once '../../models/functions.php';
require_once '../../models/M_MSQL.php';
 
$mail = input(['EMAIL']);
 
if($mail == '')
    return false;
 
$db = M_MSQL::Instance();
 
if ($db->Insert('subscribe', $mail)){
    $ret = array('result' => 'success');
    echo json_encode($ret);
}

А вот JS код, который это всё обрабатывает:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Subscribe
  -------------------------------------------------------------------*/
    $(".news-letter").ajaxChimp({
        callback: mailchimpResponse,
        url: "http://algoritm.96.lt/main/php/subscribe.php?"
    });
 
    function mailchimpResponse(resp) {
         if(resp.result === 'success') {
         
            $('.alert-success').html(resp.msg).fadeIn().delay(3000).fadeOut();
            
        } else if(resp.result === 'error') {
            $('.alert-warning').html(resp.msg).fadeIn().delay(3000).fadeOut();
        }  
    };
 
 
 
 
    /* Subscribe End
    -------------------------------------------------------------------*/

Вот JS код с этими функциями:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
(function ($) {
    "use strict";
    $.ajaxChimp = {
        responses: {
            "Мы отправили вам подтверждение по электронной почте": 0,
            "Пожалуйста, введите значение": 1,
            "Адрес электронной почты должен содержать один знак @": 2,
            "Доменная часть адреса электронной почты является недействительной (текст после @)": 3,
            "Имя пользователя в адресе электронной почты является недействительным (часть до @)": 4,
            "Этот адрес электронной почты недействителен. Пожалуйста, введите реальный адрес электронной почты.": 5
        }, translations: {en: null}, init: function (selector, options) {
            $(selector).ajaxChimp(options)
        }
    };
    $.fn.ajaxChimp = function (options) {
        $(this).each(function (i, elem) {
            var form = $(elem);
            var email = form.find("input[type=email]");
            var label = form.find("label[for=" + email.attr("id") + "]");
            var settings = $.extend({url: form.attr("action"), language: "en"}, options);
            var url = settings.url.replace("/post?", "/post-json?").concat("&c=?");
            form.attr("novalidate", "true");
            email.attr("name", "EMAIL");
            form.submit(function () {
                var msg;
 
                function successCallback(resp) {
                    if (resp.result === "success") {
                        msg = "Мы отправили вам подтверждение по электронной почте";
                        label.removeClass("error").addClass("valid");
                        email.removeClass("error").addClass("valid")
                    } else {
                        email.removeClass("valid").addClass("error");
                        label.removeClass("valid").addClass("error");
                        var index = -1;
                        try {
                            var parts = resp.msg.split(" - ", 2);
                            if (parts[1] === undefined) {
                                msg = resp.msg
                            } else {
                                var i = parseInt(parts[0], 10);
                                if (i.toString() === parts[0]) {
                                    index = parts[0];
                                    msg = parts[1]
                                } else {
                                    index = -1;
                                    msg = resp.msg
                                }
                            }
                        } catch (e) {
                            index = -1;
                            msg = resp.msg
                        }
                    }
                    if (settings.language !== "en" && $.ajaxChimp.responses[msg] !== undefined && $.ajaxChimp.translations && $.ajaxChimp.translations[settings.language] && $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]) {
                        msg = $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]
                    }
                    label.html(msg);
                    label.show(2e3);
                    if (settings.callback) {
                        settings.callback(resp)
                    }
                }
 
                var data = {};
                var dataArray = form.serializeArray();
                $.each(dataArray, function (index, item) {
                    data[item.name] = item.value
                });
                $.ajax({
                    url: url,
                    data: data,
                    success: successCallback,
                    dataType: "jsonp",
                    error: function (resp, text) {
                        console.log("mailchimp ajax submit error: " + text)
                    }
                });
                var submitMsg = "Submitting...";
                if (settings.language !== "en" && $.ajaxChimp.translations && $.ajaxChimp.translations[settings.language] && $.ajaxChimp.translations[settings.language]["submit"]) {
                    submitMsg = $.ajaxChimp.translations[settings.language]["submit"]
                }
                label.html(submitMsg).show(2e3);
                return false
            })
        });
        return this
    }
})(jQuery);

В итоге после отправки формы в консоль выводит mailchimp ajax submit error: parsererror, в строке console.log("mailchimp ajax submit error: " + text) из кода под спойлером...

Во вкладке NETWORK по запросу выводит {"result":"success"}

Кроме вас надеятся не на кого, выручайте!

@Para bellum · 19.10.2016, 19:54

Файл "assets/js/jquery.ajaxchimp.min.js", это:

JavaScript
1
dataType: "jsonp",

Замените на

JavaScript
1
dataType: "json",

@Serj190492 · 20.10.2016, 05:33 **[ТС]**

Сообщение от Para bellum

Замените на

Сделано. Без изменений.

@Para bellum · 20.10.2016, 07:10

В том же файле уберите:

JavaScript
1
.concat("&c=?")

Из-за этого ожидается получение и вызов callback, а возвращается JSON. Отсюда и parseerror.
И ещё: сейчас у Вас скрипт в ответе ожидает помимо "result" -- "msg". "msg" тоже в JSON отдавайте, в файле subscribe.php

@Serj190492 · 20.10.2016, 11:44 **[ТС]**

Сообщение от Para bellum

"msg" тоже в JSON отдавайте, в файле subscribe.php

А разве в том же файле вот в этом месте не задается значение msg?

JavaScript
1
2
3
4
5
6
form.submit(function () {
                var msg;
 
                function successCallback(resp) {
                    if (resp.result === "success") {
                        msg = "Мы отправили вам подтверждение по электронной почте";

@Para bellum · 20.10.2016, 15:46

Там ещё и обращение к resp.msg есть.
Ошибка ушла?

@Serj190492 · 20.10.2016, 15:59 **[ТС]**

Сообщение от Para bellum

Ошибка ушла?

Если оставить так

PHP
1
2
3
4
5
if ($db->Insert('subscribe', $mail)){
    $ret = array('result' => 'success');
    //$msg = array('msg' => 'Подписка оформлена!');
    echo json_encode($ret);
}

в консоли ошибок нет, в остальном ситуация та же.

Добавлено через 2 минуты
Пробовал так:

PHP
1
2
3
4
5
if ($db->Insert('subscribe', $mail)){
    $ret = array('result' => 'success');
    $msg = array('msg' => 'Подписка оформлена!');
    echo json_encode([$ret, $msg]);
}

Тогда:
В консоли ошибок нет.
Во вкладке network -> preview

Code
1
2
3
[{result: "success"}, {msg: "Подписка оформлена!"}]
0:{result: "success"}
1:{msg: "Подписка оформлена!"}

На странице по-прежнему никаких изменений.

@Para bellum · 20.10.2016, 18:28

Нет, одномерный массив надо:

PHP
1
2
3
4
5
6
7
8
if ($db->Insert('subscribe', $mail)){
    $response = array(
        'result' => 'success',
        'msg'    => 'Подписка оформлена!'
    );
    
    echo json_encode($response);
}

@Serj190492 · 20.10.2016, 20:41 **[ТС]**

Para bellum, огромное спасибо! Теперь всё)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	20.10.2016, 15:46
	Там ещё и обращение к `resp.msg` есть. Ошибка ушла? 1

@Serj190492 160 / 159 / 59 Регистрация: 19.02.2015 Сообщений: 830
	20.10.2016, 20:41 [ТС]
	Para bellum, огромное спасибо! Теперь всё) 0

Обработка формы

Решение