[제이쿼리] form의 내용을 한번에 오브젝트로 만들기



form 안의 input 데이터들을 ajax로 날려주거나 오브젝트로 만들어야 할때


하나하나 네임이나 id값으로 불러와서 만들기엔 너무나도 귀찮은 작업이다.


이걸 한번에 해결해 줄수 있는 방법에 대해서 알아보자



일단 제이쿼리 플러그인을 사용해야 한다



제이쿼리 시리얼라이즈 링크




사용 방법은


두가지가 있다


하나는 배열로 만들기 하나는 오브젝트로 만드는 방법






1. html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="yameaForm">
    <input name="input1">
    <input name="input2">
    <input name="input3">
    <input name="input4">
    <input name="input5">
    <input name="input6">
  </form> 
</body>
</html>
cs



2. js


1
2
3
4
5
6
7
8
9
function makeObject(){
var param = $("#yameForm").serializeObject();
console.log(param);
}
 
function makeArray(){
var param = $("#yameForm").serializeArray();
console.log(param);
}
cs



위와 같은 방법으로 만들면 된다


짱편함


개편함


짱짱맨임


저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26

오브젝트를 생성하고 특정 데이터의 개수에 따라


속성을 추가적으로 생성해야 하는 경우가 있으나 


속성의 이름을 지정하지 못해 곤란해 했던 경우가 있다.


일반적인 오브젝트의 속성 추가는

1
2
3
4
5
6
7
8
var _gridObj = {};
 
 
_gridObj.time1 = 1;
_gridObj.time2 = 2;
_gridObj.time3 = 3;
_gridObj.time4 = 4;
 
cs


위와 같이 이루어 지지지만 데이터의 개수만큼 time뒤에 들어가는 숫자가 바뀌어야 한다면


아래와 같이 작성을 해주면 된다.


1
2
3
4
5
var _gridObj = {};
for(var dataCount = 0; dataCount < dataSize; dataCount++){
    _gridObj[ 'time'+dataCount] = result;
}
 
cs




저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01
[JavaScript] 제이쿼리로 레이어팝업 만들기  (0) 2015.06.23
[ajax] ajax사용시 뒤로가기 문제  (0) 2015.06.23

+ Recent posts

티스토리툴바