①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、入力フォームから受け取っ

解決済

質問者：hayosato
質問日時：2022/05/10 16:45
回答数：2件

①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、
入力フォームから受け取った情報を確認表示画面で表示して、さらに、「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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2022/05/10 17:34

こんにちは

ご提示の状態だと button 要素の type が submit になっているので、ボタンを押したときにブラウザは送信しようとします。
ですので、スクリプトでアラートを出した後にも、制御が戻った段階でブラウザは（常に）送信します。

解決法としては、
1）ご提示のスクリプトのように、「チェックされていれば送信する」というロジックにするのなら、ボタン要素の typeを submit ではなく button などにしておくことで、ご希望のようになるでしょう。
ただし、button 要素の name 属性が submit のままだと、formのsubmitメソッドと被ってしまうため、上手く動作しません。
submit_button とするなど、別の名称にしておく必要があります。

2）ボタンの type は現状の submit のままとして、スクリプトを「チェックされていなければ、送信を中止する」ようにするのなら、ブラウザの送信処理を中止する必要があります。
　function(e) {
のようにして、eventオブジェクトを受け取り、
　e.preventDefault();
の1行を追加することで、送信処理をキャンセルできます。
（こちらの場合は、スクリプトからの submit() 処理は不要です。）

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。上記の方法で解決できました。

通報する

お礼日時：2022/05/11 10:56

No.1

回答者： sukitaro
回答日時：2022/05/10 17:24

こんな感じでしょうか。

doui.addEventListener('click', function(e) {
if (document.doui_form.doui.value != "suru") {
alert("同意してください。");
e.preventDefault();
} else {
document.doui_form.submit();
}
})