본문 바로가기
jQuery/DOM&jQuery

jQuery 기능적 폼(form) 만들기

by 샷타이거 2010. 2. 18.

jQuery 기능적 폼(form) 만들기

jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다

이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다.

  • legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다
  • 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다
  • 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다.

엘리먼트 수정

legend엘리먼트는 css로 꾸미기 까다로운 것중하나다. 표준을 지키기위해선 써야하고 꾸미기위해서 바꾸자니 까다롭다. 따라서 스크립트를 이용해서 대체시켜보자

 $('legend').each(function(index) {
 //문서전체에서 legend에 접근하여
  $(this).replaceWith('

' + $(this).text() + '

'); //찾아낸것을 h3엘리먼트로 바꾸어준다. });

위의 소스는 legend엘리먼트를 h3에리먼트로 대체시켜주고 있다. 함수는.replaceWith()를 사용하고있다.each를 사용한것은 여기서는 하나의 폼만 사용해서보여주고있지만 여러개를사용할때 공통으로 검사하고 적용해 주기 때문이다. css로 바탕색은 분홍 글자색은 흰색으로 해보자

h3{ background:#fcc; color:#FFF;}

아스테리크로 대체

.replaceWith()함수로 대체시킬수도있지만 차후의 기능적 사용여부와 또 위에 별도표시를위해 변수로 지정하고 바꾸어줄것이다.

  var requiredFlag = ' * ';
  var conditionalFlag = ' ** ';
  $('form :input')
   .filter('.required')
   .next('span').text(requiredFlag)
   .end().end()
   .filter('.conditional')
   .next('span').text(conditionalFlag);

위의 소스는 먼저 아스테리크를 변수로지정해주고 그 다음바꾸어줄 텍스트를 찾아가고있다.주요시 볼점은 .end()함수이다.end함수는 다시 이전요소에 접근하는 함수이다.따라서 첫번째 end는 .filter('.required')에 접근 두번째end는$('form :input')접근하고있다. 따라서 '**'를 사용할 .conditional란 클래스를가진것에 접근시 처음부터 소스를 $('form :input').filter('.conditional')이런식으로 짜줄필요없이 단축시킬수있다.

이번에는 (필수), (선택)이란 텍스트에서 괄호를 때어주고 변수로 지정하고 아스테리크와 같이이어주도록 지정해준다.바라는 결과는 다음과 같다

필수*

선택**

이를위해 소스를보자

  var requiredKey = $('input.required:first')
                        .next('span').text();
  var conditionalKey = $('input.conditional:first')
                        .next('span').text();
    requiredKey = requiredFlag + 
             requiredKey.replace(/^\((.+)\)$/,'$1');
  conditionalKey = conditionalFlag + 
            conditionalKey.replace(/\((.+)\)/,'$1');

.replace()의 역할은 괄호를 떼어주는역할을 했다.마지막으로 이것을 맨위에 붙여주자

	$('

') .addClass('field-keys') .append(requiredKey + '
') .append(conditionalKey) .insertBefore('#contact');

이제까지 이블로그의 포스팅을 봐왔다면 쉽게 이해가능할것이다. 클래스를 지정한것은 단순히 좀더 꾸며주기위했을 뿐이다.

체크박스 클릭에 따라 보여주기 감추기

마지막으로 체크박스에 따라보여주거나 감추는 기능을 만들어보자.먼저 conditional명의 클래스의 텍스트박스를 모두감추어준다.

$('input.conditional').next('span').andSelf().hide()

다음은 페이지내에서 체크박스를 찾아가도록되어있다

$('input.conditional').next('span').andSelf().hide()
  .end().end()
  .each(function() {
    var $thisInput = $(this);
    var $thisFlag = $thisInput.next('span');
    $thisInput.prev('label').find(':checkbox')
    .attr('checked', false)
    //함수가 체크안된었다는초기값을 설정한것이다.
    .click(function() ;
    //이뒤에 실행되는 함수를 달아주면된다

마지막으로 박스가 체크된에 따라 바뀌는 소스를 만들어주자

  .click(function() {
      if (this.checked) {
      //만약 박스가 체크된다면
        $thisInput.show().addClass('required');
        $thisFlag.show();
        $(this).parent('label').addClass('req-label');
      } else {
      //반대라면
        $thisInput.hide().removeClass('required').blur();
        $thisFlag.hide();
        $(this).parent('label').removeClass('req-label');

아래는 최종 완성된 소스

완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/F_moreedite.html

댓글