본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - submit 버튼 찾기 : submit

by zoo10 2011. 2. 22.

:submit 선택자는 폼 요소 중 type이 submit 인 것을 찾습니다.

원문 링크 http://api.jquery.com/submit-selector/

checkbox selector

  • jQuery(':submit')

예 제  
submit 버튼을 찾아서 색을 입힙니다. td 요소를 생성하여 input 의 타입을 표시해 줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
<table>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">

    <tr>
        <th>
            Element Type
        </th>
        <th>
            Element
        </th>

    </tr
    <tr>
        <td>
            <input type="button" value="Input Button"/>
        </td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="file" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="hidden" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="image" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="password" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="radio" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="reset" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="submit" />
        </td>

    </tr>
    <tr>
        <td>
            <input type="text" />
        </td>

    </tr>
    <tr>
        <td>
            <select><option>Option</option></select>
        </td>

    </tr>
    <tr>
        <td>
            <textarea></textarea>
        </td>
    </tr>

    <tr>
        <td>
            <button>Button</button>
        </td>
    </tr>
    <tr>
        <td>
            <button type="submit">Button type="submit"</button>
        </td>
    </tr>

</table>
</form>
<div id="result"></div>

<script>
    var submitEl = $("td :submit")
      .parent('td')
      .css({background:"yellow", border:"3px red solid"})
    .end();
    
    $('#result').text('jQuery matched ' + submitEl.length + ' elements.');

    // so it won't submit
    $("form").submit(function () { return false; });
    
    // Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
    $('#exampleTable').find('td').each(function(i, el) {
        var inputEl = $(el).children(),
            inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
        $(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>');
    })
    

</script>

</body>
</html>

미리보기

재미있는 예제입니다. submit 버튼을 찾는 방법을 보면 td :submit 으로 되어 있습니다. td 안에 submit 버튼이 있으면 배경색을 노란색으로 빨간색 테두리를 입혀줍니다.

그 아래 부분이 더 재미있습니다. 이 코드가 하는 일은 td를 하나 추가하는 것입니다. 그 td 안에 텍스트를 채워넣고 있는데요. input 의 타입을 알아내서 td에 써넣어 주고 있네요. 위 html 부분을 자 보시면 tr 안에 딱 하나의 td밖에 없습니다. 그런데 이 코드 때문에 td가 2개가 되어 있습니다.

일단 exampleTable을 찾아서 td 요소 수만큼 Loop 를 돌리는 each()함수를 실행 시키고 있습니다. 그 안에서는 el 이란 변수가 있는데요. 이 el이 td 가 되겠습니다. td의 children() 즉, 자식 요소를 찾아서 3항식을 이용해 문자열을 만듭니다. 만약 그 요소에 type이라는 속성이 있으면 문자열을 만들어 내고 있죠. 그리고 el 즉 현재의 td 앞쪽에 (before 함수를 사용했습니다.) 새로운 td를 추가해놓고 있습니다.

우와~ 이렇게 간단히 작성이 된다니 너무 신기합니다. 하하하; 빨리 더 많은 내용을 접했으면 좋겠습니다.

 

오랜 만에 아주 재밌는 예제를 만나서 기분 좋네요. 너무길어서 줄이려다가 자세히 봤더니 괜찮은 예제입니다. 혹시 안보셨다면 다시 위쪽에서 확인하고 가셔요~.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.