[HTML & JavaScript] a태그 클릭 시 사용자에게 확인 받고(confirm) 함수 실행하기 / a태그 onclick 함수에서 href 속성 사용하기 / confirm 받은 후 form 제출하기

*코드에서 jQuery를 사용합니다.

 

 

a태그를 클릭한 사용자가 confirm 창에서 '확인'을 누른 후에 form이 전송되게 하고 싶다면 어떻게 해야 할까?

또는, 사용자에게 확인을 받고 난 후 a태그의 href 속성에 있는 링크로 이동시키고 싶다면?

 

 

 

---

 

 1. 사용자에게서 confirm 받고 form 제출하기 

코드가 세련된 느낌은 아니지만, a태그의 상위 태그를 선택해서

form에 있는 내용들을 즉각 submit할 수 있다는 점이 장점이다.

 

<a onclick="if (confirm('글을 등록하시겠습니까?')) { jQuery(this).parents(\'form\').submit() };">등록하기</a>

 

 

 

 

 

 2. 사용자에게서 confirm 받고 href 링크 태우기 

간단한 코드만으로 유저가 링크 실행 여부를 선택하게 할 수 있다.

 

<a onclick="return confirm('취소하고 목록으로 돌아가시겠습니까?');" href="https://naver.com">취소하기</a>

 

 

 

 

 

 

 3. 사용자에게서 confirm 받고 ajax로 form 제출하기 

script를 사용할 수 있는 경우,  a의 onclick에서 JS 함수를 호출한다.

 

 

HTML 

<!-- $this는 Jquery의 선택자다. a태그 자신을 호출해 JS에 보낸다. -->
<a onclick="submitButton($this)" data-message="글을 등록하시겠습니까?" data-name="apply">등록하기</a>

 

 

JS

function submitButton(bt){

	// a태그에 "data-message" 속성을 넣어 confirm창에서 그 속성 값을 메시지로 띄워준다.
	if(bt.attr("data-message")){
		var check = confirm(bt.attr("data-message"));
		if(!check) return;
	}
    
	var form = new FormData();
    
	// a태그에 들어있는, "data-"로 시작하는 속성들을 가져와 form(FormData 객체) 안에 넣어준다.
	bt.each(function() {
 		jQuery.each(this.attributes, function() {
			if(this.specified && this.name.match("data-") !== null){
				form.append(this.name.replace("data-", ""), this.value);
			}
		});
	});
	submitFormdata(form);
}

// ajax를 이용해 데이터를 제출한다.
function submitFormdata(formdata){
	jQuery.ajax({
		type: 'POST',
		url: jquery.ajaxurl,
		data: formdata,
		dataType: "json",
		contentType: false,
		processData: false,
		success: function(res){
			afterAjax(res);
		},
		error : function(res){
			alert(jquery.msg_error);
		}
	});
}

 

 

 

표지 사진: Unsplash의Brian Taylor

참고 페이지

How to display a confirmation dialog when clicking an <a> link?