jQuery - 폼 이벤트

폼 이벤트에는 다양한 이벤트를 제공합니다.

이벤트	설 명
.blur()	폼 요소에서 포커스를 잃었을 때
.focus()	폼 요소가 포커스 되었을 때
.focusin()	폼 요소(또는 자식요소)가 포커스 되었을 때
.focusout()	폼 요소(또는 자식요소)가 포커스를 잃었을 때
.change()	폼 요소의 입력 값이 변경되었을 때
.select()	해당 요소의 내용을 선택했을 때
.submit()	폼 내용을 전송할 때
.serialize()	폼 데이터를 URL 인코딩된 텍스트 문자열로 만듬
.serializeArray()	폼 데이터를 객체 배열로 만듬
$.param(obj)	.serializeArray() 형식의 배열을 .serialize() 형식으로 변환
.val()	선택한 요소의 value 값을 얻거나 설정

.blur(), .focus()

입력 필드에 포커스를 주었을 때는 배경색이 노란색으로 변하고, 포커스를 잃었을 때는 빨간색으로 변합니다.

<script>
$(function(){
 // 포커스되었을 때
 $("#user").focus(function(){
   $(this).css("background", "yellow");
 });

 // 포커스를 옮겼을 때
 $("#user").blur(function(){
   $(this).css("background", "red");
 });

});
</script>

<input type="text" id="user" name="user">

.focusin(), .focusout()

폼의 자식요소가 포커스 되었거나 잃었을 때 이벤트가 발생합니다.

<script>
$(function(){
 var frm = $('#frm');

 frm.focusin(function(e){
  $(e.target).css("background", "pink");
 });

 frm.focusout(function(e){
  $(e.target).css("background", '');    
 });

});
</script>

<form id="frm">
  <input type="text" name="user">
  <input type="password" name="pass">
</form>

.select()

폼 요소의 내용을 선택하면 경고창이 뜹니다.

<script>
$(function(){
 $('#user').select(function(){
  alert( getSelection() + " 를 선택했습니다.");
 });

});
</script>

<input type="text" id="user" name="user" value="하보니 PHP">

.serialize() 와 .serializeArray()

serialize() 는 폼 데이터를 "user=habony&pass=1234" 와 같은 URL 인코딩된 텍스트 문자열로 만듭니다.

<script>
$(function(){
 $('#frm').submit(function(){
  console.log($(this).serialize());
  /* 결과: user=habony&pass=123456890 */

  return false;
 });

});
</script>

<form id="frm">
  <input type="text" name="user" value="habony">
  <input type="password" name="pass" value="1234567890">
  <input type="submit" name="전송">
</form>

serializeArray() 는 폼 데이터를 name 과 value 형식의 객체 배열로 만들어 반환하며, name 에는 요소의 이름을 저장하고, value 에는 요소의 값을 저장합니다.

[
  {
    name: "user",
    value: "habony"
  },
  {
    name: "pass",
    value: "1234567890"
  }
]

아래는 serializeArray() 와 $.param() 에 대한 예제입니다.

<script>
$(function(){
 $('#frm').submit(function(){

  // serializeArray() 예제
  var param = $(this).serializeArray();

  console.log(param);
  /* 
  결과:
  [
    {name: "user", value: "habony"},
    {name: "pass", value: "1234567890"}
  ]
  */


  // $.param(obj) 예제
  console.log($.param(param));
  /* 결과: user=habony&pass=1234567890 */

  return false;
 });

});
</script>

<form id="frm">
  <input type="text" name="user" value="habony">
  <input type="password" name="pass" value="1234567890">
  <input type="submit" name="전송">
</form>