[jQuery] input 값 가져오기, select 값 가져오기, serialize() 사용

안녕하세요 오늘은 input 값 가져오기, select 값 가져오기 에 대한 포스팅을 진행하겠습니다!

html에서 선택 or 입력된 값을 가져오는데 다양한 방법이 있습니다. 여기서는 가장 많이 쓰이고 기본적인 예제들로 알아보겠습니다!

 

1. select 에 사용자가 선택한 값 가져오기

 

<select  예시>

 <label for="pet-select">Choose a pet:</label>
	<select name="pets" id="pet-select">
	    <option value="">--Please choose an option--</option>
	    <option value="dog" selected>Dog</option>
	    <option value="cat">Cat</option>
	    <option value="hamster">Hamster</option>
	    <option value="parrot">Parrot</option>
	    <option value="spider">Spider</option>
	    <option value="goldfish">Goldfish</option>
	</select>

위와 같은 select 에서 사용자가 선택한 값을 가져오는 방법은 아래와 같습니다.

$("#pet-select").val()

크롬 브라우저에 개발자 모드에서 확인을 해보면

개발자모드

^ 이렇게 나오는걸 확인할 수 있습니다.

---

2. input 값 가져오기

<!-- input -->
<label for="name">Name :</label>
<input type="text" id="name" name="name" class="myid" >

위와같은 input 태그에서 사용자가 입력한 값을 가져오는 방법 3가지!

// id로 가져오기
$("#name").val();

// class로 가져오기
$(".myid").val();

// name 로 가져오기
$("input[name=name]").val();

 

3. serialize() 사용해서 한번에 값 가져오기

일일이 값을 가져오기 귀찮을때 유용한 방법!

값을 보내기전에 console에서 한번에 확인한다던지 or ajax로 값을 보낼때 한방에 보내는 방법으로 자주 쓰인다.

 

 

(쓰임1) 아래와 같은 html이 있을때

<form id="detailForm">
  <select name="number">
    <option value="1">one</option>
    <option value="2">two</option>		
  </select>
  <input type="text"  name="manual_name" value="${manual_name}">
			
</form>

형식 : form 태그의 id.serialize()

$('#detailForm').serialize()

^이러면 tag의 name값을 가지고 모든 사용자 입력값을 넘겨준다.

결과는 [name=사용자 입력값&name=사용자 입력값&name=사용자 입력값] 형태이다.

 

chrome 개발자도구에서 serialize()입력 예시

 

(주의할점은 가져오려는 모든 tag에 name 값이 있어야 넘겼을때 구분할 수 있다.)

 

 

(쓰임2)

$.ajax({
    url : "/office/${seq}",
    type : "PATCH",
    data : $('#detailForm').serialize(),
    success : function (data){
    console.log("success")
    }

  })

가장 많이 쓰이는 경우는 아무래도 ajax로 값을 넘기는 경우이다. jsp에서 각 tag별 name값을 잘 설정하고 , 

해당 VO에서 선언을 해준경우 그냥 이렇게 controller로 넘기면 vo인자를 받아서 바로 사용가능하다.

 

오늘은 [jQuery] input 값 가져오기, select 값 가져오기, serialize() 사용방법에 대해서 알아봤습니다. 그럼이만 다음 포스팅에서 만나욥.

 

 jQuery 가 아니라 순수 javascript 를 이용한 DOM조작 방법은 아래 포스팅을 참고해주세요.

2021.05.18 - [WEB/FRONT] - [js]getElementByClassName,getElementsByTagName,querySelectorAll, classList, dataset,classList.contains, appendChild등등 DOM 조작 총 정리