Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
1

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

18.05.2020, 12:55. Показов 2064. Ответов 14

Здравствуйте , возник вопрос, как сделать так, чтобы данные на сервер отправлялись только путем нажатия на кнопку, без использования Enter в текстовом поле(то есть, чтобы оно игнорировалось), то есть как сделать, так чтобы не генерировалось событие click на кнопке с submit, путем нажатия Enter?
1
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.05.2020, 12:55
Ответы с готовыми решениями:

Отправка данных на сервер при нажатии кнопки
Не отправляются данные по нажатию. Сервер отправляет код страницы: std::stringstream as; as...

Добавление в базу данных через нажатие кнопки
вопрос вот в чем, при добавлении в БД из формы, в таблице создается новая строка но все значения...

Отправка данных JSON через POST-запрос на сервер https
Прошу помочь, может кто имел опыт отправки и получения данных посредством json через POST-запрос на...

ListView после обновлений данных также обратно через нажатие кнопки вернуть старые данные назад
Я работаю с ассортиментом для продаж ,которого JSON файла сохраняю локально.В ListView я передаю...

14
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
18.05.2020, 13:11 2
Здравствуйте.
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) {
// необходимые действия по отправке
}
0
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
18.05.2020, 13:17  [ТС] 3
Я заранее извиняюсь за глупый вопрос, но необходимые действия по отправке подразумевают блоки кода по типу <input> ? То есть я туда записываю в функцию html код?
Спасибо за ответ выше!
0
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
18.05.2020, 13:20 4
AmanShygaibaev,
Необходимые действия разделяются на два варианта:
- будем менять адрес в адресной строке браузера. Сайт cyberforum.ru меняет адрес в адресной строке браузера.
- не будем менять адрес в адресной строке браузера.
0
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
18.05.2020, 13:36  [ТС] 5
Вы имеете ввиду будем ли мы направлять все данные в программу обработчик( я имею ввиду это эквивалентно <form action="php файл"?)
0
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
18.05.2020, 13:47 6
AmanShygaibaev, сайт многостраничник или одностраничник.

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

Там описание корявенькое. Вообще одностраничник это SPA. Single Page Application.
0
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
18.05.2020, 13:51  [ТС] 7
Сайт многостраничник, на одной странице есть список студентов(страница №1), поделенный на группы, моей задачей является написать редактор(уже другая страница(то есть №2)), через который можно добавлять группы, а в них студентов, а потом это выводить на странице(страница№1), проблема в том, что когда я ввожу название группы и нажимаю Enter,чтобы создался блок с группой, то сразу же перекидывает на страницу обработчик(страница №3), а остальное(студентов или другие группы) я ввести не могу, так как , если просто обновить страницу с редактором , то группы со студентами исчезают(редактор написан на vue)
0
Миниатюры
Отправка данных на сервер только через нажатие кнопки   Отправка данных на сервер только через нажатие кнопки  
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
18.05.2020, 13:55 8
Лучший ответ Сообщение было отмечено amr-now как решение

Решение

Цитата Сообщение от 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();
}
0
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
18.05.2020, 13:57  [ТС] 9
После внедрения этого js кода , все данные будут отправляться после нажатия определенной кнопки с class="btn",так?
И извиняюсь за такое кол-во вопросов
0
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
18.05.2020, 13:58 10
AmanShygaibaev, да. С полным обновлением страницы. Как cyberforum.ru
1
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
18.05.2020, 14:00  [ТС] 11
большое вам спасибо !
0
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
24.05.2020, 21:43  [ТС] 12
Если кому интересно, есть более простой метод, как отменить событие click onsubmit при нажатии enter.
HTML5
1
 onkeydown="return event.key != 'Enter'"
Использовать это, как атрибут к тегу <form>
1
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
25.05.2020, 17:00 13
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.
0
Эксперт JS
5417 / 3129 / 1514
Регистрация: 14.06.2018
Сообщений: 5,900
25.05.2020, 17:08 14
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 минут
(Хотя нет. В принципе обойтись можно. Поведение будет чуть другим.)
0
4 / 4 / 1
Регистрация: 30.04.2020
Сообщений: 42
25.05.2020, 17:54  [ТС] 15
Понял, еще раз спасибо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.05.2020, 17:54

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Кнопки реагируют только на двойное нажатие, почему?
При одинарном нажатии на кнопку окно не открывается, только при двойном. Как исправить? #include...

Отправка файла на сервер по нажатию кнопки
Мне дали задание написать прогу чтоб при нажатии на кнопку прога брала фаил из c:/delphi/1.txt и...

Не работает вывод textBox1 через метод. Только через нажатие button1_Click
Не работает вывод textBox1 через метод. Только через нажатие button1_Click НЕ РАБОТАЕТ public...

Разрешить нажатие кнопки только когда заполнены все поля
Подскажите что подкорректировать в коде чтобы кнопка была активна только после заполнения всех...

Нажатие кнопки через время
Как сделать, что бы через определенный промежуток времени была нажата кнопка. Например через 10...

Нажатие кнопки на сервере через клиент
Среда разработки Rad studio C++Builder 10 Seattle, есть приложение на android устройстве (клиент) и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.