유랑하는 개발자

스프링에서 게시판을 공부하며, form 에 입력된 데이터를 컨트롤러에 전송 하기 전에

유효성 검사를 하고 싶었지만, form 내부에 있는 input태그의 submit 타입은,

클릭 하면 바로 전송이 되서 유효성 검사를 진행 할 수 없었습니다.

그때, submit 타입을 button 타입으로 바꿔주시고

클릭 이벤트 발생시 form 을 submit 해주면 됩니다.

		$("#form1").on("click", function() {
			var title = $("#title").val();
			var startedDate = $("#startedDate").val();
			
			if(title==""){
				alert("Write the Title");
				$("#title").focus();
			} else if(startedDate==""){
				alert("Select the Started Date");
				$("#startedDate").focus();
			}
			
			document.getElementById("postForm").submit();	// 유효성 검사 후 submit
		});

Ajax 전송 때문에 거의 몇 일 동안 프로젝트 진행을 못 했는데

알고보니 제가 엉뚱하게 사용하고 있었네요 ㅠㅠ

Ajax의 이론을 자세히 모르시는 분은 꼭 먼저 이론을 이해 하시는걸 추천합니다.

간단하게,

ajax 메소드 안의 url 은 요청이 전송될 위치이며, type은 필요 방식에 설정 하시면 됩니다.

data 또한 전송할 데이터들을 선언 해주시면 되구요,

error, success, complete 는 예외처리라고 생각하실 수 있겠지만,

success 는 정상 처리 되었을때, complete는 finally 같은 구문이고,

error야 말로 예외처리라 할 수 있습니다.

$.ajax({
	url : "전송할 URL",
	type : "POST",
	data : {
		title : title,
		startedDate:startedDate,
		finishedDate : finishedDate,
		summary : summary
	},
	dataType : "json",
	error : function(error) {
		alert("error 발생");
	},
	success : function(data) {
		alert("전송 성공");
	},
	complete : function() {
		alert("최종 성공");
	}
});

웹페이지 개발을 보다 동적으로 하기 위해 제이쿼리를 사용하는데

이때 문서 객체 구조 요소를 선택하기 위해 '선택자'를 이용합니다.

선택자와 사용법 입니다.

페이지가 로드될때 넘어 오는 매개변수로 select박스의 selected를 설정하고 싶었습니다.

eq(인덱스) 와 attr()속성을 이용하니 쉽게 설정 할 수 있었어요!

아래 설렉터에 위치한 내용은, postType이란 id를 참조 하고 그 자식인 option을 더 참조 합니다.

eq(인덱스)를 이용하여 상세 설정 하고 싶은 부분을 입력 하면 됩니다.

그리고 attr 메소드를 이용하여 선택된 option에 'sealected' , 'selected'를 추가 해줍니다.

$("#postType option:eq(0)").attr('selected', 'selected');

이 내용을 html 코드로 하면 이렇습니다.

	종류1
	종류2
	종류3

$(document).ready(function() {
       var test = "firstType"

	if(test =="firstType") {
		$("#postType option:eq(0)").attr('selected', 'selected');
	} else if(test =="secondType") {
		$("#postType option:eq(1)").attr('selected', 'selected');
	} else if(test =="thirdType") {
		$("#postType option:eq(2)").attr('selected', 'selected');
	}
});

<input type="text"/> 박스를 이용하여 

1번 박스에서 2번 박스로 value값을 전송하는 방법입니다.

제이쿼리의 val() 메소드는 해당 영역에 있는 value 값을 불러 올 수 있습니다.

그 이후 document.getElementById("txtBoxId").value 에 해당 val() 값을 넣어주면 됩니다.

html 태그

        function test01() {
                 document.getElementById("txtBox2").value = $("#txtBox1").val();
	}