[jQuery] HTML 폼에서 서브밋 할 때 특정 함수를 실행 시키는 2가지 방법

🕓2017.06.21 📈5

HTML 태그인 폼(Form)에서 서브밋(Submit) 할 때 함수를 실행시키고 싶어요. 아주 간단하게는 서브밋 직전에 확인용으로 메시지 박스를 하나 띄우고 뭔가를 처리한 다음 기본 프로시져를 실행시키는 거죠.

이럴 때는 두 가지 방법을 사용 할 수 있습니다. 첫번째는 jQuery 자체에서 .submit 으로 이벤트를 받아서 함수를 실행시키는 방법이고, 두번째는 input 태그의 onsubmit 속성을 통해 함수를 실행시키는 방법이 있습니다.

jQuery 에서 이벤트 받아와 함수 실행시키기

예제를 보면 아주 간단합니다.

<!-- HTML 코드 -->
<form id="frm-foo">
    <input name="q" type="text" />
    <input type="submit" value="Go" />
</form>

//jQuery 코드
jQuery('#frm-foo').submit(
    function(){
            alert('서브밋!');
    }
);

(편의를 위해 많은 부분이 생략 되었지만 잘 봐주세요)

form 태그에서는 특별히 처리 할 것이 없습니다. Submit 이벤트가 발생 했는지 jQuery 코드 상에서 확인 후 설정해 놓은 함수를 실행시켜 버리는 것이죠.

HTML 소스에서 함수명을 공개하지 않을 수 있다는 장점이 있네요. 하지만 해당 함수를 다른데서는 사용 할 수 없다는 단점이 있습니다.

이 방법은 자주 사용하는 onclick 과 같은 방식입니다.

<!-- HTML 코드 -->
<form id="frm-foo" onsubmit="foo();">
    <input name="q" type="text" onsubmit="" />
    <input type="submit" value="Go" />
</form>

//jQuery 코드
function foo(){
    alert('서브밋!');
};

위 jQuery 자체적으로 이벤트를 받을 때와 비슷합니다. 다만 foo() 라는 함수가 따로 존재하고 onsubmit 을 통해 foo() 함수가 실행된다는 차이 밖에 없어요.

HTML 코드상에 함수 이름이 노출 되기는 하지만, foo() 함수를 여기저기서 다 가져다 사용해도 되니 두 방법은 나름 장단이 있네요.

용도에 맞게 잘 골라 쓰면 될 것 같습니다!