JS 폼태그 조립
폼전송
요약
- URL GET
- 파라미터 부분을 객체리터럴 변환
- FORM 태그에 Input요소로 ADD 하고 전송
객체리터럴 형태로 조립하고 폼 전송하기(Jquery 미사용)
<html>
<body>
<form name="realForm">
</form>
</body>
<script type="text/javascript">
window.onload = function(){
var form = document.querySelector('form[name="realForm"]');
var req_url = "${param_url}"; //DB값) "https://bank.co.kr?param1=7000¶m2=금액"
form.action = req_url;
if(req_url.indexOf("?") != -1) {
var url = req_url.split('?')[0];
form.action = url; //파라미터부분을 제외한 호스트 주소를 폼액션 주소로 설정
// 파라미터부분을 객체리터럴 변환
var obj = {};
var param_arr = req_url.slice(req_url.indexOf("?") + 1, req_url.length).split("&"); // ["param1=7000,"param2=금액"]
for(var i=0; i<param_arr.length; i++) {
var parts = param_arr[i].split('=');
var key = parts[0];
var value = decodeURIComponent(parts[1]);
obj[key] = value; // {param1: "7000", param2="금액}
}
// 인풋태그 ADD 하고 폼전송 (객체리터럴 키벨류 반복문으로 조립함)
for(var key in obj) {
if(obj.hasOwnProperty(key)) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = obj[key];
form.appendChild(input); // 변환한 ojb파라미터를 SET
}
}
form.submit();
}
</script>
</html>
attr 속성으로 조립하고 폼 전송하기(Jquery 미사용)
<html>
<body>
<form name="realForm">
</form>
</body>
<script type="text/javascript">
window.onload = function(){
var form = document.querySelector('form[name="realForm"]');
var req_url = "${param_url}"; //DB값) "https://bank.co.kr?param1=7000¶m2=금액"
form.action = req_url;
if(req_url.indexOf("?") != -1) {
var url = req_url.split('?')[0];
form.action = url; //파라미터부분을 제외한 호스트 주소를 폼액션 주소로 설정
// 파라미터부분을 객체리터럴 변환
var obj = {};
var param_arr = req_url.slice(req_url.indexOf("?") + 1, req_url.length).split("&"); // ["param1=7000,"param2=금액"]
for(var i=0; i<param_arr.length; i++) {
var parts = param_arr[i].split('=');
var key = parts[0];
var value = decodeURIComponent(parts[1]);
obj[key] = value; // {param1: "7000", param2="금액}
}
// 인풋태그 ADD 하고 폼전송 (attr속성으로 즉석 조립함)
for(var key in obj) {
$.each(params, function(key, value) {
$('<input>').attr({
type: 'hiiden',
name: key,
value: value
}).appendTo(form);
});
}
form.submit();
}
</script>
</html>
객체리터럴 형태로 조립하고 폼 전송하기(Jquery 미사용)
<html>
<body>
<form name="realForm">
</form>
</body>
<script type="text/javascript">
window.onload = function(){
var form = document.querySelector('form[name="realForm"]');
var req_url = "${param_url}"; //DB값) "https://bank.co.kr?param1=7000¶m2=금액"
form.action = req_url;
if(req_url.indexOf("?") != -1) {
var url = req_url.split('?')[0];
form.action = url; //파라미터부분을 제외한 호스트 주소를 폼액션 주소로 설정
// 파라미터부분을 객체리터럴 변환 (리듀스 사용)
var obj = {};
var param_arr = req_url.slice(req_url.indexOf("?") + 1, req_url.length).split("&"); // ["param1=7000,"param2=금액"]
obj = param_arr.reduce(function(result, element) {
var parts = element.split('=');
var key = parts[0];
var value = parts[1];
result[key] = value;
return result;
},{});
// 인풋태그 ADD 하고 폼전송 (attr속성으로 즉석 조립함)
for(var key in obj) {
$.each(params, function(key, value) {
$('<input>').attr({
type: 'hiiden',
name: key,
value: value
}).appendTo(form);
});
}
form.submit();
}
</script>
</html>
Leave a comment