In this tutorial, we are going to learn about how to clear an input field value in react by clicking a form submit button.
We mostly clear the input field values whenever we submit a form or resetting the cluttered form.
Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:
А jQuery связывается с ним по атрибуту id=»text» (селектор #text).
Получить содержимое текстового поля
// Добавить текст в начало
$(‘#text’).val(‘before ‘ + $(‘#text’).val());
// Добавить текст в конец
$(‘#text’).val($(‘#text’).val() + ‘ after’);
Очистить поле
Метод remove() удаляет элементы из DOM включая дочерние.
Добавить/удалить CSS класс
Метод addClass() добавляет в атрибут class=»» значение, а removeClass() удаляет его.
Метод toggleClass() работает как переключатель, при первом вызове, если у элемента нет такого класса то добавляет, при повторном удаляет его.
// Добавить класс
$(‘#text’).addClass(‘active’);
// Удалить класс
$(‘#text’).removeClass(‘active’);
// Переключить класс
$(‘#text’).toggleClass(‘active’);
Фокусировка
// Заблокировать
$(‘#text’).prop(‘disabled’, true);
// Разблокировать
$(‘#text’).prop(‘disabled’, false);
Подсчет количества символов
Для предотвращения XSS, SQL-инъекций и других атак, данные полученные из форм нужно чистить. Простое экранирования кавычек не достаточно, нужен комплексный подход по типу данных.
Для таких целей был написан статический класс clean.php
Использование класса
Далее описание функций с примерами:
Логический тип (0 или 1)
Подходит для сhekbox, возвращает 1 или 0. Если значение пусто, то возвращается значение $default.
Для очистки одномерных массивов есть функции:
Clean::boolArray($value, $default); – вернет очищенный массив.
Clean::boolList($value, $default, $separator); – вернет строку значений через разделитель (по умолчанию ,).
Целое положительное число
Для очистки численных значений.
Функции для массива:
Clean::intArray($value, $default);
Clean::intList($value, $default, $separator);
Десятичные дроби
Может быть отрицательным, заменяет , на ..
Clean::floatArray($value, $default);
Clean::floatList($value, $default, $separator);
Цена
Clean::priceArray($value, $default);
Clean::priceList($value, $default, $separator);
Строка
- Двойные пробелы заменяются на один;
- Спецсимволы заменяются на мнемоники;
Clean::strArray($value, $default);
Clean::strList($value, $default, $separator);
Строка 1
Строка 2
Clean::textArray($value, $default);
Clean::textList($value, $default, $separator);
HTML
Не рекомендуется использовать на фронте сайта т.к. только экранируются кавычки.
ЧПУ
Делает транслит для URL.
Clean::sefArray($value, $default);
Clean::sefList($value, $default, $separator);
Имя файла
Очищает название файла от запрещенных символов.
Clean::filenameArray($value, $default);
Clean::filenameList($value, $default, $separator);
Unix Timestamp
Преобразует дату в Unix Timestamp.
Clean::timeArray($value, $default);
Clean::timeList($value, $default, $separator);
Как очистить поле?
Всем привет.
Получается мое поле input и textarea переделано на отображение картинок. Input не отправляется на enter. В общем, суть, что как я только ни пытался очистить поле — не получается. Есть вариант, что после отправки формы обновить поле. Как сделать обновление поля по клику? onclik=’что тут написать, чтобы очистилось поле с id=blabla’? Или есть универсальный вариант очистки?
Спасибо.
Попрубуйте:$(‘#messageInput’).val(»).change();
Очищаем значение и генерируем событие «change». Это может сработать если сторонние скрипты, которые вы используете, слушают событие «change» на инпуте.
А вообще читайте доки этих скриптов.
onclick=»document.getElementById(‘blabla’).value = »»
На онклик зануляйте текст: $wysiwyg_value.text(»)
03 мар. 2023, в 15:22
10000 руб./за проект
03 мар. 2023, в 15:08
1000 руб./за проект
03 мар. 2023, в 14:29
Clearing the input field values
If you are using controlled components, it means your form (input) data is controlled by the react state, so that you can clear an input field value by assigning an empty string » to the react state.
Here is an example:
React useState
email setEmail
password setPassword
e
consoleemail password
// clearing the values
form
input
type
placeholder
valueemail
onChange etargetvalue
input
type
placeholder
valuepassword
onChange etargetvalue
form
Similarly, if you are using uncontrolled components where your form input data is handled by dom itself instead of react state where you can clear it like this.
React
e
consoleemailvalue passwordvalue
// clearing the values
emailvalue passwordvalue
form
input
type
placeholder
input
type
placeholder
button type onClickhandleSubmit
Login
button
form
