Изучаем Java

Вы здесь: Главная >> Jquery-учебник >> Обработка данных формы в jQuery

Обработка данных формы в jQuery

В этом главе мы будем учиться обрабатывать данные формы в jQuery

 

Текстовое поле и поле ввода пароля в jQuery

В этом разделе мы научимся обрабатывать данные, введенные пользователем в элементы формы. Обработка на стороне клиента позволит снизить нагрузку на сервер за счет отмены отправки данных формы при неправильно введенных значениях. Кроме того, в дальнейшем мы будем изучать технологию Ajax, которая позволяет отправлять данные без перезагрузки страницы. В этом случае заботиться о получении корректных данных формы необходимо самим.

Создадим форму ввода адреса электронной почты и пароля и проверим правильность ввода перед отправкой данных на сервер (листинг 8.1). Если данные введены неправильно, то
выводится сообщение об ошибке;
поле выделяется розовым цветом;
текст в поле выделяется;
отправка формы прерывается.

Листинг 8.1. Проверка правильности ввода почтового адреса и пароля

<html>
<head>
<title>Проверка правильности ввода E-mail и пароля</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":text,:password").css("background-color", "#ffffff");
   $("form").submit(function() {
      var pole1 = $("#pole1");
      var pole2 = $("#pole2");
      pole1.css("background-color", "#ffffff");
      pole2.css("background-color", "#ffffff");
var p = /^[a-z0-9_.-]+@([a-z0-9-]+.)+[a-z]{2,4}$/i;
if (!p.test(pole1.val())) {
         alert("Неверный адрес E-mail");
pole1.css("background-color",
"#ffe4e1").focus().select();
         return false;
      }
      p = /^[a-z0-9_.-]{6,16}$/i;
      if (!p.test(pole2.val())) {
         alert("Неверный пароль");
         pole2.css("background-color",
"#ffe4e1").focus().select();
         return false;
      }
      var msg = "Вы ввели следующие данные:

E-mail: ";
      msg += pole1.val() + "
 Пароль: " + pole2.val();
      alert(msg);
      return true;
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET">
E-mail:<br>
<input type="text" name="pole1" id="pole1"><br>
Пароль:<br>
<input type="password" name="pole2" id="pole2"><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>

В следующем примере (листинг 8.2) рассмотрим применение атрибутов readonly и disabled. Создадим два текстовых поля и кнопку. Второе текстовое поле сделаем доступным только для чтения. Кроме того, изначально кнопка будет неактивна. При введении текста в первое поле кнопка становится активной, а сам текст копируется из первого поля во второе. Если щелкнуть на кнопке, то первое поле очищается и вызывается метод keyup (). За счет этого очищается второе поле, и кнопка деактивизируется. После кнопки добавим еще одно текстовое поле, в котором по умолчанию будет подсказка. При получении полем фокуса удаляем подсказку, а при потере фокуса, если поле осталось пустым, снова ее выводим.

Листинг 8.2. Атрибуты readonly и disabled

<html>
<head>
<title>Атрибуты readOnly и disabled</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":text").css("background-color", "#ffffff");
   $("#pole2").attr("readonly", true);
   $("#btn1").attr("disabled", true);
   $("#pole1").keyup(function() {
      var pole1 = $("#pole1").val();
      var btn1 = $("#btn1");
      if (pole1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled",
true);
      }
      else {
         if (btn1.is(":disabled"))
btn1.removeAttr("disabled");
      }
      $("#pole2").val(pole1);
   });
   $("#btn1").click(function() {
      $("#pole1").val("").keyup();
   });
   $("#pole3").focus(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "[Подсказка]") pole3.val("");
   }).blur(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "") pole3.val("[Подсказка]");
   });
});
//-->
</script>
</head>
<body>
<input type="text" id="pole1"><br>
<input type="text" id="pole2"><br>
<input type="button" value="Очистить" id="btn1"><br><br>
<input type="text" id="pole3" value="[Подсказка]">
</body>
</html>

 

Рассмотрим возможность добавления слов из текстового поля в поле для ввода многострочного текста (листинг 8.3). Добавить слово можно с помощью кнопки Добавить слово или клавиши Enter. Так как по умолчанию нажатие Enter приводит к отправке данных формы, то событие прерывается за счет возврата значения false. При щелчке на кнопке Значение поля выводится текущее значение тега text area .

Листинг 8.3. Добавление слов из текстового поля в поле

 

<pre>
<TEXTAREA>
<html>
<head>
<title>Добавление слов из текстового поля в поле
TEXTAREA</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_click() {
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var txt1 = pole1.val();
   var txt2 = pole2.val();
   if (txt1 != "") {
      pole2.val(txt2 + txt1 + "
");
      pole1.val("").focus();
   }
   else {
      alert("Поле не заполнено!");
pole1.focus();
   }
}
$(document).ready(function() {
   $("#pole1").focus();
   $("form").submit(function() {
var val = $("#pole2").val();
      alert("Текущее значение:
" + val);
      $("#pole1").focus();
      return false;
   });
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET">
Слово:<br>
<input type="text" name="pole1" id="pole1"><br>
<input type="button" value="Добавить слово" id="btn1"><br>
<textarea name="pole2" id="pole2" cols="15" rows="10">
</textarea><br>
<input type="submit" value=" Значение поля ">
</form>
</body>
</html>
</pre>

 

Список с возможными значениями в jQuery

Пример, представленный в листинге 8.4, демонстрирует следующие возможности.

Добавление нового пункта списка. При заполнении первого поля и нажатии клавиши Enter фокус ввода перемещается во второе поле. При заполнений второго поля и нажатии клавиши Enter введенные значения добавляются в список. Вместо клавиши Enter можно воспользоваться кнопкой Добавить.

Получение всех выбранных значений из списка с возможностью множественного выбора.

Применение взаимосвязанных списков и получение значения выбранного пункта. При выборе элемента в первом списке загружаются соответствующие элементы во второй список. При выборе элемента во втором списке выводится сообщение со значением выбранного пункта.

Применение списков вместо гиперссылок. При выборе элемента списка загружается веб-страница, находящаяся по указанному в параметре value URL-адресу.

Листинг 8.4. Обработка списков

<html>
<head>
<title>Пример обработки списков</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var arr = [];
arr[1] = ["Тема1 Элемент1", "Тема1 Элемент2"];
arr[2] = ["Тема2 Элемент1", "Тема2 Элемент2", "Тема2
Элемент3"];
var val = [];
val[1] = ["1", "2"];
val[2] = ["3", "4", "5"];
function f_click() {
   // Добавление пункта в список
var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var text1 = pole1.val();
   var text2 = pole2.val();
   if (text1 != "" && text2 != "") {
      var sel1 = $("#select1").get(0);
      var i = sel1.length++;
      sel1.options[i].text = text1;
      sel1.options[i].value = text2;
      pole1.val("");
      pole2.val("");
      pole1.focus();
   }
   else {
      alert("Поле не заполнено!");
pole1.focus();
   }
}
$(document).ready(function() {
   // Добавление пункта в список
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         $("#pole2").focus();
         return false;
      }
   });
   $("#pole2").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
   // Список со множественным выбором
$("#btn2").click(function() {
      var msg = "";
      $("#select2 option:selected").each(function() {
         msg += this.value + " - " + this.text + "
";
      });
      if (msg == "") alert("Выбранных пунктов нет");
else alert(msg);
   });
   // Взаимосвязанные списки
   $("#select3").change(function() {
      var index = this.value;
      var count = arr[index].length;
      var el = $("#select4").get(0);
      el.length = count;
      for (i=0; i<count; i++) {
         el.options[i].value = val[index][i];
         el.options[i].text = arr[index][i];
      }
   });
   $("#select4").change(function() {
      var msg = "";
      $("#select4 option:selected").each(function() {
         msg = "Значение: " + this.value;
         msg += "
Текст: " + this.text;
      });
      alert(msg);
   });
   // Переход на указанный сайт
   $("#select5").change(function() {
      var url = $(this).val();
      if (url != 0) {
         window.location.href = url;
      }
   });
});
//-->
</script>
</head>
<body>
<b>Добавление пункта в список:</b><br><br>
Текст пункта:<br>
<input type="text" id="pole1"><br>
Значение пункта:<br>
<input type="text" id="pole2"><br>
<select id="select1">
</select><br>
<input type="button" value="Добавить" id="btn1"><br><br>

<b>Список со множественным выбором:</b><br><br>
<select id="select2" size="5" multiple>
<option value="1" selected>Элемент1</option>
<option value="2">Элемент2</option>
<option value="3">Элемент3</option>
<option value="4">Элемент4</option>
<option value="5">Элемент5</option>
<option value="6">Элемент6</option>
</select><br>
<input type="button" value="Значения списка"
id="btn2"><br><br>

<b>Взаимосвязанные списки:</b><br><br>
<select id="select3" size="5">
<option value="1">Тема1</option>
<option value="2">Тема2</option>
</select><br>
<select id="select4">
<option value="1" selected>Тема1 Элемент1</option>
<option value="2">Тема1 Элемент2</option>
</select><br><br>

<b>Переход на указанный сайт:</b><br><br>
<select id="select5">
<option value="0" selected>----------------</option>
<option value="http://www.mail.ru/">Mail.ru</option>
<option value="http://www.rambler.ru/">Рамблер</option>
</select><br>
</body>
</html>

 

 

Флажок и переключатели в jQuery

В листинге 8.5 рассматривается получение значений флажков и переключателей. Первая форма демонстрирует проверку установки флажка и получение выбранного переключателя в группе. Если флажок установлен, то выводим значение параметра value. Вторая форма демонстрирует поиск установленных флажков в группе, а также возможность установки и снятия всех флажков сразу.

Листинг 8.5. Обработка флажков и переключателей

<html>
<head>
<title>Обработка флажков и переключателей</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var msg = "";
      var elem = $("#check1");
      if (elem.is(":checked")) {
         msg = "Флажок установлен
";
         msg += "Значение: " + elem.val() + "
";
      }
      else {
         msg = "Флажок снят
";
      }
      var value1 = $("input[id=`radio1`]:checked").val();
      if (value1 == "male") {
         msg += "Пол: Мужской
";
      }
      else {
         msg += "Пол: Женский
";
      }
      alert(msg);
   });
   $("#c0").click(function() {
      if ($("#c0").is(":checked")) {
         $("#frm2 :checkbox").attr("checked", true);
      }
      else {
         $("#frm2 :checkbox").removeAttr("checked");
      }
   });
   $("#btn2").click(function() {
      var msg = "";
      $("#frm2 input[id=`c[]`]:checked").each(function() {
         msg += "Значение: " + this.value + "
";
      });
      if (msg == "") alert("Флажки не установлены");
else alert(msg);
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="checkbox" name="check1" id="check1" value="yes"
checked>
Текст<br><br>
Укажите ваш пол:<br>
<input type="radio" name="radio1" id="radio1" value="male"
checked>
Мужской
<input type="radio" name="radio1" id="radio1"
value="female">Женский
<br><br>
<input type="button" value="Вывести значения" id="btn1">
</form>
<form action="test.php" method="GET" id="frm2">
<input type="checkbox" name="c0" id="c0"> Отметить/Снять
все<br>
<input type="checkbox" name="c[]" id="c[]" value="1"> Пункт
1<br>
<input type="checkbox" name="c[]" id="c[]" value="2"> Пункт
2<br>
<input type="checkbox" name="c[]" id="c[]" value="3"> Пункт
3<br>
<input type="button" id="btn2" value="Вывести значения">
</form>
</body>
</html>

 

Обработка щелчка на кнопке в jQuery

В приведенном ниже примере (листинг 8.6) кнопка изначально неактивна. При вводе в текстовое поле кнопка активизируется. При щелчке на кнопке текст, введенный в текстовое поле, отображается на кнопке. Текстовое поле очищается, и кнопка вновь деактивизируется.

Листинг 8.6. Обработка щелчка на кнопке

<html>
<head>
<title>Обработка щелчка на кнопке</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#txt1");
      this.value = elem.val();
      elem.val("");
      $(this).attr("disabled", true);
   });
   $("#txt1").keyup(function() {
var txt1 = $("#txt1").val();
      var btn1 = $("#btn1");
if (txt1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled",
true);
      }
      else {
         if (btn1.is(":disabled"))
btn1.removeAttr("disabled");
      }
   });
});
//-->
</script>
</head>
<body>
<input type="text" id="txt1"><br>
<input type="button" value="Изменить текст на кнопке"
id="btn1" disabled>
</body>
</html>

Обычная командная кнопка может быть вставлена в веб-страницу не только с помощью тега input, но и с помощью парного тега button. В качестве примера выведем порядковый индекс кнопки, на которой был сделан щелчок (листинг 8.7).

Листинг 8.7. Вывод порядкового индекса кнопки, на которой был сделан щелчок

<html>
<head>
<title>Вывод порядкового индекса нажатой кнопки</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $(":button").click(function() {
      alert("Индекс: " + $(":button").index(this));
   });
});
//-->
</script>
</head>
<body>
<input type="button" value="Кнопка 1"><br>
<input type="button" value="Кнопка 2"><br>
<button>Кнопка 3</button><br>
<button>Кнопка 4</button>
</body>
</html>

 

Получение всех значений формы в jQuery

Библиотека jQuery позволяет получить все данные формы за один раз и подготовить их для передачи на сервер. Для этого предназначены следующие методы.

serialize() — получает все данные формы и составляет запрос, который можно отправить с помощью технологии AJAX. Метод позволяет обработать данные не только всей формы, но и отдельных элементов.

$(,,#btnl") .click (function ()   {
alert($("#txtl").serialize());
});
<input type="text” name=”txtl” id="txtl" value=”Текст"><br>
<input type="button" id="btnl" value="Получить значение">
Результат:
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82

serializeArray () — возвращает массив всех данных формы. Первым элементом является порядковый номер элемента внутри формы. Нумерация начинается с 0. Второй элемент представляет собой объект с двумя свойствами:
name — название поля в форме;
value — значение поля.

Метод позволяет обработать данные не только всей формы, но и отдельных элементов.

$("#btnl").click(function()   {
var arr = $("#txtl").serializeArray();
$("#divl")
.html("Поле:   "+arr [0] . name+" <br>Значение :   "+arr [0] .
value) ;
});
<input type="text" name="txtl" id="txtl" value="TeKCT"><br>
<input type="button" id="btnl" value="Получить значение"><br>
<div id="divl"></div>

Результат:
Поле: txtl
Значение: Текст

$.param(Объект) — позволяет преобразовать объект в строку, предназначенную к отправке на сервер. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Не требует предварительного нахождения коллекции элементов.

$("#btnl").click(function()   {
$("#divl").text($.param($("#txtl").serializeArray()));
});
<input type="text" name="txtl" id="txtl" value="Текст"><br>
<input type="button" id="btnl" value="Получить значение"><br>
<div id="divl” ></div>
Результат:
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82

В качестве параметра можно передать коллекцию элементов. В качестве примера получим значения всех текстовых полей.

$("#btnl").click(function()   {
$("#divl").text($.param($(":text") ) ) ;
});
<input type="text" name="txtl" id="txtl" value="1"><br> <input type="text" name="txt2" id="txt2" value="2"><br> <input type="button" id="btnl" value="Получить значения"><br> <div id="divl"></div>
Результат:
txtl=l&txt2=2

Функция позволяет обработать не только данные формы, но и обычные объекты.

var obj = {var1:"Текст", var2:5};
alert($.param(obj));
Результат:
varl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&var2=5

Пример обработки данных всей формы разными методами приведен в листинге 8.8.

Листинг 8.8. Методы serialize(), serializeArray() и $.param()

<html>
<head>
<title>Методы serialize(), serializeArray() и
$.param()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").text($("#frm1").serialize());
      var arr = $("#frm1").serializeArray();
      var txt = "";
      for (var i=0, count=arr.length; i<count; i++) {
         txt += i + " => " + arr[i].name + " = ";
         txt += arr[i].value + "<br>";
      }
      $("#div2").html(txt);
      $("#div3").text($.param(arr));
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="text" name="txt1" id="txt1" value="Текст"><br>
<input type="hidden" name="hdn1" id="hdn1" value="1">
<input type="checkbox" name="check1" id="check1" value="yes">
Текст<br>
Укажите ваш пол:<br>
<input type="radio" name="radio1" id="radio1" value="male"
checked>Мужской
<input type="radio" name="radio1" id="radio1"
value="female">Женский
<br>
<input type="checkbox" name="c[]" id="c[]" value="1"> Пункт
1<br>
<input type="checkbox" name="c[]" id="c[]" value="2"> Пункт
2<br>
<input type="checkbox" name="c[]" id="c[]" value="3"> Пункт
3<br>
</form>
<input type="button" id="btn1" value="Получить
значения"><br><br>
<b>serialize():</b><br>
<div id="div1"></div>
<b>serializeArray():</b><br>
<div id="div2"></div>
<b>$.param():</b><br>
<div id="div3"></div>
</body>
</html>

Результат при значениях по умолчанию: serialize():

txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&hdnl=l&radiol=male serializeArray():
0 => txtl = Текст
1 => hdnl = 1
2 => radiol = male $.param():
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&hdnl=l&radiol=male

 


Разделы

Главная страница
Карта сайта

Партнеры сайта