JQuery val()

JQuery val()

■ 지난 글에서 html과 text 메서드를 이용해서 태그 안에 있는 내용을 읽어오거나 변경하는 과정에 대해서 알아봤는데요. 일반적인 문자열과 태그는 이 메서드를 이용해서 처리할 수 있지만, "사용자 입력 태그"의 내용은 읽어오지 못하는데요. 예를 들어 input, select, textarea 태그 등이 해당됩니다. 사용자가 입력하거나 선택된 내용은 value 값에 저장돼서 관리되는데요. text와 html 메서드로는 이것들을 읽어오거나 변경할 수 없습니다. 

■ 이렇게 사용자 입력 태그의 내용을 처리하기 위해서는 val() 메서드를 사용해야 하는데요. 먼저 선택된 사용자 입력 태그의 내용을 읽어오는 형식은 다음과 같습니다. 

변수 = $("선택자").val();

 

 

그리고 선택된 입력 태그의 내용을 변경하는 형식은 다음과 같습니다. 

$("선택자").val("변경할 내용");

이 형식을 생각하면서 사용자로부터 문자열 데이터를 입력받고 그 값을 읽어와서 alert에 출력하는 예제를 작성해보겠습니다. 

■ text를 입력받기 위해서 input type=text 태그를 사용했구요. 이벤트 처리할 버튼을 하나 만들었습니다. 먼저 이 문서를 출력해서 확인할게요.

■ 이렇게 사용자로부터 입력을 받을 준비를 하고 있는데요. 여기에 사용자가 텍스트를 입력하고 [확인] 버튼을 클릭하면. val() 메서드가 그 값을 읽어와서 alert에 띄우는 함수를 정의하겠습니다.

■ 아이디가 (#bbb)인 버튼을 클릭했을 때 val() 메서드를 실행해서 input (#aaa)의 값을 읽어와서 'tex' 변수에 보관한 후 alert()을 띄워서 'tex'의 값을 출력하도록 하고 있습니다. 

■ 그림과 같이 텍스트를 입력했구요. [확인] 버튼을 클릭해서 alert 창을 띄우겠습니다.

■ 사용자가 입력한 값을 읽어가서 alert에 띄우는 걸 확인할 수 있습니다. 이렇게 해서 사용자 입력 태그에서 값을 읽어가는 val() 메서드에 대해서 알아봤습니다. 수고하셨어요.