jQuery JSON으로 양식 직렬화 - 입력 배열 만들기

Question

이 객체를 직렬화하는 jQuery 함수로 전달되는 상당히 표준 JSON.stringify 함수를 사용하고 있습니다.

그러나 입력 배열을 게시 할 수 있도록 수정하고 싶습니다. 현재 솔루션이 체크 박스 컬렉션을 처리하는 방법과 매우 비슷합니다.

예.

<fieldset name="clothes"> 
    <input type="number" name="coat" /> 
    <input type="number" name="jacket" /> 
    <input type="number" name="jeans" /> 
    <input type="number" name="(guid)" /> 
</fieldset> 

이

그래서 내가 좋아하는 뭔가를 형성하고 싶습니다 의류의 모든 항목은 다음과 같습니다 위에서

{ "Clothes": { "coat" : 2 , "jacket" : 10 , "jeans" : 1 } } 

, 함수는 그룹의 추가 레벨을 지원해야합니다. 내 첫 번째 생각은 fieldset에 이름을 추가하는 것입니다. 이것은 나에게 논리적으로 보인다. 그러나 HTML 스펙에 따르면 fieldset 요소는 양식 제출의 일부가 아니므로이 목적을 위해이 요소에 NAME을 추가한다고 말하는 일부 항목이있을 수 있습니다. 그러나 스펙이 'name'속성을 추가하는 것을 지원하기 때문에 이것이 완벽하게 유효하다고 생각합니다.

{ "Name" : "John" , Email : "x@y.com" , "Clothes": { "coat" : 2 , "jacket" : 10 , "jeans" : 1 } } 

내 현재 코드의 단순화 된 버전을 게시 한 ...주기

<fieldset> 
    <input type="text" name="Name" /> 
    <input type="text" name="Email" /> 
</fieldset> 
<fieldset name="clothes"> 
    <input type="number" name="coat" /> 
    <input type="number" name="jacket" /> 
    <input type="number" name="jeans" /> 
    <input type="number" name="(guid)" /> 
</fieldset> 

을 : 전체 양식의 맥락에서

, 내가 지원하는 뭔가를 찾고 있어요 on JSFiddle - http://jsfiddle.net/DR3EA/1/

Answer 1

나는 http://jsfiddle.net/DR3EA/2/이지만, serialize 할 때 fieldset을 사용하기 때문에 레이블 데이터를 결과로 가져올 수 없습니다.

$.fn.serializeField = function() { 
    var result = {}; 

    this.each(function() { 

     $(this).find("fieldset").each(function() { 
      var $this = $(this); 
      var name = $this.attr("name"); 

      if (name) { 
       result[name] = {}; 
       $.each($this.serializeArray(), function() { 
        result[name][this.name] = this.value; 
       }); 
      } 
      else { 
       $.each($this.serializeArray(), function() { 
        result[this.name] = this.value; 
       }); 
      } 
     }); 

    }); 

    return result; 
}; 

result

나는 비슷한 문제를 가지고 있었고 serializeObject jQuery 플러그인으로가는 결국

{"Name":"bb","Email":"cc","clothes":{"coat":"-1","jacket":"-2","jeans":"-2"}} 

Answer 2

될 것이다. 멋지게 중첩 된 JS 객체를 반환 $('input').serializeObject(), 위의 입력을 감안할 때

<input type="text" name="work.street" value="320 3rd St"> 
<input type="text" name="work.city" value="San Fran"> 
<input type="text" name="work.state" value="CA"> 

를 : : 대신 필드 셋을 사용하는, 그래서처럼 name 속성의 형식을

{ work: { street: "320 3rd St", city: "San Fran", state: "CA" } } 

Answer 3

jquery-serializeFields 플러그인이 도움이 될 수는 있지만거야 각 필드 세트 (또는 컨테이너 요소)의 키처럼 작동하도록 일부 속성 (예 : 데이터 이름)을 지정해야합니다.

HTML :

<form> 
<fieldset data-name="clothes"> 
    <input type="number" name="coat" value="1" /> 
    <input type="number" name="jacket" value="2"/> 
    <input type="number" name="jeans" value="3"/> 
    <input type="number" name="(guid)" value="4"/> 
</fieldset> 
</form> 

<div id="result"></div> 

자바 스크립트 :

var result = $("form").serializeFields(); 

$("#result").html(JSON.stringify(result)); 

결과 :

{"clothes":{"coat":"1","jacket":"2","jeans":"3","(guid)":"4"}} 

내가 여기에 테스트 한 : http://jsfiddle.net/zfj4Lprb/