Задачка, которая решается в js?

Question

ART4 @ART4

JavaScript

Задачка, которая решается в js?

Добрый день, сам себе задачу поставил, но что то тупняк.
Имеется форма обратная связь, при нажатие Отправить, форма должна скрыться (obj.parentNode.style.display = "none";), но при этом должна пройти проверку, правильно ли ввели данные, если нет, то показывает ошибки. Если всё ОК, отправляет данные и показывает сообщение, мол Мы отправили ваше письмо.

Форму сделал всё как обычно, но если я в кнопку введу:

function hideme(obj) {
        obj.parentNode.style.display = "none";
    }

Потом в саму кнопку вставлю:
onclick="hideme(this)"
Понятно что скроется сразу и не ясно, что там и как. Как решать такое?

Вопрос задан более трёх лет назад
138 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Сергей Соколов @sergiks Куратор тега JavaScript

проверка где происходит? – на клиенте или на сервере?

Написано более трёх лет назад

ART4 @ART4 Автор вопроса

Сергей Соколов, на сервере

<?php

require_once __DIR__ . '/mailer/Validator.php';
require_once __DIR__ . '/mailer/ContactMailer.php';

if (!Validator::isAjax() || !Validator::isPost()) {
	echo 'Доступ запрещен!';
	exit;
}

$name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
$email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
$phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
$message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;

if (empty($name) || empty($email) || empty($phone) || empty($message)) {
	echo 'Все поля обязательны для заполнения.';
	exit;
}

if (!Validator::isValidEmail($email)) {
	echo 'E-mail не соответствует формату.';
	exit;
}

if (!Validator::isValidPhone($phone)) {
	echo 'Телефон не соответствует формату.';
	exit;
}

if (ContactMailer::send($name, $email, $phone, $message)) {
	echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
} else {
	echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
}
exit;

Написано более трёх лет назад

Решения вопроса 2

2 комментария

ART4 @ART4 Автор вопроса

У меня вот так

<form action="handler.php" id="contactForm" method="post">
                    <input class="field" id="name" name="name" placeholder="firstname" required type="text">
                    <br>
                    <input class="field" id="email" name="email" placeholder="lastname" required type="text">
                    <br>
                    <input class="field" id="phone" name="phone" placeholder="Phone" required type="text">
                    <br>
                    <textarea class="field" id="message" name="message" placeholder="Write your message here..."
                              type="text"></textarea>
                    <br><br>
                    <button id="button" name="btn_submit" type="submit" value="SEND">SEND</button>
                    <div class="result">
                        <span id="answer"></span>
                        <span id="loader"><img alt="" src="img/loader.gif"></span>
                    </div>
                </form>

и отправка на сервер

// Отправляет данные из формы на сервер и получает ответ
    $('#contactForm').on('submit', function(event) {
        
        event.preventDefault();

        var form = $('#contactForm'),
            button = $('#button'),
            answer = $('#answer'),
            loader = $('#loader');

        $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: form.serialize(),
            beforeSend: function() {
                answer.empty();
                button.attr('disabled', true).css('margin-bottom', '20px');
                loader.fadeIn();
            },
            success: function(result) {
                loader.fadeOut(300, function() {
                    answer.text(result);
                });
                form.find('.field').val('');
                button.attr('disabled', false);
            },
            error: function() {
                loader.fadeOut(300, function() {
                    answer.text('Произошла ошибка! Попробуйте позже.');
                });
                button.attr('disabled', false);
            }
        });
    
    });

Написано более трёх лет назад

Владимир Скибин @megafax

ART4, И что в коде Вам не так?

Написано более трёх лет назад

1 комментарий

ART4 @ART4 Автор вопроса

У меня вот так

<form action="handler.php" id="contactForm" method="post">
                    <input class="field" id="name" name="name" placeholder="firstname" required type="text">
                    <br>
                    <input class="field" id="email" name="email" placeholder="lastname" required type="text">
                    <br>
                    <input class="field" id="phone" name="phone" placeholder="Phone" required type="text">
                    <br>
                    <textarea class="field" id="message" name="message" placeholder="Write your message here..."
                              type="text"></textarea>
                    <br><br>
                    <button id="button" name="btn_submit" type="submit" value="SEND">SEND</button>
                    <div class="result">
                        <span id="answer"></span>
                        <span id="loader"><img alt="" src="img/loader.gif"></span>
                    </div>
                </form>

и отправка на сервер

// Отправляет данные из формы на сервер и получает ответ
    $('#contactForm').on('submit', function(event) {
        
        event.preventDefault();

        var form = $('#contactForm'),
            button = $('#button'),
            answer = $('#answer'),
            loader = $('#loader');

        $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: form.serialize(),
            beforeSend: function() {
                answer.empty();
                button.attr('disabled', true).css('margin-bottom', '20px');
                loader.fadeIn();
            },
            success: function(result) {
                loader.fadeOut(300, function() {
                    answer.text(result);
                });
                form.find('.field').val('');
                button.attr('disabled', false);
            },
            error: function() {
                loader.fadeOut(300, function() {
                    answer.text('Произошла ошибка! Попробуйте позже.');
                });
                button.attr('disabled', false);
            }
        });
    
    });

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 4 часа назад
- 20 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 8 часов назад
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 10 часов назад
- 111 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 12 часов назад
- 43 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 107 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 83 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 22 апр.
- 80 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

10000 руб./за проект

Программа (скрипт) для автоматизации торговли Solana

25 апр. 2024, в 00:45

100 руб./в час

Телеграм-Бот для выдачи конфигов VPN (VLESS/Reality)

25 апр. 2024, в 00:32

10000 руб./за проект

проверка где происходит? – на клиенте или на сервере?
Сергей Соколов, на сервере
<?php require_once __DIR__ . '/mailer/Validator.php'; require_once __DIR__ . '/mailer/ContactMailer.php'; if (!Validator::isAjax() || !Validator::isPost()) { echo 'Доступ запрещен!'; exit; } $name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null; $email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null; $phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null; $message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null; if (empty($name) || empty($email) || empty($phone) || empty($message)) { echo 'Все поля обязательны для заполнения.'; exit; } if (!Validator::isValidEmail($email)) { echo 'E-mail не соответствует формату.'; exit; } if (!Validator::isValidPhone($phone)) { echo 'Телефон не соответствует формату.'; exit; } if (ContactMailer::send($name, $email, $phone, $message)) { echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.'; } else { echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.'; } exit;

Answer 1 · 2019-07-10 15:10:59

У Вас должен быть такой алгоритм:

1. Валидируем данные, если что то не так - то прерываем цепочку и показываем ошибки на полях для ввода.
2. Отправляем запрос с данными из формы. Дожидаемся ответа. Если в ответе написано что все ок- то текущую форму скрываем, показываем окно со "спасибо". Если в ответе приходят ошибки - эту форм скрываем и показываем окно с "что то пошло не так, попробуйте позже". Если не дождались ответа или ответ "кривой" - то тоже скрываем екущую и показываем что что то не так.

Все валидации и отправки у Вас должны быть не на кнопке а на событие формы submit

Answer 2 · 2019-07-10 15:15:42

По нажатию на кнопку создаете событие. В нем проводите валидацию введенных данных. Далее обычная конструкция if/else. Если все ок - возвращаете сообщение, и через setTimeout скрываете форму. в блоке else, если не прошла выалидация, генерируете ошибку и выводите в форму, с подстветкой некорректных данных

Задачка, которая решается в js?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт