Q&A
「postされる」とは具体的にどういった意味でしょうか？フォームの内容が送信されてサーバーやデータベースに保存されるということでしょうか？
前提
ここに質問の内容を詳しく書いてください。
（例）
JavaScriptでフォームの入力エラーを確認する画面を作っています。入力が空の場合にエラーメッセージは正しく表示されているのですが入力がある場合に「formがpost」されずに困っています・・・。何か記述が足りませんでしょうか？
実現したいこと
- 入力がある状態で送信ボタン（submit）を押すと「formがpostされる」ようにしたい
発生している問題・エラーメッセージ
送信ボタンを押しても読み込まれません（formをpostすることができない）。
該当のソースコード
html
1<form action="" method="POST"> 2 <table> 3 <tbody> 4 <tr> 5 <th><label for="name">お名前</label></th> 6 <td><input type="text" name="name" id="name" placeholder="山田太郎"></td> 7 </tr> 8 <tr> 9 <th><div class="err-msg-name"></div></th> 10 <td><input type="submit" class="submit"></td> 11 </tr> 12 </tbody> 13 </table> 14</form>
javascript
1window.addEventListener('DOMContentLoaded', () => { 2 3 const submit = document.querySelector('.submit'); 4 5 submit.addEventListener('click', (e) => { 6 e.preventDefault(); 7 8 const name = document.querySelector('#name'); 9 const errMsgName = document.querySelector('.err-msg-name'); 10 if(!name.value){ 11 errMsgName.classList.add('form-invalid'); 12 errMsgName.textContent = 'お名前が入力されていません'; 13 name.classList.add('input-invalid'); 14 return; 15 }else{ 16 errMsgName.textContent =''; 17 name.classList.remove('input-invalid'); 18 } 19 20 }, false); 21}, false);
回答1件
0
ベストアンサー
質問者さまからの補足説明を聞き、内容を一新しました。
前提条件の確認
- 質問で提示されているHTMLはPHPファイルの中に書かれている。
- そのPHPファイルそのものに、フォーム送信時の処理が書かれている。
- そのため
<form action="">の中身は空とする。 - そうすると、指定のファイルではなく、そのファイルそのもののPHPコードを実行してくれる。
- そのため
- フォームがかかれているPHPファイルのPHPコードで処理してフォームの内容をPostしたい。
解決策
質問者さま自身お気づきの通り、event.preventDefault()が原因です。
これによりデフォルトの送信するという処理が停止されています。
ですので停止された処理を、再度実行してやる必要があります。
具体的にはForm.send()を使います。
＜記述例＞
javascript
1FORM.addEventListener('submit', event => { // フォームが送信される時にイベント発火 2 // デフォルトの送信処理を停止 3 event.preventDefault(); 4 5 // 何か処理して 6 nanika(); 7 8 // デフォルトの送信を行う 9 FORM.submit(); 10});
コード例
以上を踏まえたコードのサンプルです。デモページも用意しましたので併せてご覧ください。
- Demo on JSFiddle
- PHPがありませんので、送信処理がされたらエラーページに飛びます（それで成功です）。
html
1<form action="" method="POST" name="form"> 2 <table> 3 <tbody> 4 <tr> 5 <th><label for="name">お名前</label></th> 6 <td><input type="text" name="name" id="name" placeholder="山田太郎"></td> 7 </tr> 8 <tr> 9 <th><p id="err-msg-name"></p></th> 10 <td><input type="submit" value="Submit"></td> 11 </tr> 12 </tbody> 13 </table> 14</form>
javascript
1window.addEventListener('DOMContentLoaded', () => { 2 3 // 他でも再利用するかもしれないので、ひとまずここで要素を全て取得してみました 4 const form = document.form; 5 const inputName = document.form.name; 6 const errMsgName = document.querySelector('#err-msg-name'); 7 8 // 繰り返し使用するclass名は変数にいれておくとよいです。 9 // そうすると、class名に変更があっても、この一箇所を修正するだけで済みます。 10 let classFormInvalid = 'form-invalid'; 11 let classInputInvalid = 'input-invalid'; 12 13 let isValid = false; // Formの有効・無効状態を管理する変数（初期値：無効） 14 15 // Formが送信された時のイベント 16 form.addEventListener('submit', event => { 17 event.preventDefault(); 18 19 validateForm(); // バリデーション実行 20 if (!isValid) return; // Formが無効状態の場合、ここで処理を終了（以降の行は読み込まれない） 21 22 form.submit(); // Formが有効の場合のみ、デフォルトの送信処理を行う 23 }); 24 25 /** 26 * 入力欄を検証する関数 27 */ 28 function validateForm() { 29 if (inputName.value.isEmpty()) { // 入力欄が無記入の場合 30 errMsgName.classList.add(classFormInvalid); 31 errMsgName.textContent = 'お名前を入力してください'; 32 inputName.classList.add(classInputInvalid); 33 isValid = false; // Formの状態を無効にする 34 return; // ここで処理を終了（以降の行は読み込まれない） 35 } else { // 入力されている場合 36 errMsgName.classList.remove(classFormInvalid); 37 errMsgName.textContent = ''; 38 inputName.classList.remove(classInputInvalid); 39 isValid = true; // Formの状態を有効にする 40 } 41 } 42}, false); 43 44/** 45 * 文字がないことを判定するStringメソッド（空白のみの入力も、文字がないと判定する） 46 * @return {boolean} 文字がないときtrue / 文字があるときfalse 47 */ 48String.prototype.isEmpty = function() { 49 return this.trim() === ''; 50} 51// 上記のコードではこのメソッドを1度しか使っていませんが、 52// 今後再利用できそうなのでStringオブジェクトのメソッドとして作成しました。
- 空白（スペース）のみの入力でもOK判定されていたので、空白のみは不可判定となるようメソッドを追加
- その他、軽微な変更を行いました
投稿2022/09/24 16:58
編集2022/09/27 00:56総合スコア2316
ご回答ありがとうございます！
入力されている場合は、action="" method="POST"を実行したいのですが
送信ボタンを押しても入力内容を読み込むことができず困っています。
action=""は空白にしていると、自分自身のphpファイルを読み込んで
valueの内容（inputに入力したもの）をpostしてくれると思っているのですが間違っていますか？
・入力内容が空の場合＝JavaScriptでエラーメッセージを出す
・入力内容がある場合＝JavaScriptを動作させずformをpostする
ということができれば嬉しいです。
ご入力いただい分を試してみたのですが、入力内容がある場合に
inputのvalueをformに送信できない状態でformが動かないです。
どのようにすればよいかわかれば助かります。。
https://jsfiddle.net/y7regd96/6/
↑一度このコードをコピペして試していただいてもいいですか？HTMLとJS両方変更しています。無事できましたらよかったら教えてください！回答を編集して詳細を解説します〜
変更箇所は、
・HTMLにてform要素と送信ボタン要素にname属性をつけて、
・JSで要素を取得するときはname属性から取得して、
・送信時に .reset() のかわりに .requestSubmit() して、送信するようにしました。
修正ありがとうございます！早速試してみました！
空のときはしっかりと「お名前が入力されていません」と表示されています。
この点は修正前も同じでしたので問題なさそうです。
ただ、入力があった場合に「action」が動く気配はなく、何も起こりません。
記述として「action=""」があるので、入力があれば自分自身（たとえばtest.php）が再読込みされるはずですよね？
（これをformをpostしたいと言っていました。素人な表現でわかりにくく申し訳ございません）
「action=""」としても「action="test.php"」とするのも同じだと思うので「action=""」としています。
・入力が空ならエラーを表示（JavaScriptでメッセージ）
・入力が空じゃなければtest.phpのformがsubmitされる（formが通常にphp内で動作）ページが読み込まれる？
というシンプルな仕組みにしたいだけなのですがJavaScriptってすごくむずかしいんですね。。
もっと簡単にできると思っていたので、想像以上に複雑で驚きました・・・。勉強不足ですみません。
あといただいた内容のコピペ結果の補足として下記のエラーも表示されていました。
test.php:52 Uncaught TypeError: submit.requestSubmit is not a function
at HTMLInputElement.<anonymous>
ちなみに「test.php」の52行目には下記があります。
submit.requestSubmit();
JavaScriptすごく難しいですが、使えるようになったら楽しそうですね！
簡易版つくってみたのでこちらのHTML、JSコピペして試していただいてもいいですか？
お手数をおかけします。
https://jsfiddle.net/f182vjoa/8/
完成版もできました。コピペして検証お願いします。必ずHTML、JS両方コピペしてください。
https://jsfiddle.net/ujf31pwv/39/
簡易版ではうまくいったのに完成版ではずっとエラーで、原因がわからなくて、htmlをコピペではなく全部最初から打ち直したらいけました。
おそらく目に見えない何か不純物が混じっていたのだと思います。（コーディングしてるとたまにあります）
簡易版と完成版ありがとうございます！
両方コピペして試してみます！不純物が入ると動かないんですね。。。
少しでも記述間違いがあると動作しないようなので
素人にはハードルが高く苦戦しています・・・
jsfiddleという画面での完成版はしっかりと理想通りに動いていました！
constとletの違いもあまりわかっていない状態ですが
コードにメモを入れてもらっている点も助かります。
何度も回答していただき本当にありがとうございます！
もう少しテストしてみて動くかどうか試してみますね。
constは定数で、最初に宣言したら後から値が変更できません。
letは変数で、昔のvarと同じく、宣言したあとも値の変更ができます。
長いコードを書いていると意図せず変更したくない値を変更してしまうこともありますので、それを防止するためにconstを使います。
テスト結果をハラハラしながらお待ちしております。
テストした結果、無事動きました！！！
constとletの使い分けまで教えていただきありがとうございます！
varの方が記事ではよく見かけた気もするのですが
今の主流はconstとletなんですね。。。
この機会にJavaScriptを少しは使えるようになりたいので
まずはこの３つの意味を調べてみたいと思います！
何度もご教授いただき本当に助かりました。
ご丁寧に教えていただけたおかげで
JavaScriptが好きになりました！！
ありがとうございました！！！
PHPがもしお分かりでしたら、似てるのでとっつきやすいと思いますよー！
好きになっていただけたなんて最高の褒め言葉です。ありがとうございます。
私もまだまだ初心者なので精進します。
回答の内容をこれまでのやりとりを踏まえて一新しました。
今後このページに到達される誰かのお役に立ちますように。
今回色々とご教授いただいてなんとなく似ているなぁと思っていました！
これを機会にしっかりと学んでみたいと思います。きっかけをいただき感謝です。
また、記述内容を調整していただき本当にありがとうございます。
多くの方の役に立つページになれば私としてもすごく嬉しいです！！！
本当にお世話になりました！ありがとうございました！！！
あなたの回答
tips
プレビュー
