Q&A
『javascriptの36行目からの操作』とありますが、36行で終わってしまっているようです。
おそらく、コードの途中で切れてしまっていますので、追加お願いします。
実現したいこと
webフォームを作っています。
作成したいフォームは、
必須動作がない場合はサーバーへは送信せずエラーを表示し、
必須動作を満たす場合のみサーバーへ送信する（次ページに行く）検証ページの仕組みです。
前提
所定のボタン[見積りボタン]を押さずに送信ボタン[内容確認ボタン]をクリックすると、
「必須です」というエラーが表示されます。
以下のコードは、「JavaScriptを使った基本的なフォームの検証」というページを参考に作ったものです。
今回は「ボタンクリック動作」を必須項目にしたいと考えております。
具体的には、
「見積り」ボタンを押している → 次のページに飛ぶ
「見積り」ボタンを押していない → サーバーに送信する前に「必須です」というエラーを表示させる。
という具合です。
============＜修正点＞=================
発生している問題・エラーメッセージ
フラグの立て方が分かりません。
=====================================
１. フラグを用意する
phpの45行目
<input class="push" type="hidden" name="swich" value=""></input>
のclass=""push"のvalueをフラグにすることにした。
・valueが空白なら → サーバー送信する前にエラー文字を表示
２. [見積り]のボタンを押すと、value="on"の追加
見積りボタンを押すとjavascriptの29行目からの操作で
<input class="push" type="hidden" name="swich" value="on"></input>
が追加される。
３. 内容確認ボタンを押すが追加したフラグが反映されない。
内容確認（フォーム送信submit）ボタンを押してもclass="push"のvalueが更新されず空白のままです。
==================================
↑↑ 3. の内容確認ボタンを押したときにclass="push"のvalueが"on"変わってほしいです。
→ <input class="push" type="hidden" name="swich" value="on"></input>が反映されてほしい。
該当のソースコード
php
1<?php 2var_dump($_POST); //確認のため 3 4// 変数の初期化 5$page_flag = 0; 6 7if ( !empty($_POST['registration']) ) { 8 $page_flag = 1; 9} else { 10 $page_flag = 2; 11} 12 echo $page_flag; 13?> 14 15<?php if( $page_flag === 1 ): ?> 16 17<!DOCTYOE html> 18<html lang="ja"> 19<head> 20 <meta charset=shift_jis"> 21 <title>フォームテスト</title> 22</head> 23 24<body> 25 <p>内容確認</p> 26 <p>\10,000</p> 27 <p>これでいいですか？？</p> 28</body> 29 30 31<?php else: ?> 32 33<!DOCTYOE html> 34<html lang="ja"> 35<head> 36 <meta charset="shift_jis"> 37 <title>フォームテスト</title> 38 <script type="text/javascript" src="modules/js/jquery.min.js"></script> 39 <script type="text/javascript" src="jsfile/test2.js"></script> 40 <link rel="stylesheet" href="daikou19-css/test.css"> 41</head> 42 43<body> 44 <form name="myForm" class="btn_push" method="post" action="" novalidate> 45 <input class="push" type="hidden" name="swich" value=""></input> 46 <input type="button" value="見積り"> 47 <div id="swich"></div> 48 <div id="output_message"></div> 49 <button name="registration" value="内容確認">内容確認</button> 50 <button value="もどる" onClick="JavaScript:history.back()">もどる</button> 51 </form> 52</body> 53</html> 54<?php endif; ?>
javascript
1document.addEventListener('DOMContentLoaded', () => { 2 const btn_push = document.querySelector('.btn_push'); 3 if(btn_push) { 4 const errorClassName = 'error'; 5 const pushElems = document.querySelectorAll('.push'); 6 const createError = (elem, errorMessage) => { 7 const errorSpan = document.createElement('span'); 8 errorSpan.classList.add(errorClassName); 9 errorSpan.setAttribute('aria-live', 'polite'); 10 errorSpan.textContent = errorMessage; 11 elem.parentNode.appendChild(errorSpan); 12 } 13 btn_push.addEventListener('submit', (e) => { 14 const errorElems = btn_push.querySelectorAll('.' + errorClassName); 15 errorElems.forEach( (elem) => { 16 elem.remove(); 17 }); 18 pushElems.forEach( (elem) => { 19 const elemValue = elem.value.trim(); 20 if(elemValue.length === 0) { 21 createError(elem, '必須です'); 22 e.preventDefault(); 23 } 24 }); 25 }); 26 } 27}); 28 29$(document).ready(function () { 30 $("input[type=button]").click(function(){ 31 swich = "<input class=\"push\" type=\"hidden\" name=\"swich\" value=\"on\"></input>"; 32 input_message = "見積りしました。<br> \\10,000<br>になります"; 33 document.getElementById("output_message").innerHTML = input_message; 34 document.getElementById("swich").innerHTML = swich; 35 }); 36});
回答2件
0
この手のUIは「ユーザーに明示的に処理したことを確認させる」ことが肝要です
チェックボックスをつけさせるなどで対応してください
javascript
1<?php 2var_dump($_POST); 3?> 4<script> 5document.addEventListener('invalid',e=>{ 6 if(e.target.matches('[data-errtxt]')){ 7 alert(e.target.dataset.errtxt); 8 e.preventDefault(); 9 } 10},true); 11</script> 12<hr> 13<form method="post"> 14<input type="button" value="見積り"> 15<label><input type="checkbox" required data-errtxt="見積確認のチェックが必須です">見積もりを確認しました</label> 16<button type="submit" name="registration" value="内容確認">内容確認</button> 17</form>
投稿2023/06/02 00:26
総合スコア117674
よくある、規約同意のページで使われているものですね。
確かにこちらの方がこのページを使うユーザーにとっては分かりやすいかもしれないです！
こちらも大変参考になります。ありがとうございます！
0
ベストアンサー
HTMLに最初から存在する <input type=hidden> と、見積もりボタンで追加される <input type=hidden> の2つは別物です。前者はボタンを押しても value が変わらないので、送信時の検証に引っかかってしまいますね。
document.getElementById("swich").innerHTML = swich; を document.querySelector('input[type=hidden]').value = "on"; にでも変えると期待通りになるかもしれません。
以下は間違い回答です。
js
1 $("input:button").click(function(){
input:button は「:button 擬似クラスに該当する <input>」という意味ですが、:button 擬似クラスというものは存在しないかと思います。input[type=button] の間違いでしょうか。
jQueryを使わなければすぐに気づくミスですね。
投稿2023/06/01 08:04
編集2023/06/01 08:50
総合スコア21929
そうなのですね。ありがとうございます。特に問題なく動いていたので全く気が付きませんでした。
どうも、jQuery独自であるみたいです。
https://api.jquery.com/button-selector/
あっほんとですね。一番最初の所に、同じように使えますって書いてますね。参照ページまでご丁寧にありがとうございます。
げえ、独自拡張であるんですか。この回答は間違いです。失礼しました。
>document.getElementById("swich").innerHTML = swich; を >document.querySelector('input[type=hidden]').value = "on"; にでも変えると期待通りになるかもしれません。
この操作で上手く思う通りの動作になりました！
ありがとうございます。大変参考になりました。
あなたの回答
tips
プレビュー
