①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、
入力フォームから受け取った情報を確認表示画面で表示して、さらに、「javascriptで同意のチェック」に同意して、ボタンをクリックしたら、情報が送信完了画面に送信されるようになっているのですが、「同意しない」に
チェックを入れて、ボタンをクリックすると、勝手に送信してしまいます。
これを阻止したいのですが、どうしたらよいでしょうか?
提示コードは②の確認表示画面コードです。
画像付きのボタンです。formタグ内にonsubmit="return false"を追加すると、
ボタンが反応しないです。
<?php
session_start();
if(isset($_SESSION['name'])){
$age = $_SESSION['age'];
$_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(48));
$token = htmlspecialchars($_SESSION['token'], ENT_QUOTES);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<form action ="LPmouth-completion-screen1.php" method ="post" name="doui_form">
<input type ="hidden" name ="token" value ="<?php echo $token ?>">
<div class="row">
<label class="col-sm-2 control-label" for="name">名前:<small><?php echo $name; ?></small></label>
</div>
<div class="radio_text">
<section>
<label class="radio_text">
<input type="radio" name="doui" value="suru" checked>同意する
</label>
<label class="radio_text">
<input type="radio" name="doui" value="shinai">同意しない
</label>
</section>
</div>
<div class="auto-style1">
<!--ボタンの画像-->
<button type="submit" id="soushin" name="submit" class="auto-style4" value="submit">
<img src="image2/25mouth.png" alt="確認画面へ" class="example8"/></button>
</div>
<script>
//ボタンをクリックした時に同意しないを選択した時にエラーを発生させる
var doui = document.getElementById('soushin');
doui.addEventListener('click', function() {
if (document.doui_form.doui.value != "suru") {
alert("同意してください。");
} else {
document.doui_form.submit();
}
})
</script>
</form>
</body>
</html>
No.2ベストアンサー
- 回答日時:
こんにちは
ご提示の状態だと button 要素の type が submit になっているので、ボタンを押したときにブラウザは送信しようとします。
ですので、スクリプトでアラートを出した後にも、制御が戻った段階でブラウザは(常に)送信します。
解決法としては、
1)ご提示のスクリプトのように、「チェックされていれば送信する」というロジックにするのなら、ボタン要素の typeを submit ではなく button などにしておくことで、ご希望のようになるでしょう。
ただし、button 要素の name 属性が submit のままだと、formのsubmitメソッドと被ってしまうため、上手く動作しません。
submit_button とするなど、別の名称にしておく必要があります。
2)ボタンの type は現状の submit のままとして、スクリプトを「チェックされていなければ、送信を中止する」ようにするのなら、ブラウザの送信処理を中止する必要があります。
function(e) {
のようにして、eventオブジェクトを受け取り、
e.preventDefault();
の1行を追加することで、送信処理をキャンセルできます。
(こちらの場合は、スクリプトからの submit() 処理は不要です。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ジャバスクリプトについて。
-
プログラムについて。
-
スマフォではボタンを表示させ...
-
①入力フォーム→②確認表示画面→③...
-
特定の文字列を複数抜き出した...
-
アップロードファイルの種類に...
-
階層別の組織図の自動作成について
-
セレクトボックスで配列を呼び...
-
Googleフォームで選択肢に応じ...
-
二次元配列の全要素の全要素を...
-
追加ボタンを押した際に ok ボ...
-
指定時間になったら、WEBサイト...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
var exports = exports || {}; ...
-
ローディングアニメーションの...
-
jQueryで同じクラス名のものを...
-
変数名をどのようにつけるのが...
-
2段階プルダウンで1段階目の選...
-
Q&A掲示板の入力フォームに文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
jsで質問です。 displayプロパ...
-
画面遷移を行わずに同一ページ...
-
Googleフォームで選択肢に応じ...
-
特定の文字列を複数抜き出した...
-
フロントエンドフレームワーク...
-
変数名をどのようにつけるのが...
-
【JS】selectでchangeした時の...
-
React hooksが値を返して配列変...
-
オブジェクトから任意のプロパ...
-
指定時間になったら、WEBサイト...
-
Colorboxがうまく設置できません
-
二次元配列の中の各行の要素を...
-
読み込んだQRコードをフォーム...
-
IndexedDB を使ってファイルア...
-
HTMLで作った時報アプリが動き...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
①入力フォーム→②確認表示画面→③...
おすすめ情報