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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

892閲覧

javascriptでフォーム入力判定時にファイルにアクセスできませんと表示される

AN3000

総合スコア37

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

1クリップ

投稿2022/06/10 22:53

編集2022/06/12 09:32

お問い合わせフォームの入力判定をjavascriptでしているのですが、判定自体はうまくいっているものの入力後クリックするとファイルにアクセスできませんと表示されてしまい、原因がわからずに躓いています。

流れとしては【3項目すべて入力→確認ボタン押下→ステップバーが切り替わり、送信ボタンと戻るボタンが表示される】 ここまでできればと考えています。

なにが原因かわかる方いらっしゃいますでしょうか。
※表示崩れなどありましたら申し訳ありません。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="test.css"> 8 <title>Document</title> 9 10</head> 11<body> 12 <section id="contact" class="contact"> 13 <div class="section-h2"> 14 <h2>お問い合わせ</h2> 15 <p>Contact</p> 16 </div> 17 18 <ul class="stepbar"> 19 <li class="stepbar__item"><div class="stepbar__item-inner stepbar__item-inner--current">入力</div> 20 </li> 21 22 <li class="stepbar__item"> 23 <div class="stepbar__item-inner">確認</div> 24 </li> 25 26 <li class="stepbar__item"> 27 <div class="stepbar__item-inner">送信</div> 28 </li> 29 30 31 </ul> 32 33 <form action="post"> 34 <div class="form-area"> 35 <dl> 36 <div> 37 <dt> 38 <label for="manager-name" class="manager-name">名前</label> 39 </dt> 40 <dd> 41 <input type="text" name="manager-name" class="input-area" id="manager-name" required> 42 </dd> 43 </div> 44 45 <div> 46 <dt> 47 <label for="email">メールアドレス</label> 48 </dt> 49 <dd> 50 <input type="email" name="email" id="email" class="input-area" required> 51 </dd> 52 </div> 53 <div> 54 <dt> 55 <label for="content">お問い合わせ内容</label> 56 </dt> 57 <dd> 58 <textarea name="content" id="content" class="input-area" required></textarea> 59 </dd> 60 </div> 61 62 <div class="btn-area"> 63 <input type="hidden" value="戻る" class="return-btn"> 64 <input type="submit" value="確認" class="send-btn"> 65 </div> 66 67 </dl> 68 69 </div> 70 71 </form> 72 </section> 73 <script src="test.js"></script> 74</body> 75</html>

css

1@charset "UTF-8"; 2.contact { 3 background-color: #f5f5f5; 4 /* 重なり順を設定 */ 5} 6 7.contact .section-h2 { 8 padding-top: initial; 9 margin-top: 50px; 10} 11 12.contact .stepbar { 13 display: -webkit-box; 14 display: -ms-flexbox; 15 display: flex; 16 -webkit-box-pack: center; 17 -ms-flex-pack: center; 18 justify-content: center; 19 width: 90%; 20 margin: 16px auto 30px auto; 21 padding: 0; 22 list-style: none; 23 max-width: 600px; 24} 25 26.contact .stepbar__item { 27 -webkit-box-sizing: border-box; 28 box-sizing: border-box; 29 position: relative; 30 width: calc((100% - 30px) / 3); 31 height: 30px; 32 margin: 0 1px; 33 padding: 1px; 34 background: black; 35} 36 37.contact .stepbar__item:nth-child(1) { 38 z-index: 4; 39} 40 41.contact .stepbar__item:nth-child(2) { 42 z-index: 3; 43} 44 45.contact .stepbar__item:nth-child(3) { 46 z-index: 2; 47} 48 49.contact .stepbar__item:first-child { 50 margin-left: 0; 51} 52 53.contact .stepbar__item:last-child { 54 margin-right: 0; 55} 56 57.contact .stepbar__item:not(:first-child)::before { 58 position: absolute; 59 content: ""; 60 top: 0; 61 left: 1px; 62 width: 0; 63 height: 0; 64 border-top: 15px solid transparent; 65 border-right: 0; 66 border-bottom: 15px solid transparent; 67 border-left: 7.5px solid black; 68} 69 70.contact .stepbar__item:not(:first-child)::after { 71 position: absolute; 72 content: ""; 73 top: 0; 74 left: 0; 75 width: 0; 76 height: 0; 77 border-top: 15px solid transparent; 78 border-right: 0; 79 border-bottom: 15px solid transparent; 80 border-left: 7.5px solid #ffffff; 81} 82 83.contact .stepbar__item-inner { 84 display: -webkit-box; 85 display: -ms-flexbox; 86 display: flex; 87 -webkit-box-pack: center; 88 -ms-flex-pack: center; 89 justify-content: center; 90 -webkit-box-align: center; 91 -ms-flex-align: center; 92 align-items: center; 93 width: 100%; 94 height: 100%; 95 background: #ffffff; 96 font-size: 14px; 97 font-weight: bold; 98 letter-spacing: 1em; 99 text-indent: 1em; 100 color: black; 101} 102 103.contact .stepbar__item-inner--current { 104 background: transparent; 105 color: #ffffff; 106} 107 108.contact .stepbar__item:not(:last-child) .stepbar__item-inner::before { 109 position: absolute; 110 content: ""; 111 top: 0; 112 left: 100%; 113 width: 0; 114 height: 0; 115 border-top: 15px solid transparent; 116 border-right: 0; 117 border-bottom: 15px solid transparent; 118 border-left: 7.5px solid black; 119} 120 121.contact .stepbar__item:not(:last-child) .stepbar__item-inner::after { 122 position: absolute; 123 content: ""; 124 top: 0; 125 left: calc(100% - 1px); 126 width: 0; 127 height: 0; 128 border-top: 15px solid transparent; 129 border-right: 0; 130 border-bottom: 15px solid transparent; 131 border-left: 7.5px solid #ffffff; 132} 133 134.contact .stepbar__item:not(:last-child) .stepbar__item-inner--current::after { 135 display: none; 136} 137 138.contact form { 139 width: 90%; 140 margin: 0 auto; 141 max-width: 600px; 142} 143 144.contact form .form-area dl dt label { 145 display: block; 146 padding: 24px 0 8px 0; 147 font-size: 14px; 148 font-weight: normal; 149} 150 151.contact form .form-area dl dd { 152 width: 100%; 153} 154 155.contact form .form-area dl dd textarea { 156 width: 100%; 157 height: 120px; 158 padding: 10px; 159 border: solid 1px #c0c0c0; 160} 161 162.contact form .form-area dl dd input { 163 border: solid #c0c0c0 1px; 164 width: 100%; 165 height: 30px; 166 padding: 10px; 167} 168 169.contact form .form-area .btn-area { 170 padding: 20px 0 20px 0; 171 margin: 0 auto; 172 width: 250px; 173 height: 36px; 174 display: -webkit-box; 175 display: -ms-flexbox; 176 display: flex; 177 -webkit-box-pack: center; 178 -ms-flex-pack: center; 179 justify-content: center; 180} 181 182.contact form .form-area .btn-area input { 183 width: 115px; 184 height: 100%; 185 letter-spacing: 1em; 186 text-indent: 1em; 187 display: block; 188 color: black; 189 font-weight: bold; 190 cursor: pointer; 191}

javascript

1// コンタクトフォーム確認ボタン押下時 2 3const send_btn = document.querySelector('.send-btn'); 4const return_btn = document.querySelector('.return-btn'); 5const btn_area = document.querySelector('.btn-area'); 6const div = document.querySelectorAll('.stepbar .stepbar__item div'); 7const Input = document.querySelectorAll('.input-area'); 8 9 10send_btn.addEventListener('click', () => { 11 Input.forEach(input => { 12 if (input.value == "") { 13 ; 14 15 } else { 16 send_btn.setAttribute('value','送信'); 17 return_btn.setAttribute('type', 'submit'); 18 btn_area.style.justifyContent = 'space-between'; 19 20 for (let i = 0; i < div.length; i++) { 21 div[0].classList.remove('stepbar__item-inner--current'); 22 div[1].classList.add('stepbar__item-inner--current'); 23 } 24 } 25 26 }); 27 28}); 29 30// 戻るが押下された時の処理 31return_btn.addEventListener('click', () => { 32 div[1].classList.remove('stepbar__item-inner--current'); 33 div[0].classList.add('stepbar__item-inner--current'); 34 return_btn.setAttribute('type', 'hidden'); 35 send_btn.setAttribute('value','確認'); 36 btn_area.style.justifyContent = 'center'; 37 38});

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2022/06/10 23:04

ファイルとは何ですか? コードのどの行でその問題が起きるのですか?
AN3000

2022/06/10 23:09

ファイルとは何ですか? >>>特にファイルは指定していません。 コードのどの行でその問題が起きるのですか? >>>わかりません。デペロッパーツールなど見てもエラーは出ていないようです。。
退会済みユーザー

退会済みユーザー

2022/06/10 23:56

コードを見る限り「ファイルにアクセス」してるようなところは見当たりませんけど、どういう話なんですか・・・というのが質問だったのですけど。
AN3000

2022/06/11 00:08

その原因がわからないので、質問させていただいております。
退会済みユーザー

退会済みユーザー

2022/06/11 00:47

想像を膨らませると、<input type="submit" value="確認" class="send-btn"> をクリックすると form が submit されるので、それを受けた Web アプリで何か起こっているぐらいしか思い当たりませんが、その想像が当たっているとすると、今の情報では誰も回答できないです。
退会済みユーザー

退会済みユーザー

2022/06/12 00:32

質問者さん、その後無言ですが、回答のコメント欄の私のコメント「クライアントスクリプトのみの動作を確認したいのなら、submit しないボタン(例えば input type="button")を使ってはいかがですか?」は見ておられるでしょうか? 試して結果のフィードバックお願いします。 前のスレッドの required 属性が働かない問題が解決していないのですよね?
guest

回答1

0

ベストアンサー

入力後クリックするとファイルにアクセスできませんと表示されてしまい、原因がわからずに躓いています。

質問のコードを見る限り「ファイルにアクセス」してるようなところは見当たりませんけど、

その原因がわからないので、質問させていただいております。

とのことなので想像を膨らませてレスします。

流れとしては【3項目すべて入力→確認ボタン押下→ステップバーが切り替わり、送信ボタンと戻るボタンが表示される】 ここまでできればと考えています。

上の「確認ボタン」は html にある、

<input type="submit" value="確認" class="send-btn">

のことだと思いますが、それをクリックすると form が submit されます。すなわち、ブラウザから Web サーバーにユーザー入力が POST 送信されます。

そこまでは「ファイルにアクセスできません」という話になるはずはないので、たぶん、POST 送信を受けた Web アプリで何か起こっているぐらいしか思い当たりません。

その想像が当たっているとすると、今の質問にはサーバー側の情報がないので、「ファイルにアクセスできません」という問題の解決策は誰も提案できないと思います。

投稿2022/06/11 01:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

AN3000

2022/06/11 02:01

ありがとうございます。 回答を拝見して、なんとなく理解できた気がします。 そもそも【ファイルにアクセスできませんでした】と表示されるのはPOST送信を受けた Web アプリで何か起こっている可能性とのことですが、おそらくこれは現段階でhtmlの記述しかしていないからだと思います。 情報不足な質問で申し訳ありませんでした。
退会済みユーザー

退会済みユーザー

2022/06/11 02:47

> おそらくこれは現段階でhtmlの記述しかしていないからだと思います。 POST 先がないのに POST すると「ファイルにアクセスできませんでした」となる開発環境があるのでしょうかね。そのあたりは分かりませんが、もしそうであって、クライアントスクリプトのみの動作を確認したいのなら、submit しないボタン(例えば input type="button")を使ってはいかがですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問