[Javascript] div 태그 내용을 form으로 전송하기

form 태그 안에서 값을 전송할 수 있는 태그들은

 

1. 텍스트 입력(text)

2. 비밀번호 입력(password)

3. 라디오 버튼(radio)

4. 체크박스(checkbox)

5. 파일 선택(file)

6. 선택 입력(select)

7. 문장 입력(textarea)

8. 버튼 입력(button)

9. 전송 버튼(submit)

10. 필드셋(fieldset)

 

이러한 것들이 있습니다. 그런데 만약, 이외의 태그 - div에 있는 내용을 form으로 전송해야 한다면 어떻게 처리해야 할까요? hidden 이라는 타입을 가진 input 태그를 form 안에 넣어주고, div에 있는 내용을 그 input 태그의 value로 넣어준 다음 form을 submit하면 잘 전송이 됩니다.

 

<form action="form.php" method="GET" id="form">
	<input type="hidden" name="newname" id="newname">
    <div id='name'>olly</div> //form 으로 보내야 할 정보 !
    <div id='btn' onclick='saveName()'>전송</div>
</form>

<script>
	function saveName(){
    	var n = $("#name").text(); //olly
        $("#newname").val(n);
        
        $("#form").submit();
    }
</script>

 

전송 버튼을 클릭하게 되면 form이 전송이 되는데요, 파라미터를 보시면 ?newname=olly 이렇게 되있다면 잘 전송되었네요!