<form> 태그 값을 자바스크립트로 불러오는 법
1. 변수선언 시 JQuery $() 값 사용
input태그의 id나 name 속성값으로 변수 선언 후 변수를 이용한다.
ex)
var ITEM_IMG = $("#아이디명").val(); //해당 태그 id명
var ITEM_IMG = $("네임명").val(); //해당 태그 name명
const formObj = $("form"); //form태그 전체
2. 변수선언 시 EL ${} 값 사용
ex)
const result = '<c:out value="${result}"/>';
//var ITEM_ID = ${list[0].RE_ITEM};
이 경우에 작동이 안되거나 개발자 도구에서 오류뜨는 경우가 있었다.
3. input태그의 name속성으로 바로 가져오기
ex)
$('input:radio[name=네임명]').is(":checked"))
1. <form>태그를 javascript에서 submit하기
1) <button type="button"> onClick + <javascript> submit
ex)
<script type="text/javascript">
function bsend() {
b.submit();
}
</script><body>
<form id="b" action="gogo.go" method="POST">
<label>값 입력</label> <span class="box"><input type="text"></span>
</div>
<p>
<button class="a" type="button"
onclick="bsend();">보내기</button>
</p>
</form>
</body>
2. <form> 태그 특정 값만 javascript로 넘기기
1) <body> a태그 onClick + <javascript> location.href
<body> a태그의 onClick의 값을 <script>부분으로 값을 전송하고 <javascript> location.href를 사용해 값을 전송한다.
ex) <script> 함수의 매개변수에 값을 하나만 준다.
<body>
<a href="#" onClick="paging('${pagination.next}')">[next]</a>
</body><script type="text/javascript">
function paging(nowPage) {
location.href = "/item/productList.da?nowPage=" + nowPage;
}
</script>a href="#" 는 #뒤에 오는 id의 위치로 스크롤 한다.
여기서는 id를 정해주지 않았기 때문에 [next] 버튼을 누르면 페이지 상단으로 스크롤되며 onClick의 함수가 <script>부분에서 실행된다.
ex) <script> 함수의 매개변수에 값을 여러개 줄 수도 있다.
<script type="text/javascript">
function paging(nowPage, ITEM_ID) {
var ITEM_ID = ${list[0].RE_ITEM};
location.href = "/item/productList.da?nowPage=" + nowPage + "&ITEM_ID=" + ITEM_ID;
<body>
<a href="#" onClick="paging('${pagination.next}')">[next]</a>
</body>
3. <form> 태그를 여러 url로 보내기
1) <button type="submit"> formaction 속성
(form태그에 id설정하고 onclick="함수명();"을 추가하면 자바스크립트로 모달창 등 작업도 가능)
ex)
<form method="POST">
<button class="aa" type="submit"
formaction="productDeletePro.da">1로 이동</button>
<button class="aa" type="submit"
formaction="productUpdateForm.da">2로 이동</button>
</form>
2) <button type="submit"> data-oper속성 + <javascript> .attr("action", "url") submit
<form role="form" action="/controller/board/modify" method="post">
<button type="submit">수정 제출</button>
<button type="submit" data-oper='remove'>삭제</button>
</form>$(document).ready(function() {
const formObj = $("form");
$('button').on("click", function(e){
e.preventDefault();
var operation = $(this).data("oper");
console.log(operation);
if(operation === 'remove') {
formObj.attr("action", "/controller/board/remove");
}
formObj.submit();
});
});'JAVASCRIPT,JQUERY' 카테고리의 다른 글
| JAVASCRIPT 이벤트 처리 (0) | 2023.02.16 |
|---|---|
| $(document).ready(function() / $(function() (0) | 2023.01.27 |