[php][javascript]ボタンが押されたかどうかを検証するページを作りたい

実現したいこと

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});

Lhankor_Mhy

2023/06/01 08:26

『javascriptの36行目からの操作』とありますが、36行で終わってしまっているようです。おそらく、コードの途中で切れてしまっていますので、追加お願いします。

回答2件

この手の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

yambejp

総合スコア112600

回答へのコメント

yamatail

2023/06/05 02:06

よくある、規約同意のページで使われているものですね。確かにこちらの方がこのページを使うユーザーにとっては分かりやすいかもしれないです！こちらも大変参考になります。ありがとうございます！

ベストアンサー

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

int32_t

総合スコア19573

回答へのコメント

yamatail

2023/06/01 08:15

そうなのですね。ありがとうございます。特に問題なく動いていたので全く気が付きませんでした。

Lhankor_Mhy

2023/06/01 08:20

どうも、jQuery独自であるみたいです。 https://api.jquery.com/button-selector/

yamatail

2023/06/01 08:30

あっほんとですね。一番最初の所に、同じように使えますって書いてますね。参照ページまでご丁寧にありがとうございます。

int32_t

2023/06/01 08:39

げえ、独自拡張であるんですか。この回答は間違いです。失礼しました。

yamatail

2023/06/05 02:03 編集

>document.getElementById("swich").innerHTML = swich; を >document.querySelector('input[type=hidden]').value = "on"; にでも変えると期待通りになるかもしれません。この操作で上手く思う通りの動作になりました！ありがとうございます。大変参考になりました。

あなたの回答