select tag option 선택 시 form submit 보내기

 

 ++ 서론 

프론트 단에서 서버로 데이터 통신이 필요할 때, 

라우터 요청을 보내는 <form> 태그 내에 <select>가 있고 그 안에 <option> 가 있고,

그 <option>중 하나를 선택하고 나서, 

최종적으로 input으로 ( 또는 button으로 ) submit를 하는 것이 일반적인데,

 

이번에 구현하는 서비스에선 <select>의 <option>이 선택되자마자

서버로 데이터 통신이 되어야했다

때문에,

submit을 해줄 <button>이나 <input> 태그가 없는 상태에서

js를 쓰는 방법으로 하려다

검색으로 좋은 코드를 찾게되어 공유한다ㅏㅏㅏㅏ

 

방법은 아래와 같다!

<select onchange="this.form.submit()">

 

저렇게 <select> 박스 내에 onchange 메소드를 넣어주고,

현재 <select> 가 포함되어있는 <form> 태그의 submit이 되게끔 한다!

 

( 내 생각에 저렇게 했을 때 문제점이 있다면, 너무 자주 데이터 통신이 일어난다는 점?

만약 통신에서 가져오는 DB용량이 많다면 느려지거나 하진 않을까 했지만

현재 서비스에서는 괜찮았다!

이건 추후에 더 살펴보고 포스팅하는걸로--- )

 

 

++ 또, <select> 박스의  value 값 넘기는 방법들을 소개한 글을 찾아서 아래에 링크를 남겨둔다ㅏㅏ

 

출처 :

https://xe1.xpressengine.com/qna/1531923

select를 하면 자동으로 submit가 되게 할려면 - 묻고답하기 - XpressEngine

 

https://godpage.tistory.com/entry/select%EB%B0%95%EC%8A%A4%EC%9D%98-onchange%EC%97%90%EC%84%9C-thisvalue-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

select박스의 onchange에서 this.value 사용하기