[javascript] Button 클릭시 submit 되는 현상 막기

Button 태그의 클릭시 기본적으로 Submit 되도록 되어 있는데, 프로그램을 할때 유효성체크 확인을 위해서는 클릭할때마다 Submit 되어 처리되어 버리면 곤란하다.

 

Client Script 상에서 유효성 체크를 위하여 Submit 되는 현상을 막아보자.

 

1. HTML 태그 상으로 type="button" 속성값을 추가하자.

 

<input type="button" value="버튼">

<button type="button">버튼</button>

 

2. javascript 내에서 return false; 나 return; 를 입력하여 Submit 되는 현상을 막는다.

 

javascript 소스내에서 흐름상 막는방법이다.

 

3. javascript 내에서 이벤트 콜백처리해서 막는다.

 

  $(document).on('click','.generateList li button', function (e) {
    var label = $(this).text()
    var value = null
    var select = $(this).parents('ul').siblings('select')
    $(this).parents('ul').slideUp(200)
    select.find('option').each(function () {
      if ($(this).text() === label) {
        value = $(this).val()
      }
    })
    $(this).parents('ul').siblings('.selected').text(label)
    select.val(value)

		e.preventDefault();
		e.stopPropagation();
  })

위 예제 소스의 일부분인데, 

 

e.preventDefault();
e.stopPropagation(); 

 

를 추가하여 submit를 방지하고 있다.