스프링에서 게시판을 공부하며, 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("최종 성공"); } });


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

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

선택자와 사용법 입니다.



 선택자

사용 예시 

설명 

$("*") 

전체 요소 선택 

 #

$("#id") 

id를 가진 요소 선택

 .

$(".class") 

class를 가진 요소 선택

 다중 #

$("#id1", "#id2") 

id1, id2를 가진 요소 선택 

다중 .

$(".class1", ".class2") 

class1, class2를 가진 요소 선택 

 element

$("p") 

<p> 태그에 해당되는 요소 선택 

$("div") 

<div> 태그에 해당되는 요소 선택 

 $("body")

<body> 태그에 해당되는 요소 선택 

다중 element 

$("p", "div", "body") 

각 태그에 해당되는 요소 선택

:first

$("li:first")

li의 첫번째 요소 선택 

:last

$("li:last")

li의 마지막 요소 선택 

:even

$("li:even")

li의 짝수번째 요소 선택 

:odd

$("li:odd")

li의 홀수번째 요소 선택 

parent()

$("요소").parent() 

선택 요소의 부모 요소 선택 

parents()

$("요소").parents() 

선택 요소의 전체 상위 요소 선택 

:eq(n) 

$("요소:eq(0)") 

요소 자식의 인덱스n 요소 선택 


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


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


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

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

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


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


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





$(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 태그

         


javascript&Jquery

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


+ Recent posts