jQueryが実行されない件

【jQueryが実行されない件】

下記コードにてJQueyを実装したのですが、処理が走りません。

HTML,PHP,jQury
1
2<?php
3require_once('worldTimeZone.php');
4?>
5<!DOCTYPE html>
6<html lang="ja">
7  <head>
8    <meta charset="utf-8">
9    <title>世界時計</title>
10    <link rel="stylesheet" href="style.css">
11    <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
12  </head>
13  <body>
14    <div class="parent">
15      <form class="select-form" action="getTime.php" method="post">
16        <h1>世界各地域の時刻を表示するよ</h1><br>
17        <p>時刻を表示したい地域を選択してください</p><br>
18          <select id="nation" class="select-area" name="area">
19            <option class="selectOPT" value="select">選択して下さい</option>
20            <?php foreach ($WorldTimeZone as $key => $value): ?>
21              <option class="selectOPT" value="<?php echo $key; ?>"><?php echo $value; ?></option>
22            <?php endforeach; ?>
23          </select>
24          <input id="#submit" type="submit" value="表示">
25      </form>
26    </div>
27    <script type="application/javascript">
28        $('#submit').on('click', function(e){
29          var $nation = $('#nation').val();
30          if ($nation == 'select') {
31            alert("特定の地域を選択してください");
32            e.preventDefault();
33          }
34        });
35    </script>
36  </body>
37</html>

bodyタグが終わる前のスクリプトタグで、「選択してください」をクリックするとエラーメッセージをアラートで
表示してイベントを無効にするということをしています。

しかし、処理が実行されません。

どういった理由が考えられるでしょうか。JQueryは読み込んでいますし、コードのスペルミスなどもありません。

宜しくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

そもそもセレクタの#自体が「IDの」という意味合いがあるので、どうしても#submitというidのままいきたいなら$('#\#submit').ですけど、
HTML5から可能になった(というか制限が撤廃された)表現とはいえ、既にある回答の通り、あまり記号で始めない方が良いですね。

投稿2020/02/05 01:33

編集2020/02/05 04:32

m.ts10806

総合スコア80875

x_x

2020/02/05 04:29

$('#\#submit') と書かないといけません。

m.ts10806

2020/02/05 04:33 編集

x_xさんご指摘ありがとうございます。手元でも確認し、調整しました。

行動規範の内容に同意します

「選択してください」をクリックするとエラーメッセージをアラートで

表示してイベントを無効にするということをしています。

（古いブラウザでは動かないかもしれませんが）JavaScriptなしで実現できます。

javascript
1          <select id="nation" class="select-area" name="area" required>
2            <option class="selectOPT" value="">選択して下さい</option>

<select>にrequiredを適用することで、空の値の送信を阻止してくれるようになります。

もとのjQueryのほうですが、<input id="#submit">は$('#submit')では回収できません（IDに#など特殊な記号は入れないほうがいいです）。

投稿2020/02/04 23:17

maisumakun

総合スコア146018

submit イベントでやる方法

enter で submit されるケースもあるので。

$('form').on('submit', function(e){
    var $nation = $('#nation').val();
    if ($nation == 'select') {
        alert("特定の地域を選択してください");
        return false;
    }
    return true;
});

投稿2020/02/04 22:59

編集2020/02/05 01:50