web-dev-qa-db-ja.com

FormData値へのアクセス

javascriptのようにHTMLフォームから作成するFormDataオブジェクトがあります。 FormDataオブジェクトはあまり文書化されていないようです（間違ったものを検索しているだけかもしれません！）。

var form = new FormData(document.getElementById("form"));

私の質問

送信する前にこのFormDataオブジェクトのさまざまな入力値にアクセスするにはどうすればよいですか？例えば。 form.nameは、form.nameという名前で入力に入力された値にアクセスします。

javascripthtmlform-data
23
StuStirling

FormDataを使用してフォーム要素の値を取得できないようです。

FormDataオブジェクトを使用すると、キーと値のペアのセットをコンパイルして、XMLHttpRequestを使用して送信できます。 主にフォームデータの送信で使用することを目的としていますが、キー付きデータを送信するためにフォームとは独立して使用できます送信されるデータは、フォームのsubmit（）メソッドが送信に使用するものと同じ形式ですフォームのエンコードタイプが「multipart/form-data」に設定されている場合のデータ。

ただし、次のような単純なJavascriptを使用して実現できます。

var formElements = document.forms['myform'].elements['inputTypeName'].value;
18
Praveen

最初に、指定したとおりにフォームからFormDataオブジェクトを作成し、フォームから値を取得することは、受け入れられた回答で説明されている方法を使用することはできないと思います-これは補足です！

あなたはcanがformdataオブジェクトからいくつかのデータを取得するように見えます：

var formData = new FormData();
formData.append("email", "[email protected]");
formData.append("email", "[email protected]");
formData.get("email");

残念ながら、これはそのキーのfirstアイテムのみを返します。この場合、 'test1 @ test.com'を返します。

こちらもご覧ください： formdata getメソッドに関するMDN記事

お役に立てれば！

また、これをchromeでテストする場合は、実験的なWeb機能フラグを有効にする必要があります。

注：Chrome append以外のメソッドのサポートは、「Enable Experimental Web Platform Features」フラグの後ろに現在あります。

MDNページ;ブラウザー互換性セクション

14
Jeff Daze

FormData.get は、ごく一部のブラウザーで必要な処理を実行します-ブラウザー互換性チャートを見て、どのブラウザーを使用しているかを確認します（現在Chrome 50+およびFirefox 39 +）。次の形式の場合：

<form id="form">
  <input name="inputTypeName">
</form>

その入力の値にアクセスするには

var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");
9
carpeliam

@Jeff Dazeの以前のソリューションに追加するだけで、FormData.getAll("key name")関数を使用してオブジェクトからすべてのデータを取得できます。

7
Oculus Hut

これは、FormDataからキーと値のペアを取得するソリューションです。

var data = new FormData( document.getElementById('form') );
data = data.entries();              
var obj = data.next();
var retrieved = {};             
while(undefined !== obj.value) {    
    retrieved[obj.value[0]] = obj.value[1];
    obj = data.next();
}
console.log('retrieved: ',retrieved);
4
Juschel

[〜＃〜] mdn [〜＃〜] によると：

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

したがって、次のようなFormData値にアクセスできます。

var formData = new FormData(myForm);

for (var p of formData) {
    let name = p[0];
    let value = p[1];

    console.log(name, value)
}
1
gpaulini

別の解決策：
HTML：

<form>
<input name="searchtext"  type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>

JS：

$('.sb').click( function() {
    var myvar=document.querySelector('[name="searchtext"]').value;
    console.log("Variable value: " + myvar);
});
0
Erik