Html post on click

HTML submit button onclick code

An HTML button is created using the following HTML code:

input type='submit' name="submit" value="Post Form" /> 

Or using the button tag like this:

button type="submit" >Post the formbutton> 

In both the cases, pressing the button will submit the parent form without the need for handling the onclick event separately.

If you want to validate the form before submitting, the best event handler would be the onsubmit event of the form. Example:

Returning false from the onsubmit event handler of the form stops the form being submitted.

So the submit button has a meaningful existance only within a form

If, you want a plain simple button that triggers an event when the button is pressed/clicked, use the button tag with type=submit like this

button type="button" onclick="my_button_click_handler">Click this buttonbutton> script> function my_button_click_handler()  alert('Button Clcked'); >  script> 

See Also

Источник

Отправить POST данные при нажатии на ссылку, отличия методов GET и POST

13.07.18 ИТ / HTML 9067

При разработке сайта, обычно возникает потребность отправки тех или иных данных на сервер, на сегодняшний день самыми популярными методами запроса для отправки таких данных являются методы GET и POST. Существуют еще и другие методы, например, PUT и DELETE – но они малоиспользуемые.

Самый простой в использовании метод – это конечно же GET. Он используется при большинстве запросов страниц сайта, к примеру, при их просмотре через браузер. Когда пользователь набирает адрес в строке или нажимает на ссылку на сайте – с большой долей вероятности используется метод GET. Этот метод можно использовать для отправки небольших данных, например, строк текста. Недостаток – все данные видны в строке браузера.

Второй по популярности – метод POST, отличается от GET он расширенными возможностями отправки данных. Часто используется для загрузки файла или получения данных с заполненной веб-формы. Данные отправляются незаметно для пользователя. В отличии от метода GET, POST в основном используется для отправки данных на сервер, в то время как GET чаще применяют для получения информации от сервера. Метод POST следует использовать для отправки конфиденциальных данных.

Кратко рассмотрев отличия методов GET и POST, перейдем к решению задачи отправки данных методом POST при нажатии на ссылку. Такая потребность может часто возникнуть при создании различного функционала на разрабатываемом проекте.

При клике на ссылку, созданную тегом a, нет возможности сменить тип запроса, как это можно сделать при отправки данных формой, созданной тегом form. Ведь в случае с формой, там можно указать атрибут method, тег a же не имеет такого атрибута. Поэтому при отправке данных при клике на ссылку, все данные будут видны в строке браузера, в виде параметров, что несомненно портит вид веб-приложения и отменяет в некотором роде чистые ссылки ЧПУ.

Для решения проблемы отправки данных методов POST, можно использовать обычную форму form с кнопкой input type=submit. Эту кнопку визуально можно сделать похожей на обычную ссылку, при помощи стилей CSS. Задача решена, форма выглядит как обычная ссылка, а данные отправляются незаметно, методом POST. Такой подход часто можно использовать на разных страницах, чтобы избежать создания дополнительных адресов.

 .form-test < font: 14px Arial; >.form-test input  Пример 

В браузере данный код будет выглядеть слежующим образом:

Как видно, это несложное решение для отправки данных методом POST. Таким способом можно отправить различные данные: файлы, текст, сериализованные данные. Правда для отправки файла по клике на ссылку, нужно сначала чтобы пользователь выбрал этот файл у себя на ПК — это также можно сделать, разместив отдельно поле input type=file и связав его с формой атрибутом form у этого тега input. Визуально будет выглядеть как будто элементы не связаны между собой, но будет достигнут нужный результат.

Что касается сериализованных данных, то можно предварительно подготовить их при помощи специальных функций языка, например, на PHP можно использовать json_encode и serialize. После этого, эти данные просто вставляются в скрытое поле формы hidden. Таким способом, например, можно отправить массив PHP методом POST на другую страницу.

В этой статье мы увидели, что методы GET и POST имеют отличия и сходства. Также были показаны примеры, как можно практически любые данные отправить методом POST при клике на ссылку. Это часто может пригодится при разработке различных сайтов и веб-приложений.

Источник

Как сделать POST запрос по нажатию ссылки?

Ссылка же в браузере. Значит нужно делать средствами браузера.

На чистом яаваскрипте на нажатии кнопки

Но скорей всего у вас наверно есть jQuery или еще какая библиотека так что можно использовать $.ajax

Если вы хотите осуществить переход при нажатии, можно создать спрятанную форму и сабмитить ее

Sergey Romanov , да, есть jQuery . Если вас, не затруднит, приведите, пожалуйста пример, когда по ссылки осуществлется POST запрос на /example и переход на эту страницу

Linkk  

Sergey Romanov, почему-то не работает, при нажатии на ссылку, я вижу что вызывается javascript:void(0), но перехода не осуществляется

Froggyweb, перехода на страницу ‘/example’. Я достаточно точно, на мой взгляд, вверху сформулировал, что хочу реализовать. Читайте выше: «когда по ссылки осуществлется POST запрос на /example и переход на эту страницу«)

Froggyweb , буду очень вам благодарен, если приведете пример, как это сделать. Желательно полный код, так как я не силен в JS.

Просто не очень понятна задача. тебе нужно отправить пост запрос и при успешнлй обработке перенаправить страницу на другой адрес.
непонятно. Редирект в этом случае лучше делать на бэке

ajax запрос написал Sergey Romanov

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

Не удаляется последний элемент Multiselect модуля Carbon Fields для WordPress?

Источник

Форма отправки JavaScript при нажатии

1. Отправьте форму, щелкнув ссылку и используя функцию submit() в JavaScript
2. Отправьте форму, нажав кнопку и используя функцию submit() в JavaScript

В этом руководстве будет обсуждаться, как отправить форму с помощью функции submit() в JavaScript.

Отправьте форму, щелкнув ссылку и используя функцию submit() в JavaScript

В JavaScript вы можете создать форму, используя тег form , вы можете дать форме идентификатор, используя атрибут id , и после этого вы должны выбрать метод для отправки вашей формы, например, вы можете отправить форму при нажатии ссылки или кнопки. Теперь есть два метода отправки формы, и вы можете сделать это либо внутри HTML-кода, используя атрибут onclick , либо внутри JavaScript. Например, давайте отправим форму внутри HTML, используя атрибут onclick . См. Код ниже.

form id="FormId">  a href="FormLink" id = "LinkID" onclick="document.getElementById('FormId').submit();"> SubmitForm a>  form> 

Вы можете изменить идентификатор form и идентификатор ссылки в приведенном выше коде в соответствии с вашими требованиями. Этот метод не рекомендуется, поскольку вы смешиваете HTML с кодом JavaScript. Вы также можете сделать это отдельно в JavaScript, используя идентификатор формы и ссылки. Например, давайте проделаем вышеуказанную операцию, используя отдельный JavaScript. См. Код ниже.

var myform = document.getElementById("FormId"); document.getElementById("LinkId").addEventListener("click", function ()   myform.submit(); >); 

Этот метод рекомендуется, поскольку HTML и JavaScript находятся в отдельных файлах. Обратите внимание, что вы должны использовать идентификатор формы и идентификатор ссылки, которые вы определили в HTML, чтобы получить эти элементы в JavaScript. Форма будет отправлена ​​при нажатии на ссылку.

Отправьте форму, нажав кнопку и используя функцию submit() в JavaScript

Вы можете использовать кнопку для отправки формы. Существует два метода отправки формы, и вы можете сделать это либо внутри HTML-кода, используя атрибут onclick , либо внутри JavaScript. Например, давайте отправим форму внутри HTML, используя атрибут onclick . См. Код ниже.

form id="FormId">  button id = "ButtonId" onclick="document.getElementById('FormId').submit();"> SubmitForm button>  form> 

Подобно описанному выше методу, этот метод не рекомендуется, поскольку вы смешиваете HTML с кодом JavaScript. Проделаем описанную выше операцию, используя отдельный JavaScript.

var myform = document.getElementById("FormId"); document.getElementById("ButtonId").addEventListener("click", function ()   myform.submit(); >); 

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

Сопутствующая статья — JavaScript Form

Источник