Гость
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Перехват и отправка POST-формы / 12 сообщений из 12, страница 1 из 1
28.03.2020, 18:13
    #39941898
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Есть такая форма:
Код: html
1.
2.
3.
4.
5.
6.
7.
<form method="post">
<input type="text" name="fld1">
<input type="text" name="fld2" value="v2">
<button type="submit" name="action" value="cmd1">cmd1</button>
<button type="submit" name="action" value="cmd2">cmd2</button>
<button type="submit" name="action" value="cmd3">cmd3</button>
</form>


У формы три submit-кнопки, и в зависимости от того, какая кнопка была нажата, на сервер приходит разное значение параметра action.

Мне нужно отправить форму скриптом, не допуская перезагрузки страницы.
Для этого я назначаю обработчик для onsubmit, а в обработчике указываю event.preventDefault().
Теперь мне нужно в скрипте вручную закодировать поля и отправить на сервер.
А как мне узнать, какая именно кнопка вызвала отправку формы?
...
Рейтинг: 0 / 0
28.03.2020, 19:37
    #39941912
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.,
...
Рейтинг: 0 / 0
29.03.2020, 08:45
    #39941956
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.,

Обрабатывай события onclick на кнопках.
по event.target.value определяешь кнопку.
Не забудь
event.preventDefault()

Вот так как то

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
const form = document.querySelector('form')

const handlerclick = (event) => {
//   event.target.value - какая кнопка
	event.preventDefault()
// остальная обработка		
	form.submit()   // реальный submit
}
	
document.querySelectorAll('form>button[type=submit]').forEach(but => but.onclick=handlerclick)
...
Рейтинг: 0 / 0
29.03.2020, 09:01
    #39941957
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
onclick это понятно, но оно не срабатывает, когда пользователь просто нажимает Enter на поле ввода.
...
Рейтинг: 0 / 0
29.03.2020, 09:11
    #39941958
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.,

В этом случае будет отправляться как будто нажали первую кнопку.
...
Рейтинг: 0 / 0
29.03.2020, 09:14
    #39941960
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Браузер обычно передает value кнопки с минимальным tabindex.
Понял.
...
Рейтинг: 0 / 0
29.03.2020, 09:34
    #39941961
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.
Браузер обычно передает value кнопки с минимальным tabindex.

При этом еще кнопка должна иметь type=submit (это по умолчанию, если не указано другого)

Если не хочешь, что бы по enter на input отправлялась форма, поставь кнопкам type=button
...
Рейтинг: 0 / 0
29.03.2020, 12:09
    #39941986
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Сейчас проверить не могу, но вроде бы при type=button в форму не передается value.
...
Рейтинг: 0 / 0
29.03.2020, 13:22
    #39942008
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.
Сейчас проверить не могу, но вроде бы при type=button в форму не передается value.

Не передается.
Но если ты сам отправляешь форму в обработчике, то можно использовать скрытое поле, и ему присваивать значение из кнопки, которая была нажата.
...
Рейтинг: 0 / 0
29.03.2020, 13:48
    #39942013
Дмитрий Мух
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.
onclick это понятно, но оно не срабатывает, когда пользователь просто нажимает Enter на поле ввода.

Срабатывает, легко убедиться:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<!doctype html>
<html>
<head></head>
<body>
  <form method="post" onsubmit="alert('onsubmit'); return false">
    <input name="fld1" type="text">
    <input name="fld2" type="text" value="v2">
    <button name="action" type="submit" onclick="alert('cmd1 clicked')" value="cmd1">cmd1</button>
    <button name="action" type="submit" onclick="alert('cmd2 clicked')" value="cmd2">cmd2</button>
    <button name="action" type="submit" onclick="alert('cmd3 clicked')" value="cmd3">cmd3</button>
  </form>
</body>
</html>
...
Рейтинг: 0 / 0
30.03.2020, 10:30
    #39942163
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
Alibek B.,

.. можно же в скрипте вообще временную форму создавать, указывая ей и нужный action и нужные поля, потом её append(), submit() и remove() ...
...
Рейтинг: 0 / 0
30.03.2020, 10:47
    #39942167
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перехват и отправка POST-формы
voraa
можно использовать скрытое поле, и ему присваивать значение из кнопки, которая была нажата.

Да, так и сделал.

Дмитрий Мух
Срабатывает, легко убедиться:

Действительно.
Я видимо при проверке что-то сделал неправильно, у меня submit вызывался, а click не было.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Перехват и отправка POST-формы / 12 сообщений из 12, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]