Отправка данных на сервер только через нажатие кнопки

@AmanShygaibaev · Регистрация: 30.04.2020

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

Здравствуйте , возник вопрос, как сделать так, чтобы данные на сервер отправлялись только путем нажатия на кнопку, без использования Enter в текстовом поле(то есть, чтобы оно игнорировалось), то есть как сделать, так чтобы не генерировалось событие click на кнопке с submit, путем нажатия Enter?

@amr-now · 18.05.2020, 13:11

Здравствуйте.

HTML5
1
2
3
<form>
<button type="button" class="btn">Отправить</button>
</form>

JavaScript
1
2
3
4
5
6
$("form").submit(function (e) {e.preventDefault(); });
$(".btn").click(btn_click);
 
function btn_click (e) {
// необходимые действия по отправке
}

@AmanShygaibaev · 18.05.2020, 13:17 **[ТС]**

Я заранее извиняюсь за глупый вопрос, но необходимые действия по отправке подразумевают блоки кода по типу <input> ? То есть я туда записываю в функцию html код?
Спасибо за ответ выше!

@amr-now · 18.05.2020, 13:20

AmanShygaibaev,
Необходимые действия разделяются на два варианта:
- будем менять адрес в адресной строке браузера. Сайт cyberforum.ru меняет адрес в адресной строке браузера.
- не будем менять адрес в адресной строке браузера.

@AmanShygaibaev · 18.05.2020, 13:36 **[ТС]**

Вы имеете ввиду будем ли мы направлять все данные в программу обработчик( я имею ввиду это эквивалентно <form action="php файл"?)

@amr-now · 18.05.2020, 13:47

AmanShygaibaev, сайт многостраничник или одностраничник.

Добавлено через 6 минут
Вот одно из описаний разницы: https://cloudmakers.ru/sravnen... eb-sajtov/

Там описание корявенькое. Вообще одностраничник это SPA. Single Page Application.

@AmanShygaibaev · 18.05.2020, 13:51 **[ТС]**

Сайт многостраничник, на одной странице есть список студентов(страница №1), поделенный на группы, моей задачей является написать редактор(уже другая страница(то есть №2)), через который можно добавлять группы, а в них студентов, а потом это выводить на странице(страница№1), проблема в том, что когда я ввожу название группы и нажимаю Enter,чтобы создался блок с группой, то сразу же перекидывает на страницу обработчик(страница №3), а остальное(студентов или другие группы) я ввести не могу, так как , если просто обновить страницу с редактором , то группы со студентами исчезают(редактор написан на vue)

@amr-now · 18.05.2020, 13:55

Сообщение от AmanShygaibaev

Сайт многостраничник

Значит, вариант с

HTML5
1
<form action="php файл" method="POST">

JavaScript
1
2
3
4
5
6
$("form").submit(function (e) {e.preventDefault(); });
$(".btn").click(btn_click);
 
function btn_click (e) {
this.form.submit();
}

@AmanShygaibaev · 18.05.2020, 13:57 **[ТС]**

После внедрения этого js кода , все данные будут отправляться после нажатия определенной кнопки с class="btn",так?
И извиняюсь за такое кол-во вопросов

@amr-now · 18.05.2020, 13:58

AmanShygaibaev, да. С полным обновлением страницы. Как cyberforum.ru

@AmanShygaibaev · 18.05.2020, 14:00 **[ТС]**

большое вам спасибо !

@AmanShygaibaev · 24.05.2020, 21:43 **[ТС]**

Если кому интересно, есть более простой метод, как отменить событие click onsubmit при нажатии enter.

HTML5
1
 onkeydown="return event.key != 'Enter'"

Использовать это, как атрибут к тегу <form>

@amr-now · 25.05.2020, 17:00

AmanShygaibaev, боевое скрещивание inputMask c validate:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</head>
<body>
    <form name="form1" action="secondPage.php" method="GET">
        <input type="text" name="textname" value="textvalue" >
        <button type="button" class="btn">Отправить</button>
    </form>
    <script src="scripts/app.js"></script>
</body>
</html>

scripts/app.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// https://javascript.ru/forum/jquery/48848-problema-sovmestnogo-ispolzovaniya-masked-input-i-jquery-validation.html
$("input[name=textname]").inputmask("+7(999)999-9999", {
    "clearIncomplete": false
});
$("form").submit(e => e.preventDefault());
$.validator.addMethod("minlenghtphone", (value, element) => value.replace(/\D+/g, '').length > 10, "Маловато циферок будет!");
$.validator.addMethod("requiredphone", (value, element) => value.replace(/\D+/g, '').length > 1, "Заполните это поле!!!");
let validator = $("form").validate({
    rules: {
        textname: {
            requiredphone: true,
            minlenghtphone: true
        }
    }
});
 
$(".btn").click(btn_click);
function btn_click() {
    $("form").trigger("submit");
    if (validator.checkForm())
        $("form").submit();
}

AmanShygaibaev, отменять обработку Enter нельзя. Иначе валидации не будет по Enter.

@amr-now · 25.05.2020, 17:08

AmanShygaibaev, боевое скрещивание inputMask c validate:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</head>
<body>
    <form name="form1" action="secondPage.php" method="GET">
        <input type="text" name="textname" value="textvalue" >
        <button type="button" class="btn">Отправить</button>
    </form>
    <script src="scripts/app.js"></script>
</body>
</html>

scripts/app.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// https://javascript.ru/forum/jquery/48848-problema-sovmestnogo-ispolzovaniya-masked-input-i-jquery-validation.html
$("input[name=textname]").inputmask("+7(999)999-9999", {
    "clearIncomplete": false
});
$("form").submit(e => e.preventDefault());
$.validator.addMethod("minlenghtphone", (value, element) => value.replace(/\D+/g, '').length > 10, "Маловато циферок будет!");
$.validator.addMethod("requiredphone", (value, element) => value.replace(/\D+/g, '').length > 1, "Заполните это поле!!!");
let validator = $("form").validate({
    rules: {
        textname: {
            requiredphone: true,
            minlenghtphone: true
        }
    }
});
 
$(".btn").click(btn_click);
function btn_click() {
    $("form").trigger("submit");
    if (validator.checkForm())
        $("form").submit();
}

AmanShygaibaev, отменять обработку Enter нельзя. Иначе валидации не будет по Enter.

Добавлено через 8 минут
(Хотя нет. В принципе обойтись можно. Поведение будет чуть другим.)

@AmanShygaibaev · 25.05.2020, 17:54 **[ТС]**

Понял, еще раз спасибо

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42

	Отправка данных на сервер только через нажатие кнопки 18.05.2020, 12:55. Показов 7173. Ответов 14 Метки отправка данных, отправка формы, javascript для начинающих (Все метки) Здравствуйте , возник вопрос, как сделать так, чтобы данные на сервер отправлялись только путем нажатия на кнопку, без использования Enter в текстовом поле(то есть, чтобы оно игнорировалось), то есть как сделать, так чтобы не генерировалось событие click на кнопке с submit, путем нажатия Enter? 1

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42
	18.05.2020, 13:17 [ТС]
	Я заранее извиняюсь за глупый вопрос, но необходимые действия по отправке подразумевают блоки кода по типу <input> ? То есть я туда записываю в функцию html код? Спасибо за ответ выше! 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	18.05.2020, 13:20
	AmanShygaibaev, Необходимые действия разделяются на два варианта: - будем менять адрес в адресной строке браузера. Сайт cyberforum.ru меняет адрес в адресной строке браузера. - не будем менять адрес в адресной строке браузера. 0

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42
	18.05.2020, 13:36 [ТС]
	Вы имеете ввиду будем ли мы направлять все данные в программу обработчик( я имею ввиду это эквивалентно <form action="php файл"?) 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	18.05.2020, 13:47
	AmanShygaibaev, сайт многостраничник или одностраничник. Добавлено через 6 минут Вот одно из описаний разницы: https://cloudmakers.ru/sravnen... eb-sajtov/ Там описание корявенькое. Вообще одностраничник это SPA. Single Page Application. 0

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42
	18.05.2020, 13:51 [ТС]
	Сайт многостраничник, на одной странице есть список студентов(страница №1), поделенный на группы, моей задачей является написать редактор(уже другая страница(то есть №2)), через который можно добавлять группы, а в них студентов, а потом это выводить на странице(страница№1), проблема в том, что когда я ввожу название группы и нажимаю Enter,чтобы создался блок с группой, то сразу же перекидывает на страницу обработчик(страница №3), а остальное(студентов или другие группы) я ввести не могу, так как , если просто обновить страницу с редактором , то группы со студентами исчезают(редактор написан на vue) Миниатюры 0

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42
	18.05.2020, 13:57 [ТС]
	После внедрения этого js кода , все данные будут отправляться после нажатия определенной кнопки с class="btn",так? И извиняюсь за такое кол-во вопросов 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	18.05.2020, 13:58
	AmanShygaibaev, да. С полным обновлением страницы. Как cyberforum.ru 1

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42
	18.05.2020, 14:00 [ТС]
	большое вам спасибо ! 0

@AmanShygaibaev 4 / 4 / 1 Регистрация: 30.04.2020 Сообщений: 42
	25.05.2020, 17:54 [ТС]
	Понял, еще раз спасибо 0

Отправка данных на сервер только через нажатие кнопки

Решение