Получить значение из формы на jQuery
Сегодня мы научимся получать значения из формы на jQuery, вводимые пользователем. Рассмотрим на примере простого калькулятора. У него будет два текстовых поля для ввода чисел, поле Submit для запуска функции сложения и параграф для вывода результата.
1) Как всегда, начнем с HTML разметки.
Все поля формы снабжены идентификаторами, которые привязаны к меткам. Чтобы изобразить кнопку, необязательно использовать тег button. Поле input type="submit" работает аналогичным образом.
<form id="summa">
<label for="numberOne">Число 1</label><br>
<input type="text" id="numberOne" autofocus>
<br>
<label for="numberTwo">Число 2</label><br>
<input type="text" id="numberTwo">
<br><br>
<input type="submit" value="Сумма">
<p><b>Сумма: <span id="summaResult"
class="summaResult"></span></b></p>
</form>
2) Подключим библиотеку jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3) Напишем скрипт калькулятора на jQuery
Обернем скрипт в анонимную функцию, отслеживающую готовность документа для работы. Когда все HTML теги построятся, то скрипт начнет выполняться.
$(document).ready(function(){
...
});
Отловим событие отправки формы (клик по кнопке). Для этого укажем id формы и событие "submit".
$('#summa').on('submit', function(event){
event.preventDefault();
});
После клика по кнопке (во время отправки формы) браузер перезагружается. Это стандартное поведение для данного элемента. Перезагрузку браузера нужно отменить. Для этого передадим в функцию параметр, принимающий в себя event. Event - это событие, которое произошло - в нашем случае, было событие "submit".
Внутри функции, обращаемся к event и далее через точку указываем его метод preventDefault(), который отменяет стандартное поведение формы в браузере. Часто можно увидеть, что вместо event, пишут сокращенно букву (e).
Получим значения полей, вычислим их сумму и ниже выведем результат суммы. Запишем в переменные идентификаторы полей для ввода чисел. Метод val() вернет значения полей, которые введет пользователь.
let numberOne = $('#numberOne').val();
numberTwo = $('#numberTwo').val();
По умолчанию, все вводимые числа пользователями, являются строками. А это значит, что произойдет не математическое действие сложения, а объединение строк. Метод parseInt преобразует содержимое переменных в целые числа.
numberOne = parseInt(numberOne);
numberTwo = parseInt(numberTwo);
Теперь запишем сложение двух переменных в переменную summa.
summa = numberOne + numberTwo;
Выведем результат суммы в теге span с id="summaResult" с помощью метода text(), передав в параметре результат сложения.
$('#summaResult').text(summa);
Однако, если не все поля будут заполнены, то сумма не посчитается и выведется NaN. Чтобы такого не произошло, проверим, все ли поля заполнены. Создадим условие, если первое поле оказалось без числа (isNAN), то передадим ему значение 0. Такую же проверку сделаем и для второго поля.
if (isNaN(numberOne)){
numberOne = 0;
};
if (isNaN(numberTwo)){
numberTwo = 0;
};
Самой используемой библиотекой на реальных проектах, по прежнему остается jQuery. Данный видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" поможет вам в короткие сроки, приобрести навыки работы с востребованными на рынке технологиями.
-
Создано 20.12.2019 11:53:11
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.