Получение данных формы на jQuery
Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.
jQuery – Получения данных формы с помощью метода each
Работу по извлечению данных c элементов формы посредством метода each
рассмотрим на примере.
// создадим пустой объект
var $data = {};
// переберём все элементы input, textarea и select формы с id="myForm "
$('#myForm').find ('input, textearea, select').each(function() {
// добавим новое свойство к объекту $data
// имя свойства – значение атрибута name элемента
// значение свойства – значение свойство value элемента
$data[this.name] = $(this).val();
});
В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each
и добавления в созданный объект данных соответствующих значениям определённых атрибутов (name
и value
) элементов.
При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.
Для отправки данных на сервер (например, по технологии AJAX) можно использовать метод jQuery ajax
.
// AJAX-запрос, который будет отправлен на сервер:
// по адресу: process.php
// методом POST
// содержащий данные $data
// success - это функция, которая будет вызвана после получения ответа от сервера
// (сам ответ доступен посредством аргумента result)
$.ajax({
url: 'process.php',
type: 'post',
data: $data,
success: function(result) {
// действия при получения ответа (result) от сервера
}
});
jQuery - Сериализация формы
В jQuery для получения всех полей формы input
, textarea
и select
можно использовать следующие методы:
- serialize() - предназначен для сериализации данных формы в строку запроса.
имяПоля1=значение1&имяПоля2=значение2...
- serializeArray() - выполняет кодирование элементов формы в массив, состоящий из имен и значений.
[ { name : "имяПоля1", value : "значение1" }, { name : "имяПоля2", value : "значение2" }, ... ]
Методы jQuery serialize
и serializeArray
оличаются друг от друга только форматом вывода данных. Метод serialize
обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray
наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.
Например, рассмотрим, как можно перебрать массив, который вернул метод serializeArray
, с помощью функции each
:
// создание массива объектов из данных формы
var data = $('#myForm').serializeArray();
// переберём каждое значение массива и выведем его в формате имяЭлемента=значение в консоль
$.each(data,function(){
console.log(this.name+'='+this.value);
});
Если же вы собираете данные для того чтобы их передать в метод библиотеки jQuery ajax, то в этом случае неважно, какой из этих методов использовать. Т.к. данный метод может принимать данные, закодированные как с помощью метода serialize
, так и посредством serializeArray
.
Для того чтобы элемент был сериализован методом serialize
или serializeArray
, он должен отвечать критериям "successful controls", указанным в спецификации HTML. Первое условие "successful controls" – это наличие у элемента атрибута name
. Второе, если форма отправлена не с помощью кнопки submit
, то она (имя и значение кнопки) не будет добавлена в возвращаемую методом строку или массив. Третье, значения из элементов checkboxes и radio кнопок (input
с type "radio" или "checkbox") будут включены в набор только в том случае, если они установлены (отмечены). Четвёртое, элементы, которые отключены, обработаны не будут. Т.е. для того чтобы элемент был сериализован, он должен иметь false
в качестве значение свойства disabled
(другими словами, у элемента обязан отсутствовать атрибут disabled
).
Внимание: Методы serialize
и serializeArray
не сериализуют данные из элементов, которые используются для выбора файлов.
Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода serialize
или serializeArray
. Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery ajax
. Ответ, который прийдёт с сервера вставим в элемент с идентиикатором form_result
.
<!-- Элемент для вывода результата -->
<div id="form_result"></div>
<hr>
<!-- HTML-форма -->
<form id="orderCallBack" action="process.php">
Ваше имя: <input type="text" name="name" value=""><br>
Ваш телефон: <input type="text" name="phone" value=""><br>
Ваше сообщение:<br> <textarea name="message"></textarea><br>
<input type="submit" name="submit1" value="Заказать звонок" data-method="serialize"><br>
<input type="submit" name="submit2" value="Заказать звонок" data-method="serializeArray">
</form>
<!-- Сценарий для обработки формы -->
<script>
$(function() {
// при нажатию на кнопку с типом submit
$('#orderCallBack input[type="submit"]').click(function(e) {
// отменяем стандартное поведение браузера
e.preventDefault();
// переменная, которая будет содержать данные серилизации
var $data;
// в зависимости от того какую нажали кнопку, выполняем
// серилизацию тем или иным способом
if ($(this).attr('data-method') == 'serialize') {
$data = $(this).parent('form').serialize();
} else {
$data = $(this).parent('form').serializeArray();
}
// для отправки данных будем использовать технологию ajax
// url - адрес скрипта, с помощью которого будем обрабатывать форму на сервере
// type - метод отправки запроса (POST)
// data - данные, которые необходимо передать серверу
// success - функция, которая будет вызвана, когда ответ прийдёт с сервера
$.ajax({
url: $(this).parent('form').attr('action'),
type: 'post',
data: $data,
success: function(result) {
$('#form_result').html(result);
}
})
});
});
</script>
PHP код, обрабатывающий ajax запрос на сервере:
<?php
// переменная для сохранения результата
$data='';
// переберём массив $_POST
foreach ($_POST as $key => $value) {
// добавим в переменную $data имя и значение ключа
$data .= $key . ' = ' . $value . '
';
}
// выведим результат
echo $data;
?>
Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).
Пожалуйста, укажите, что я делаю неверно? Необходимо получить данные из формы и отправить запрос в php.
С сервера получаю ответ пустой массив. Есть понимание, что параметры из формы не передаются в php файл.
Как разрешить не знаю.
ссылка не .html и .js:
php файл содержит следующий код:
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
$executionStartTime = microtime(true);
$url='http://api.geonames.org/earthquakesJSON?formatted=true&north'. $_REQUEST['north']. '&south='. $_REQUEST['south']. '&east='. $_REQUEST['east']. '&west='. $_REQUEST['west']. '&username=raimondozolins';
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);
$decode = json_decode($result,true);
$output['status']['code'] = «200»;
$output['status']['name'] = «ok»;
$output['status']['description'] = «success»;
$output['status']['returnedIn'] = intval((microtime(true) — $executionStartTime) * 1000). " ms";
$output['data'] = $decode['geonames'];
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>
Спасибо.
jsfiddle.net/RaimOzo/ad85yktn/10/
Мне очень нужно выполнить такую задачу: человек видит поле ввода, вводит туда 8 цифр(не больше, не меньше) после чего жмет кнопку ОК, появляется счетчик, которые идет от 0 до 500 и добавляет по 25 единиц каждые 3 секунды. Интервалы, шаг, потолок нужно иметь возможность изменять в коде.
На данный момент я смог сделать почти всё, но не могу остановить счетчик на 500!( и счетчик запускается даже если поле пустое, а должен запускаться только если в поле введено именно 8 и именно цифр.
Имеется список из чекбоксов:
Как передать в запрос одновременно значения атрибутов name, value и data-color?
Так передает только name и value. Подскажите, как правильно сделать?
З.Ы.
data-* атрибут можно называть, как вздумается?
Наиболее просто это выполнить с помощью формата JSON.
Например (javascript):
На сервере (php):
Из привязки к разделам забираю информацию «ИМЯ, ССЫЛКУ НА РАЗДЕЛ и УРОВЕНЬ ВЛОЖЕННОСТИ». Для каждого инпута присвоил id:
Для того чтоб у каждого элемента была информация о том какие разделы привязаны. После загрузки страницы видим следующее.
делаю запрос:
Как передать данные которые обведены на картинке? Не могу разобраться. Буду очень благодарен вашей помощи, советам и критике!