Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 04:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

FORM 내의 입력 엘리먼트 값 가져오기 (Parameter 형식) : 자바스크립트

 

Form 엘리먼트 내의 입력 엘리먼트 값들을 가져와 get 파라메터 형식으로 완성시켜주는 스크립트이다.
Ajax 를 사용하면 데이터 전송하기 위해 화면단 (form) 내의 입력 값을 읽어와 같이 전송해줘야 한다.

 

Javascript Source : test.js

// 최초 호출
function xmlCall(form) {
 var oExe = new ObjectHandler();
 oExe.form = form;
 oExe.objForm();
 oExe.params();
 alert(oExe.xmlSend);
}

function ObjectHandler() {
 this.form;
 this.objForm = ObjectForm;
 this.xmlSend = "";
 this.params = CreateParams;
}

// 해당 폼 알아내기
function ObjectForm() {
 var intCnt = document.forms.length;
 for (var i=0;i < intCnt;i++ ){
  if (document.forms[i].id == this.form) {
   return this.objForm = document.forms[i];
  }
 }
}

// 해당 폼의 엘리먼트 모두를 get 방식으로 조절
function CreateParams() {
 var intCnt = this.objForm.length;
 var regExp = /[&]/;
 
 for (var y=0;y < intCnt;y++ ) {
  if (this.objForm[y].name != "") {
   this.xmlSend += "&" + this.objForm[y].name + "=" + escape(this.objForm[y].value);
  }
 }
 this.xmlSend = this.xmlSend.replace(regExp,"");
}

Example Source

<html>
<head>
 <title>xml send 파라미터 자동 생성</title>
 <script language='JavaScript' type='text/JavaScript' src='test.js'></script>
</head>
 
<body>
 
<form id='one' onsubmit=xmlCall(this.id);>
 <input type="text" name="eletxt_a" value='one 엘리먼트'>
 <input type="text" name="eletxt_b" value='a'>
 <input type="submit" value='확인'>
</form>
 
<form id='two' onsubmit=xmlCall(this.id);>
 <input type="text" name="eletxt_a" value='two 엘리먼트'>
 <input type="text" name="eletxt_b" value=''>
 <input type="submit" value='확인'>
</form>
 
</body>
</html>

written by Seok Kyun. Choi. 최석균.
http://www.cyworld.com/syaku
http://syaku.tistory.com


댓글 남기기
◀ PREV 1···1516171819 NEXT ▶