본문 바로가기
🐎Language/Html

[Html] onclick 이벤트 처리

by inbeom 2023. 8. 20.
728x90

 💡 Form에서 데이터를 전송(submit) 할 때 확인(confirm) 작업하기

1. form에 onclick속성 정의하여 함수 호출.

  • input type으로 submit button을 넣고 onclick속성으로 버튼 클릭 시 실행할 함수명을 정의한다.
  • 함수를 호출할 때 입력값을 보내려면 getElementById()에 해당 document의 id값을 담아주면 된다.
<form name="addUser" ~~~ >
	<input type="text" id='us'>
	<input type="button" value="Add"
                    style="width: 295pt; height: 20pt;" 
			onclick="delete_check(document.getElementById('us').value)">
</form>

 

2. script 태그로 감싸서 function 정의.

  • confirm() 을 사용해서 확인 & 취소를 선택할 수 있고 확인 시 form이 전송되고 취소하면 캔슬된다.
  • 위에서 form의 name으로 지정한 값을 document.addUser로 변수에 담아서 .submit하여 전송함.
<script>
	function update_check(){
		if (confirm("사용자 정보를 등록하시겠습니까?") == true){    //확인
			var form = document.addUser;
      form.submit();
              
    }else{   //취소
      return;
    }
  }
</script>
728x90

'🐎Language > Html' 카테고리의 다른 글

[Html] picocss  (0) 2023.08.20