web-dev-qa-db-ja.com

既存のフォームから作成されたFormDataをログに記録すると空に見える

Webフォームからキー（入力名など）と値（入力値）のセットを取得しようとしています。

_<body>
  <form>
    <input type="text" name="banana" value="Swag">
  </form>

  <script>
    var form = document.querySelector('form');
    var formData = new FormData(form);
  </script>
</body>
_

FormData documentation によれば、formDataにはフォームのキーと値が含まれている必要があります。ただし、console.log(formData)はformDataが空であることを示しています。

FormDataを使用してフォームからデータをすばやく取得するにはどうすればよいですか？

JSFiddle

javascriptform-data
36
mikemaccana

Update： XHR仕様 には、FormDataオブジェクトを検査するためのいくつかの関数が追加されました。

FireFoxはv39.0以降の新しい機能をサポートしています 、 Chromeはv50でサポートされる予定です 。他のブラウザについてはわかりません。

var form = document.querySelector('form');
var formData = new FormData(form);

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

//or

console.log(...formData)
78
Farray

私も同じ問題に直面しました。コンソールで見ることができませんでした。以下をajaxリクエストに追加する必要があります。これにより、データが送信されます

processData: false, contentType: false
9
Lingasamy Sakthivel

ただし、console.log(formData)はformDataが空であることを示しています。

「空」とはどういう意味ですか？ Chromeでこれをテストすると、‣ FormData {append: function} ...これは、FormDataオブジェクトであると言っています。私はフィドルを作成し、 これに合わせてコードを拡張しました ：

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

...これは、Chrome Developer Tools Networkパネルで見たものです：

HTTP request

したがって、コードは期待どおりに機能しています。

ここでの切断は、FormDataがVanilla JavaScriptオブジェクトまたは配列のように機能し、その内容を直接確認して操作できることを期待していることだと思います。残念ながら、そのようには機能しません。FormDataには そのパブリックAPI に1つのメソッドしかありません。これはappendです。できることは、作成して値を追加し、XMLHttpRequestに渡すことだけです。

検査および操作できる方法でフォームの値を取得する場合は、入力要素を反復処理して各値を1つずつ取得するか、または他の誰かが書いた関数、例えばjQueryの。 SOスレッドにいくつかのアプローチがあるスレッド： JavaScript/jQueryでフォームデータを取得するにはどうすればよいですか？

8
Jordan Running

FormData のMDNドキュメントに従って

Entries（）の代わりに、FormDataを実装するオブジェクトをfor ... of構造で直接使用できます。for（var p of myFormData）は、for（var p of myFormData.entries（））と同等です。

FormData.entries（）を繰り返し処理してもうまくいきませんでした。

FormDataが空かどうかを確認するために私が行うことは次のとおりです。

                var isFormDataEmpty= true;
                for (var p of formData) {
                    isFormDataEmpty= false;
                    break;
                }

FormDataを反復処理するとアップロードされたファイルが提供されるため、ファイル名、ファイルタイプの検証などを取得するために使用できます。

4
Sudarshan_SMD