web-dev-qa-db-ja.com

HTMLフォームからキー/値データセットを取得する方法

私は単に<form>からすべての値を取得にする方法を探しています。

FormData に出くわしてしばらくWebを検索しました。これは私が探しているもののようです。

ただし、そのAPIはどのブラウザでも 使用不可 であるため、代替手段が必要です。

私の特定のケースで必要なのは、キー/値のペアのオブジェクトです。例えば：

<form>
  <input type="text" name="firstname" value="John" />
  <input type="text" name="surname" value="doe" />
  <input type="email" name="email" value="" />
  <input type="radio" name="gender" value="male" />
  <input type="radio" name="gender" value="female" />
</form>

オブジェクトは次のとおりです。

{
  firstname: "John",
  surname: "doe",
  email: "",
  gender: ""
}

編集：上記は単なる例であり、<input>だけでなく、他のタグ（たとえば、<select>、<textarea>など）でも動作するはずです。 .. <input type="file">さえもサポートされるべきです）。

javascripthtmlhtml5formsform-data
39
Simone

Edgeのケースで何が起こるべきか、そしてどのレベルのブラウザーサポートが必要であるかについての明確な定義がなければ、質問に対して単一の完璧な答えを出すことは困難です。

見逃しがちなフォームビヘイビアがたくさんあるため、 jQueryのserializeArray() など、ライブラリからメンテナンスの行き届いた関数を使用することをお勧めします。

$('form').serializeArray();

最近、jQueryを含む不必要に離れる大きなプッシュがあることを理解しているので、Vanilla JSソリューションに興味がある人にとってはserializeArrayはやらないでしょう。

次の難題は、どのレベルのブラウザーサポートが必要かを判断することです。 HTMLFormElement.elements は、シリアル化の実装を大幅に簡素化し、フォームに関連付けられた要素を選択せず​​に選択するのは非常に面倒です。

考慮してください：

<form id="example">...</form>
<input type="text" form="example" name="lorem" value="ipsum"/>

適合実装には、input要素を含める必要があります。私はcanを使用し、読者への演習としてポリフィルを残すと仮定します。

その後、<input type="file"/>がどのようにサポートされるべきかは不明です。ファイル要素を不必要に文字列にシリアル化することに熱心ではないので、値が実際には役に立たなくても、シリアル化は入力の名前と値であると仮定しました。

最後に、次の入力構造：

{
    'input name': 'value',
    'textarea name': 'value'
}

<select multiple>要素を考慮していないため、または2つの入力の名前が同じである場合、あまりにも単純です。入力は次のように改善されると仮定しました。

[
    {
        name: 'input name',
        value: 'value'
    },
    {
        name: 'textarea name',
        value: 'value'
    }
]

...また、読者の演習として、これを別の構造に変換しておきます。

すでにcodezをください！

var serialize = (function (slice) {
    return function (form) {
        //no form, no serialization
        if (form == null)
            return null;

        //get the form elements and convert to an array
        return slice.call(form.elements)
            .filter(function (element) {
                //remove disabled elements
                return !element.disabled;
            }).filter(function (element) {
                //remove unchecked checkboxes and radio buttons
                return !/^input$/i.test(element.tagName) || !/^(?:checkbox|radio)$/i.test(element.type) || element.checked;
            }).filter(function (element) {
                //remove <select multiple> elements with no values selected
                return !/^select$/i.test(element.tagName) || element.selectedOptions.length > 0;
            }).map(function (element) {
                switch (element.tagName.toLowerCase()) {
                    case 'checkbox':
                    case 'radio':
                        return {
                            name: element.name,
                            value: element.value === null ? 'on' : element.value
                        };
                    case 'select':
                        if (element.multiple) {
                            return {
                                name: element.name,
                                value: slice.call(element.selectedOptions)
                                    .map(function (option) {
                                        return option.value;
                                    })
                            };
                        }
                        return {
                            name: element.name,
                            value: element.value
                        };
                    default:
                        return {
                            name: element.name,
                            value: element.value || ''
                        };
                }
            });
    }
}(Array.prototype.slice));
20
zzzzBov

手動で行うこともできます（ただし、以下のコードはテストされていません）。

var form = document.getElementsByTagName("form");
var inputs = form[0].getElementsByTagName("input");

var formData = {};
for(var i=0; i< inputs.length; i++){
   formData[inputs[i].name] = inputs[i].value;
}
var formdata = JSON.stringify(formData);

ライブラリを使用する場合、これは簡単です。例：-jQueryの場合：

 var formObjects = $("form :input");
 formObjects.each(
function(){
formData[$(this).attr("name")] = $(this).val(); /*setting up name/value pairs */ 

 }
  );

このコードではformObjects contains すべての入力、選択、およびテキストエリアおよびその他のフォーム要素タグ。そのため、プレーンJSのようにそれぞれを手動で検索する必要はありません。ラジオボタンを除きます（@enhzflepが暗示しているように、これはinput [type = radio]に対して正しく機能しません）

ただし、jQueryを使用する場合は、jQueryのserialize（）関数を直接使用して、名前と値のペアでフォーム全体を取得できます。

var url_friendly_name_value_string = $("form").serialize();
7
shan

サーバーに送信する前に、json/javascriptオブジェクトを手動で生成する必要があります。フォームの各入力値を選択し、サーバーページに送信できるオブジェクトを作成するonSubmitというメソッドにする必要があります。

あなたが探しているものに似ているこの答えを参照することができます： jQueryでフォームデータをJavaScriptオブジェクトに変換する

3
Tarang

JQueryを使用するだけです。

HTML：

<form id="my-form">
  <input type="text" name="my-field" />
</form>

JS：

var data = $('form#my-form').serializeArray(); // [{'my-field': 'value'}]
$.ajax({
  data: data
  //other config goes here
});
2
natnai

例の書式を設定しないことを急いでください、しかし理解するのは良いことです。 「すべての値を取得」をクリックして、アラートのキー/値のペアを表示します。

JSフィドル

$(function(){
    $(".getFormVal").on("click",function(e){
        e.preventDefault();
        var formObj={};
        var formEle = $(".form").find("input:not([type=submit],[type=button]),select,textarea");

        $(formEle).each(function(){
            if($(this).prop("tagName").toLowerCase() == "input"){                           
                if( ($(this).attr("type").toLowerCase() == "text") || 
                   ($(this).attr("type").toLowerCase() == "radio" && $(this).is(":checked")) || 
                   ($(this).attr("type").toLowerCase() == "file") ){
                    formObj[$(this).attr("name")] = $(this).val();                               
                }else if( $(this).attr("type").toLowerCase() == "checkbox" && $(this).is(":checked") ){
                    if(formObj[$(this).attr("name")] === undefined){
                        formObj[$(this).attr("name")] = [];
                    }
                    formObj[$(this).attr("name")].Push($(this).val());
                }
            }else if( $(this).prop("tagName").toLowerCase() == "textarea" ){
                formObj[$(this).attr("name")] = $(this).val();
            }else if( $(this).prop("tagName").toLowerCase() == "select" ){
                if($(this).attr("multiple")){
                    if(formObj[$(this).attr("name")] === undefined){
                        var selectEleName = $(this).attr("name");
                        formObj[selectEleName] = [];
                    }                               
                    $('option:selected',this).each(function(i, selected){
                        formObj[selectEleName].Push($(this).attr("value")); 
                    });

                }else{
                    formObj[$(this).attr("name")] = $(this).val();
                }
            }

        });

        alert(JSON.stringify(formObj));
    }); 
});
1
Rajkishore

フォームからの入力を選択するために css selectors を使用することをお勧めします： querySelector および querySelectorAll 。これが working code であり、jsコードです。

function get_form_data()
{
    var el = document.querySelector('form');
    var matches = el.querySelectorAll('input[name]');

    var data = {};
    for(var i=0; i< matches.length; i++){
       data[matches[i].name] = matches[i].value;
    }
    var json_data = JSON.stringify(data);
}

必要に応じてセレクターを変更できます。これがあなたにとって有用で幸運であることを願っています。

0
Hett

これは、ファイルを含むフォームのすべての種類の入力に必要な出力を提供する純粋なJavaScriptソリューションです。

サンプル出力

{
  "firstname":"John",
  "surname":"doe", 
  "email":"[email protected]",
  "gender":"female", 
  "subscribe":true, 
  "selection":"M",
  "description":"sdfs sdfs sdf",
  "upload":"data:text/plain;base64,/v8JLAk+CTMAIAkVCUcJNgk1ACAJIAk+CRUJMAlHAC4ADQAKAA0ACgk5CT8JAgkoCU0JJglBCSQJTQk1CT4JGgk+ACAJHwkjCSQJTQkVCT4JMAAuACAJNQlNCS8JAgkXCRoJPwkkCU0JMAkVCT4JMAAgCSQJRwAgCTkJPwkoCU0JJglBCTkJTQkwCUEJJgkvCTgJLglNCTAJPgkfAA0ACgkkCUsJAgkhACAJNQk+CRwJNQlBCSgAIAkoCU0JLwk+CS8AIAkuCT8JMwkkACAJKAk4CUcJMgAgCSQJMAANAAoJJAlLCQIJIQk+CSQAIAk1CT4JHAk1CUEJKAAgCSgJTQkvCT4JLwAgCS4JPwkzCTUJPgAsAA0ACgkqCSMAIAkoCU0JLwk+CS8AIAk5CT4AIAkdCT4JMgk+CRoAIAkqCT4JOQk/CRwJRwAuAA0ACgkPCRUAIAkuCT4JIwlBCTgAIAkkCUEJLgkaCU0JLwk+ACAJLgk+CR0JTQkvCT4AIAk4CT4JMAkWCT4JGgAsACAJCQkCCRoJQAkoCUcAIAkGCSMJPwAgCTUJHAkoCT4JKAlHACAJLgk+CSQJTQkwACAJFQkuCUAJGgAuACAJKgk+CTkJJAAgCTkJSwkkCT4AIAkGCSoJMglNCS8JPgAgCQYJHAlBCSwJPgkcCUEJGglAACAJKgkwCT8JOAlNCSUJPwkkCUAALgAgCTkJSwkjCT4JMAk+ACAJLgkwCT4JIAlAACAJLgk+CSMJOAk+CTUJMAkaCT4AIAkFCSgJTQkvCT4JLwAsACAJJAlLCTkJPwAgCS4JOQk+CTAJPgk3CU0JHwlNCTAJPgkkCRoALgAgCS4JQgkXACAJFwk/CTMJQQkoACAJFwkqCU0JKgAgCSwJOAkyCUcJMglHACAJOAkwCRUJPgkwAC4AIAkkCUAAIAkaCT4JMAlAACAJLAk+CRwJQQkoCUcAIAk5CUsJIwk+CTAJQAAgCRcJMwkaCUcJKglAAC4AIAkGCSQJPgAgCRUJPgkvACAJFQkwCT4JNQlHAC4ALgkGCSoJIwAgCTkJPwAgCRcJKglNCSoAIAksCTgJPgk1CUcAIAkVCT8AIAkGCTUJPgkcACAJCQkaCTIJPgk1CT4ALgAgCSQJSwAgCS4JPgkjCUEJOAAgCTgJPgkuCT4JKAlNCS8AIAkoCTUJTQk5CSQJPgAgCSQJTQkvCT4JKAlHACAJNgk+CQIJJAAgCSwJOAkjCUcAIAk5CT4AIAk1CT8JGgk+CTAAIAkVCScJQAkaACAJFQlHCTIJPgAgCSgJPgk5CT8AIAkGCSMJPwAgCSsJPAlBCQIJFQkyCUAAIAkkCUEJJAk+CTAJPwAgCS4JMAk+CSAJPwAgCQUJOAlNCS4JPwkkCUcJOAk+CSAJQAAgCRUJPgkwCSMAIAkkCUsAIAk5CUsJJAk+ACAJLAk+CTMAIAkgCT4JFQkwCUcALgANAAoJLAk+CTMJKAlHACAJBgkqCTIJPgAgCSQJSwkrCTwJFgk+CSgJPgAgCQkJGAkhCTIJPgAuACAJLAkYCSQJPgAgCSwJGAkkCT4AIAkuCT4JNQkzCUcAIAkcCS4JQQAgCTIJPgkXCTIJRwAsACAJJAk+CRUJJgAgCTUJPgkiCUEAIAkyCT4JFwkyCUAALgAgCSoJIwAgCSgJFQlNCRUJPwAgCRUJMAlBACAJFQk+CS8AIAk5CT4AIAkqCU0JMAk2CU0JKAAgCTkJSwkkCT4JGgAuACAJBwklCUcJGgAgCTUJIQk/CTIJPgkCCSgJQAAgCSoJTQkwCSwJSwknCSgJFQk+CTAAIAkgCT4JFQkwCUcJAgkoCUAAIAkqCU0JMAk2CU0JKAAgCTUJPwkaCT4JMAkyCT4ALgAuAA0ACiAcCSwJPgkzACAJMglLCRUJRwAgCSQJMAAgCRwJLgkyCUAAIAkqCSMAIAkvCT4JMgk+ACAJOAkCCRgJHwkoCUcJGglHACAJMAlBCSoAIAkmCUcJIwk+CTAAIAkVCT8AIAkoCT4JOQlAAD8AIAkVCT4JOQk/ACAJKAk+CTUAIAk4CUEJGgkkCS8AIAkVCT4AIAk4CQIJGAkfCSgJRwAgCTgJPgkgCUAAPyAdAA0ACgksCT4JMwAgCQkJJAlNCSQJMAkyCT4ALgAuIB0JNQk/CRoJPgkwACAJJAkwACAJGgk+CTIJQQAgCQYJOQlHAC4ALgkqCSMAIAk4CQIJGAkfCSgJRwkyCT4AIAkoCT4JNSAmIB0ADQAKIBwJLgk/ACAJOAk+CQIJFwkkCUsAIAkoCT4JNSAmAC4ALgk2CT8JNQk4CUcJKAk+IB0ADQAKCWcJbwAgCRwJQQkoACAJZwlvCWwJbAAuAC4JNgk/CTUJPgkcCUAAIAkqCT4JMAlNCRUALgAuCTkJHAk+CTAJSwkCCSgJPwAgCRwJLgkyCUcJMgk+ACAJLgkwCT4JIAlAACAJLgk+CSMJQQk4AC4AIAkGCSMJPwAgCTgJTQklCT4JKgkoACAJHQk+CTIJQAAgCTYJPwk1CTgJRwkoCT4ALgAgCRcJMAlNCSYJQAAgCQYJIwk/ACAJIAk+CRUJMAlHACAJOQlHACAJBwklCUcAIAkcCUEJMwkyCUcJMglHACAJFwkjCT8JJAAgCQYJHAkkCT4JFwk+CS8JFQAgCSsJPAk/CTgJFQkfCTIJRwkyCUcAIAkoCT4JOQk/CS8JRwAuAA0ACgkoCTUJTQk1CSYJPwkaCT4AIAkVCT4JMwAsACAJMAk+CTcJTQkfCU0JMAk/CS8AIAkoCUcJJAlNCS8JPgkCCSgJQAAgCS8JPgkkCU0JMAk+ACAJBgkvCUsJHAk/CSQAIAkVCUcJMglNCS8JPgAgCTkJSwkkCU0JLwk+AC4AIAk5CT8JKAlNCSYJQQkkCU0JNQk+CRoJPgAgCQYJNQk+CRwAIAksCUEJMgkCCSYAIAk5CUsJJAAgCTkJSwkkCT4ALgAgCQ8JFQkaACAJMgkVCU0JNwlNCS8AICAcCTAJPgkuACAJLgkCCSYJPwkwIB0ALgAgCTYJPwk1CTgJRwkoCUcJKAlHCTkJPwAgCTkJPwkCCSYJQgkkCU0JNQk+CRoJPgAgCQUJAgkXCT4JMAAgCTkJPgkkCT4JJAAgCRgJRwkkCTIJRwkyCT4ALgAgCTYJRwk1CR8JPwAgCSQJRwAgCR0JPgkyCUcJGgAuACAJLAk+CSwJMAlAACAJLgk4CU0JHAk/CSYAIAkGCSEJNQlAACAJFQlHCTIJQAAgCRcJRwkyCUAALgAgCSQJTQkvCT4AIAkoCQIJJAkwACAJCQk4CTMJMgk+ACAJJAlLACAJDwkVCRoAIAkmCQIJFwk+AC4AIAkuCT8AIAkuCT8AIAkuCU0JOQkjCSMJPgkwCUcAIAkGCSMJPwAgCTgJTQk1CSQJAwkyCT4AIAk5CT8JAgkmCUIJGglHACAJKAlHCSQJRwAgCS4JTQk5CSMJNQlBCSgAIAkYCUcJIwk+CTAJTQkvCT4JAgkaCUcAIAk5CT8AIAkqCTAJPwk4CU0JJQk/CSQJQAAgCSwJGAlBCSgAIAknCT4JLAlHACAJJgkjCT4JIwkyCUcALgAgCSQJTQkvCT4JKAlAACAJOAkwCTMJOAlLCR8AIAkcCTUJPgksCSYJPgkwCUAAIAkoCT4JFQk+CTAJMglAAC4AIAkvCT4JJAAgCQYJLglNCTkJPwAgCSgJNQlNCTkJJAlLAC4AIAkvCT4JJAAgCQYJLgkaCT4AIAkPCRUJOQlAACAJLgk+CSMJQQk4ACAJKAk1CU0JOQkkCT4AIAkFCTgJJAlACTIAIAkkCTAAIAkkCUcAIAkFCTgJJAlACTIAICAcCTYJPwk1CTgJSAkoCT8JFSAcAC4AIAkkCU0JLwk+ACAJNQlHCTMJPwAgCSwJPgkzCT4JOAk+CTkJRwksCT4JAgkoCT4AIAk1CT8JGgk+CTAJMglHACAJFwlHCTIJRwAuAC4ADQAKIBwJFQk+CS8AIAk5CUcAIAkkCUEJLgkaCUcAIAk2CT8JNQk4CUgJKAk/CRUAIAk5CUsJJAlHAD8gHQANAAoJLwk+ACAJNQlHCTMJPwAgCSwJPgkzCT4JOAk+CTkJRwksACAJOAk5CRwAIAkuCU0JOQkjCUEJKAAgCRcJRwkyCUcAIAkFCTgJJAlHACAJFQk/ACAJOQlHACAJBgkuCRoJRwAgCRUJSwkjCRoAIAkoCTUJTQk5CUcJJCAmAA0ACgkqCSMAIAkbCUcALgAuACAJNgk/CTUJOAlICSgJPwkVCT4JAgkoCT4AIAkPCRUJHwlHACAJHwk+CRUJQQkoACAJJglHCSMJPgkwCT4AIAk5CT4AIAkoCUcJJAk+CRoAIAkoCTUJTQk5CUcALgAgCSQJTQkvCT4JKAlHACAJOAkCCSoJQQkwCU0JIwkqCSMJRwAgCTYJPwk1CTgJSAkoCT8JFQk+CQIJGglAACAJOAk+CSUAIAkmCT8JMglAAC4AIAkGCSMJPwAgCQcJJQlHCRoAIAkvCT4AIAkoCUcJJAlNCS8JPgkoCUAAIAk4CT4JAgkXCUAJJAkyCUcALgAuAA0ACiAcCTkJRwAgCSwJPgksCTAJQAAgCSoJPgkhCSMJPgkwCUcAIAkcCTAAIAkuCT4JHQlHACAJNgk/CTUJOAlICSgJPwkVACAJBQk4CSQJQAkyACAJJAkwACAJLgkyCT4AIAkkCU0JLwk+CQIJGgk+ACAJBQktCT8JLgk+CSgAIAkGCTkJRwAuIB0AIAAoCTkJRwAgCQUJOAlHACAgGQk4CU0JHwlHCR8JLglHCQIJHwlNIBkAIAkmCU0JLwk+CS8JGglHACAJJwk+CSEJOAAgCRUJSwkjCU0JLwk+ACAJKAlHCSQJTQkvCT4JJAAgCQUJOAlHCTIAPwApAA0ACgk5CT4AIAk5CT8JKAlNCSYJQQkkCU0JNQk+CRoJPgAgCQUJAgkXCT4JMAAgCS0JMglNCS8JPgktCTIJTQkvCT4JAgkoCT4AIAkqCUcJMgk1CTIJPgAgCSgJPgk5CUAAIAkFCSoJNQk+CSYAIAkVCUcJNQkzACAJDwkVCRoALgAuACAJLAk+CTMJPgk4CT4JOQlHCSwAIAkgCT4JFQkwCUcALgANAAoJLglBCQIJLAkICSQAIAkmCQIJFwkyACAJCQk4CTMJMgk/ACAJOQlLCSQJQAAgCW8JaQAgCTgJPgkyCUAALgAgCSQJTQkvCT4AIAk1CUcJMwk/ACAJFQlHCTUJMwAgCQYJIwk/ACAJFQlHCTUJMwAgCTYJPwk1CTgJSAkoCT8JFQk+CQIJLglBCTMJRwkaACAJLglBCQIJLAkIACAJNQk+CRoJMglAACAJOQlLCSQJQAAuACAJOAkXCTMJQAAgCSwJPgkzCT4JOAk+CTkJRwkCCRoJQAAgCRUJIQk1CR8AIAk2CT8JOAlNCSQALAAgCSwJQQkyCQIJJgAgCTkJPwkoCU0JJglBCSQJTQk1CT4JGgk+ACAJLAlBCTIJAgkmACAJBgk1CT4JHAAgCTYJPwk1CTgJRwkoCT4ALgANAAoJHAlHACAJFQlLCSMJJAk+CTkJQAAgCSgJRwkkCT4AIAkcCT4JOQk/CTAAIAkqCSMJRwAgCSwJSwkyCSMJPgkwACAJKAk+CTkJPwAgCSQJRwkaACAJOQk+ACAJKAlHCSQJPgAgCQUJFwkmCUAAIAk4CTkJHAAgCSoJIwlHACAJLAlLCTIJQQkoACAJHAk+CSQJSwAuACAJFQk+CTAJIwAgCQ8JFQkaACAgGQkGCTkJRwAgCRYJMAlHACAJJAkwACAJFQk+ACAJLAlLCTIJQQAgCSgJLwlHAD8gGQAgCQYJIwk/ACAJNQk/CRoJPgkwACAJDwkVCTIJTQkvCT4JNQkwACAJFQlLCSMJPwk5CUAAIAkuCU0JOQkjCUcJMgAuAC4JBQkXCSYJPwAgCS4JPgkdCU0JLwk+ACAJLgkoCT4JJAkyCUcAIAksCUsJMgkyCT4ALgAgCRUJPgk5CT8AIAk4CTAJFQk+CTAJPwAgCRUJPgkuCUcAIAk5CUsJJAAgCSgJPgk5CT8JJAAgCSgJQQk4CSQJTQkvCT4AIAkrCTwJPgkICTIJQAAgCRcJSwkzCT4AIAk5CUsJJAk+CSQALgAuCRUJPgkuACAJFQlLCSMAIAkVCTAJIwk+CTAAPwAgCRUJPgkuCQIAIAkVCT4AIAk5CUsJJAAgCSgJPgk5CT8JJAA/ACAJLwk+ACAJNQlHCTMJPwAgCS8JPgAgCSgJRwkkCU0JLwk+CSgJRwAgCTgJPgkCCRcJPwkkCTIJRwAgCQUJMAlHACAJLwk+ACAJKwk8CT4JLwkyCUAAIAkoCUEJOAkkCU0JLwk+ACAJFwlLCTMJPgAgCRUJMAlBCSgAIAkVCT4JLwAgCSAJRwk1CSQJPgkvACAJLgkCCSQJTQkwCT4JMgkvCT4JJAAuACAJHAkwACAJLwk+ACAJKwk8CT4JLwkyCUAAIAkuCQIJJAlNCTAJPgkyCS8JPgkkACAJKAlBCTgJJAlNCS8JPgAgCSoJIQlBCSgAIAkwCT4JOQkjCT4JMAAgCQUJOAkkCUAJMgAgCSQJMAAgCQYJFwAgCTIJPgk1CUAJKAAgCS4JAgkkCU0JMAk+CTIJLwk+CTIJPgAuACAJLQlBCRUJAgkqACAJHQk+CTIJPgAgCTkJSwkkCT4AIAktCUEJFQkCCSoAIAkvCT4AICAZCTgJTQkfCUcJHwkuCUcJAgkfIBkJNQkwAC4ADQAKCSoJPgkVCT8JOAlNCSQJPgkoCRoJTQkvCT4AIAkGCSQJAgkVCTUJPgkmCT8AIAkVCT4JMAk1CT4JLwk+ACAJFglBCSoJGgAgCTUJPgkiCTIJTQkvCT4AIAk5CUsJJAlNCS8JPgAuACAJKAlBCTgJJAlAACAJGAlBCTgJFglLCTAJQAAgCTkJSwkkACAJOQlLCSQJQAAuACAJBgkjCT8AIAkvCT4AIAk4CTAJFQk+CTAJGglHACAJFQk+CS8AIAkaCT4JMglBACAJOQlLCSQJRwAgCSQJMAAgCSoJPgkVCT8JOAlNCSQJPgkoCRoJTQkvCT4AIAkfCT8JLgAgCTIJPgAgCRUJTQkwCT8JFQlHCR8AIAkWCUcJMwk+CS8JMgk+ACAJLAlLCTIJNQk+CS8JGglHACwAIAksCT4JMwk+CTgJPgk5CUcJLAk+CQIJGgk+ACAJMAlLCRYJIAlLCRUAIAk4CTUJPgkyAC4ALgkFCTAJRwAgCS8JPgAgCSYJRwk2CT4JGglNCS8JPgAgCQ8JNQkiCU0JLwk+ACAJBgkkCQIJFQk1CT4JJgk/ACAJFQk+CTAJNQk+CS8JPgAgCTUJPgkiCTIJTQkvCT4AIAkFCTgJJAk+CSgJPgAgCRUJOAkyCU0JLwk+ACAJFQlNCTAJPwkVCUcJHwAgCRYJRwkzCSMJTQkvCT4JGglNCS8JPgAgCSwJPgkkCT4AIAkVCTAJJAk+AD8AIAk5CUcAIAk5CUsJJAk+ACAJFQk+CS4JPgAgCSgJLwlHAC4AIAkGCSMJPwAgCSwJPgkzCT4JOAk+CTkJRwksCT4JAgkoCUAAIAkPCRUJJgk+CRoAIAk4CT4JAgkXCUAJJAkyCUcADQAKIBwJLglAACAJLglBCQIJLAkICSQAIAkqCT4JFQk/CTgJTQkkCT4JKAkaCU0JLwk+ACAJHwk/CS4JMgk+ACAJFglHCTMJQQkoACAJJglHCSMJPgkwACAJKAk+CTkJPwAuIB0ADQAKCSQJTQkvCT4AIAk1CUcJMwlHACAJKgk+CTgJQQkoACAJJAlHACAJBgkcCRoJTQkvCT4AIAkmCT8JNQk4CT4JKgkwCU0JLwkCCSQAIAkqCT4JFQk/CTgJTQkkCT4JKAAgCR8JPwkuCSgJRwAgCS4JQQkCCSwJCAkkACAJKgk+CQoJMgAgCSAJRwk1CTIJRwkyCUcAIAkoCT4JOQk/ACwAIAkFCTAJRwAgCScJPgkhCTgJGgAgCSgJPgk5CT8ALgAgCRUJSwkjACAJLwk+ACAJBQkCCRcJPgkwCT4JNglAACAJFglHCTMJIwk+CTAAPwANAAoJLwk+ACAJLAk+CTMJPgk4CT4JOQlHCSwJPgkCCSgJPwAgCQUJKAlHCRUAIAkqCT8JIglNCS8JPgAgCSoJPgk5CT8JMglNCS8JPgAgCRgJIQk1CTIJTQkvCT4ALAAgCTYJPwk1CTgJSAkoCT8JFQAgCRgJIQk1CTIJRwAuACAJOQlHACAJNgk/CTUJOAlICSgJPwkVACAJLAk+CTMJPgk4CT4JOQlHCSwJPgkCCTgJPgkgCT8AIAkcCT8JNQAgCTkJPwAgCSYJTQkvCT4JLwkyCT4AIAkkCS8JPgkwAC4AIAkVCUcJNQkzACAJLAk+CTMJPgk4CT4JOQlHCSwJPgkCCRoJPgAgCQYJJglHCTYAIAkGCTkJRwAgCS4JTQk5CSMJQQkoACAJBgkqCTIJTQkvCT4AIAkcCT8JNQk+CRoJQAAgCSsJPAk/CRUJQAkwACAJKAAgCRUJMAkkCT4AIAkFCSgJRwkVACAJNgk/CTUJOAlICSgJPwkVCT4JAgkoCUAAIAkGCSoJMglHACAJMAkVCU0JJAAgCTgJPgkCCSEJMglHACAJBgk5CUcALgAgCTkJRwAgCRUJRwk1CTMAIAkGCSMJPwAgCRUJRwk1CTMAIAksCT4JMwk+CTgJPgk5CUcJLAk+CQIJGglNCS8JPgAgCSoJTQkwCUcJLgk+CSoJSwkfCT8ALgAgCRwJPwk1CT4JMgk+ACAJHAk/CTUAIAkmCUcJIwk+CTAJPwAgCTIJPgkWCUsAIAkuCT4JIwk4CUcALgANAAogHAkVCUcJNQkzACAJDwkVACAJBgkmCUcJNgAgCSYJTQkvCT4AIAk4CT4JOQlHCSwAIAkcCT8JNQk+CRoJQAk5CUAAIAkqCTAJTQk1CT4AIAkVCTAJIwk+CTAAIAkoCT4JOQk/IB0AIAk5CT4AIAk2CSwJTQkmACAJBgk5CUcAIAk2CT8JNQk4CUgJKAk/CRUJPgkaCT4ALgANAAoJLAk+CTMJPgk4CT4JOQlHCSwAIAkPCRUAIAkFCTgJAgAgCTUJTQkvCRUJTQkkCT8JLgkkCU0JNQAgCRUJPwAgCRwJTQkvCT4JGglAACAJEwkzCRYAIAkVCTAJQQkoACAJJglHCSMJTQkvCT4JGglAACAJFwkwCRwAIAkoCT4JOQk/AC4AIAkFCRYJTQkWCUcAIAkuCTkJPgkwCT4JNwlNCR8JTQkwACAJJAlNCS8JPgkCCSgJPgAgCTgJPgk5CUcJLAAgCS8JPgAgCSgJPgk1CT4JKAlAACAJEwkzCRYJJAlLAC4AIAkPCRUJHwk+ACAJLgk+CSMJQQk4ACwAIAkPCRUAIAkcCU0JNQkyCQIJJAAgCTUJPwkaCT4JMAAgCS4JKAk+CTYJQAAsACAJBQkCCRcJPgkwACAJLglBCRYJPgk2CUAAIAkYCUcJCgkoACAJDwkVACAJOAkCCRgJHwkoCT4AIAksCSgJNQkkCUsAICAcCTYJPwk1CTgJRwkoCT4gHQAuACAJBgkcACAJNgk/CTUJOAlHCSgJPgkaCT4AIAk1CT8JGgk+CTAAIAkVCUcJMglNCS8JPgAgCTYJPwk1CT4JLwAgCQ8JFQAgCTkJPwAgCTAJPgkcCRUJPwkvACAJKAk/CTAJTQkjCS8AIAkYCUcJJAkyCT4AIAkcCT4JJAAgCSgJPgk5CT8AIAkPCTUJIgk/ACAJKglNCTAJGgkCCSEAIAkkCT4JFQkkAC4AIAkPCRUJHwlNCS8JPgAgCS4JPgkjCTgJPgkaCU0JLwk+ACAJBgk1CT4JHAk+CSgJRwAgCQkJLQk+ACAJKglHCR8JMglHCTIJPgAgCS4JOQk+CTAJPgk3CU0JHwlNCTAAIAk2CT4JAgkkACAJOQlLCQoAIAk2CRUJJAlLACAJJAkwACAJNgk+CQIJJAAgCS4JOQk+CTAJPgk3CU0JHwlNCTAAIAkqCUcJHwlBACAJNgkVCSQJSwAuAA0ACgkPCRUAIAkuCT4JIwlBCTgAIAkqCUEJMAlNCSMAIAk2CT8JNQk+CRwJQAAgCSoJPgkwCU0JFQAtIB0JNgk/CTUJJAk/CTAJTQklIB0AIAkWCRoJPgkWCRoAIAktCTAJNQlBCRoAIAkVCTgJRwAgCTYJFQkkCUsALAAgCSQJRwk5CT8AIAkFCSgJRwkVACAJNQkwCU0JNwlHACAJOAkyCRcAIAk5CUcAIAkFCRwJQQkoACAJKAAgCTgJQQkfCTIJRwkyCUcAIAkVCUsJIQlHCRoALgAgCS4JTQk5CSMJQQkoCRoAIAksCT4JMwk+CTgJPgk5CUcJLAAgCSAJPgkVCTAJRwAgCTkJRwAgCSgJQQk4CSQJRwAgCTUJTQkvCRUJTQkkCT8JLgkkCU0JNQAgCSgJOAlBCSgAIAkPCRUAIAkaCS4JJAlNCRUJPgkwACAJBgk5CUcJJAAuAA0ACgkuCTAJPgkgCT8AIAkFCTgJTQkuCT8JJAlHCRoJQAAgCQYJFwAgCRwJTQkvCT4JKAlHACAJLgk5CT4JMAk+CTcJTQkfCU0JMAk+CSQJMglNCS8JPgAgCS4JMAk+CSAJPwAgCS4JPgkjCTgJPgkkACAJJwkXCScJFwkkACAJIAlHCTUJMglAACAJBQk2CU0JLwk+ACAJNQlNCS8JFQlNCSQJPwkuCSQJTQk1CT4JOAAgCS4JPgkdCUcAIAkqCU0JMAkjCT4JLgAsACAJJAlNCS8JPgkCCRoJPgAgCQYJJgkwCU0JNgAgCRgJRwkKCSgAIAkuCTkJPgkwCT4JNwlNCR8JTQkwACAJGAkhCTUJPgkvCRoJPgAgCSoJTQkwCS8JJAlNCSgAIAkVCTAJQQkvCT4ALgANAAoJHAkvACAJLgk5CT4JMAk+CTcJTQkfCU0JMAAuAA0ACg=="
}

function getData(jsonForm){
    var el = document.querySelector('form[name='+jsonForm+']');
    var inputs = el.querySelectorAll('input,select,textarea');
    
    var data = {};
    for(var i=0; i< inputs.length; i++){
      switch(inputs[i].type){
          case 'file':
                      var file = inputs[i].files[0];
                      if(file){
                        var oReader = new FileReader();
                        (function(i){
                          oReader.onload = function(e){
                            data[inputs[i].name] = e.target.result;
                            alert(JSON.stringify(data));
                            document.querySelector('p').innerHTML = JSON.stringify(data);
                            console.dir(data);
                      };
                      oReader.readAsDataURL(file);      
                      })(i)
                      }
                     
                      break;
          case 'checkbox':     
                      data[inputs[i].name] = inputs[i].checked;
                      break;
          default:
                      data[inputs[i].name] = inputs[i].value;
      
      }
    }
    document.querySelector('p').innerHTML = JSON.stringify(data);
  }
form{width: 400px}
<form name="jsonForm">
  <input type="text" name="firstname" value="John" />
  <input type="text" name="surname" value="doe" />
  <input type="email" name="email" value="[email protected]" />
 M: <input type="radio" name="gender" value="male" checked/>
 F: <input type="radio" name="gender" value="female" />
 subscribe: <input type="checkbox" name="subscribe" checked/>
  <input type="file" name="upload" />
  <select name="selection"><option value=M>M</option><option value=J>J</option></select>
  <textarea name="description"></textarea>
</form>
<hr/>
<input type=button value="getData" onclick=getData('jsonForm')>
<p><p>
0
vinayakj

パーティーに遅れて、しかしこれは私がそれをする方法です：

(function getFormData(){
    var form, inputs, formData = {}, outputdiv;
    (function init(){
        outputdiv = document.getElementById("output");
        output();
    })();  
    
    function build(){
        form = document.querySelector("form"),
        inputs = form.querySelectorAll("input, select, textarea"),
        formData = {},
        arr = [];
        for(var i=0; i< inputs.length; i++){
            var input = inputs[i];
            input.onchange  = function(){output();};
            if(input.type=='radio'){
                if(input.checked){
                   arr.Push(input.name,input.value);
                }
            } else if(input.type=='checkbox'){                
                if(input.checked){
                    arr.Push(input.name,input.value);
                }
            } else if(input.multiple){                
                //find each selected child
                var options = input && input.options;
                for (var o=0; o<options.length; o++) {
                    var opt = options[o],
                        val = (opt.value || opt.text)
                    if (opt.selected) {
                        arr.Push(input.name,val);
                    }
                }
            } else {
                arr.Push(input.name,input.value);
            }            
        }
        var formdata = JSON.stringify(arr);
        return formdata;
    }
    function output(){
       outputdiv.innerHTML = build();
    }
    
})()
<form>
  <input type="text" name="text1" value="" />
  <input type="text" name="text2" value="" />
  <input type="email" name="text3" value="" />
    <br />
  <input type="radio" name="radio" value="radio1" />
  <input type="radio" name="radio" value="radio2" />
  <input type="radio" name="radio" value="radio3" />
    <br />
  <input type="checkbox" name="checkboxes" value="checkbox1" />
  <input type="checkbox" name="checkboxes" value="checkbox2" />
  <input type="checkbox" name="checkboxes" value="checkbox3" />
    <br />
    <textarea name="textarea"></textarea>
    <br />
    <select name="option">
        <option value="">options</option>
        <option>option text</option>
        <option value="option 2 value">option 2 text</option>
        <option>option 3 text</option>
    </select>
  <br />
    <select multiple="true" name="options">
        <option>opt multi 1</option>
        <option value="opt multi 2 value">opt multi 2</option>
        <option>opt multi 3</option>
    </select>
</form>
<div id="output"></div>
0
Moob