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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

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

	Отправка данных на сервер только через нажатие кнопки 18.05.2020, 12:55. Показов 7090. Ответов 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 6496 / 3907 / 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 6496 / 3907 / 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 6496 / 3907 / 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

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

Решение