質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

503閲覧

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

yamatail

総合スコア77

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/06/01 07:57

編集2023/06/01 08:18

実現したいこと

webフォームを作っています。

作成したいフォームは、
必須動作がない場合はサーバーへは送信せずエラーを表示し、
必須動作を満たす場合のみサーバーへ送信する(次ページに行く)検証ページの仕組みです。

前提

所定のボタン[見積りボタン]を押さずに送信ボタン[内容確認ボタン]をクリックすると、
「必須です」というエラーが表示されます。

以下のコードは、「JavaScriptを使った基本的なフォームの検証」というページを参考に作ったものです。
今回は「ボタンクリック動作」を必須項目にしたいと考えております。

具体的には、
「見積り」ボタンを押している → 次のページに飛ぶ
「見積り」ボタンを押していない → サーバーに送信する前に「必須です」というエラーを表示させる。
という具合です。

============<修正点>=================

発生している問題・エラーメッセージ

フラグの立て方が分かりません。

=====================================
1. フラグを用意する
phpの45行目
<input class="push" type="hidden" name="swich" value=""></input>
のclass=""push"のvalueをフラグにすることにした。
・valueが空白なら → サーバー送信する前にエラー文字を表示

2. [見積り]のボタンを押すと、value="on"の追加
見積りボタンを押すとjavascriptの29行目からの操作で
<input class="push" type="hidden" name="swich" value="on"></input>
が追加される。

3. 内容確認ボタンを押すが追加したフラグが反映されない。
内容確認(フォーム送信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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/06/01 08:26

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

回答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

yambejp

総合スコア115275

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamatail

2023/06/05 02:06

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

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
int32_t

総合スコア21194

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamatail

2023/06/01 08:15

そうなのですね。ありがとうございます。特に問題なく動いていたので全く気が付きませんでした。
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"; にでも変えると期待通りになるかもしれません。 この操作で上手く思う通りの動作になりました! ありがとうございます。大変参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問