Q&A
input#numberに入力があっても表示されない、という事でしょうか？
前提・実現したいこと
番号とメールアドレスを入力すると、以下のことを行ってくれるwebページを作成しています。
- メールアドレスが適切な形かを正規表現でチェック
- 適切でない場合、警告のダイアログを表示
- 適切な場合、メールアドレス、番号を書いた確認ダイアログを表示
- [OK]を押した場合、フォームのデータをsend_mail.phpに送る
発生している問題・エラーメッセージ
ダイアログが表示されません。フォームのデータは正常にsend_mail.phpに送信されています。
初歩的なミスかもしれませんが、よろしくお願いします。
該当のソースコード
PHP
1<!DOCTYPE html> 2<!--メールフォームです。下にinputタグとかあるよ--> 3<html lang="ja" dir="ltr"> 4 <head> 5 <!--メタタグ設定--> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 9 <!--リンクタグ設定--> 10 <link rel="stylesheet" href="./main_styles.css"> 11 <script type="text/javascript" src="mail_check.js"></script> 12 <title>メールフォーム</title> 13 </head> 14 <body> 15 <div id="contents"> 16 <div id="mail-form"> 17 <form action="./send_mail.php" method="post" name="mail_form" onsubmit="return mail_check();"> 18 <p> 19 番号:<input type="text" name="number" id="number" size="4" maxlength="4"> 20 </p> 21 <p> 22 メールアドレス:<input type="text" name="e_mail" id="number" size="40"> 23 </p> 24 <p> 25 <input type="submit" value="送信！"> 26 </p> 27 </form> 28 </div> 29 </div> 30 </body> 31</html>
JavaScript
1function mail_verification( mail ) { //メールアドレスの形式を正規表現でチェック 2 var mail_regex1 = new RegExp( '(?:[-!#-\'*+/-9=?A-Z^-~]+.?(?:.[-!#-\'*+/-9=?A-Z^-~]+)*|"(?:[!#-[]-~]|\\[\x09 -~])*")@[-!#-\'*+/-9=?A-Z^-~]+(?:.[-!#-\'*+/-9=?A-Z^-~]+)*' ); 3 var mail_regex2 = new RegExp( '^[^\@]+\@[^\@]+$' ); 4 if( mail.match( mail_regex1 ) && mail.match( mail_regex2 ) ) { 5 // 全角チェック 6 if( mail.match( /[^a-zA-Z0-9\!\"\#$\%\&\'()\=\~\|\-^\\@[\;\:]\,./\\<\>?\_\`\{+*\} ]/ ) ) { return false; } 7 // 末尾TLDチェック（〜.co,jpなどの末尾ミスチェック用） 8 if( !mail.match( /.[a-z]+$/ ) ) { return false; } 9 return true; 10 } else { 11 return false; 12 } 13} 14 15function mail_check(){ //メールアドレスの形式をチェック後、確認メッセージを表示 16 var e_mail = document.mail_form.e_mail.value; 17 var number = document.mail_form.number.value; 18 if (mail_verification(e_mail)) { 19 var result = window.confirm('以下の内容で間違いないですか。\n'+'番号:'+number+'\nメールアドレス:'+e_mail); 20 if(result){ 21 return true; 22 } else { 23 return false; 24 } 25 } else { 26 window.alert("メールアドレスがあっているか確認してください。"); 27 return false; 28 } 29}
試したこと
JavaScriptを外部ファイルからPHPにコピペして、headタグ内のscriptはコメントアウトしたところ、ダイアログは表示されましたが、
以下の内容で間違いないですか。 番号: メールアドレス:(入力したメールアドレス) [キャンセル][OK]
となり、メールアドレスは正常に表示されますが、番号が表示されません。OK、キャンセルのボタンは期待通りの動作をしています。
番号、メールアドレスともに入力しても、ダイアログにはメールアドレスしか表示されません。
もしかしたら、e_mail要素のIDが、
numberになってるからかもですね。
<input type="text" name="e_mail" id="number" size="40">
それを直してもだめなら、コメントください。
なるほど。うまくいきました。ありがとうございます。
外部ファイルに記述すると動かないのは何故でしょうか。
あと、できれば回答として投稿して欲しいです。
なるほど、やはりそこでしたか。
わかりました、投稿させていただきますね。
外部ファイルに関しては、再度、パスが合っているか、console.log("test")
などを、先頭行にて記載して確認してみてください。
回答2件
0
ベストアンサー
これは、
<input type="text" name="e_mail" id="number" size="40">
のIDが、numberと、重複していたからと思われます。
こうすることによって今回のような現象が起きる原因は二つほどあるかと思われます。
- HTML上でのIDは一意でなければいけないから
まぁ、IDなので、当然と言えば当然ですね。
特にJSの処理に不都合起きます。
- HTML上のIDつき要素は、JavaScript上で同名のグローバル変数として格納されるから
これ、意外に知られてないですが、
実はそうなんです。
つまり、input#e_mailと定義すると、
JS上では、e_mailというグローバル変数に、同ID要素が格納されます。
故に、上記と併せて今回のような不整合がおきたものと思われます。
外部ファイルだと動作しない件については、
再度ファイルパスが合っているかなどをご確認ください。
相対パスになっているのも、ファイルパスが繋がっていないのも原因の可能性があります。
（特にファイルの置き場所が煩雑になりやすい、PHPを使用したサイトでは起きがち）
投稿2020/08/03 13:11
総合スコア9528
0
ちょっとイメージが違うかもしれませんが
投稿2020/08/03 13:03
総合スコア114839
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('form').addEventListener('submit',e=>{
if(!confirm(document.querySelector('#email').value+":OK?")){
e.preventDefault();
}
});
});
</script>
<form>
<input type="email" name="email" id="email" required>
<input type="submit" value="go">
</form>
あなたの回答
tips
プレビュー
