javascriptで更新した値をPHP側の$_POSTや$

javascriptのFormData.setを使ってinputタグの値を更新してサブミットしたらPHPのグローバル変数、$_POSTや$_FILESで受け取りたいのですがうまくいきません。
何を付け加えたらサーバー側にデータを反映できますか。
ご助力お願いいたします。

HTML
1コード
2<body>
3<form id="form" method="post">
4<input id="text" type="text" name="text"/>
5<button type="submit">送信</button>
6</form>

JS
1コード
2const postForm = new FormData(document.forms.form);
3postForm.set('text','こんにちは');
4for (let setPost of postForm) {
5                            
6  console.log(setPost);
7}

maisumakun

2021/03/30 10:23

postFormが使われているコードはこれだけですか？

fuyukixxx

2021/03/30 11:12

追記ありがとうございます。これだけです。

takasima20

2021/03/30 11:32

よくわかりませんが、name属性が必須っぽいスよ?

yambejp

2021/03/30 12:13

何がしたいか分かりづらいですね非同期で送りたいのか、サブミットしたいのかもわかりませんサブミットするならjsは不要です（サブミットする際に項目を追加するなら可能ですが）またtype=fileの記述がないので$_FILESで受けられるソースにはなってないです

行動規範の内容に同意します

回答2件

ベストアンサー

FormDataを使ったAjaxによるデータ送信と、ブラウザのsubmitを使ったフォーム送信は、1回の送信に対して両立しません。どちらか一方だけを使う形にしてください。以下2つのどちらかのパターンになります。

作ったFormDataオブジェクトをXMLHTTPRequestなりfetchなりでサーバサイドへ送信する
FormDataオブジェクトは作らず、<input type="hidden">を動的にフォーム内に作って値を書き出し、ブラウザのフォーム送信に任せる

投稿2021/03/30 11:28

maisumakun

総合スコア146018

maisumakun

2021/03/30 11:28

FormDataは、newしただけでは単なるオブジェクトです。サーバサイドに影響を及ぼすことはありません。

fuyukixxx

2021/03/31 08:51

回答ありがとうございます。FormDataのパターンは一回置いておきます。オーディオデータを更新したいので$_FILESでうけとりたく、<input type="file">のvalueにblobデータを上書きしてみたのですが、エラーがでます。 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. <input type="file">のvalue属性に上書きするには何が最適でしょうか。すみませんが回答宜しくお願いします。

maisumakun

2021/03/31 08:54

<input type="file">に書き出す場合、value経由ではなく、.filesにFileListというオブジェクトを入れる必要があります。しかも、iOSは現行の14系列でも自力でFileListを作る方法がないため、実行できません。

行動規範の内容に同意します