🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1421閲覧

お問い合わせフォーム「送信ボタン」を押しても画面が変わらない

chocon

総合スコア14

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/29 15:33

編集2020/11/29 20:12

お問い合わせフォームを
お問い合わせ選択項目によって
設問を表示・非表示となるように
htmlとcssでコーディングしました。

仮に「<form action="index02.html" method="post">」として
ダミーファイルを作ったものを送信先にしてみて
送信ボタンを押して飛ぶようにしたいのですが
全く変わりません。

表示・非表示にしている部分が必須なのに入力されていないと認識されることが原因なのでしょうか?

html

1 <form action="index02.html" method="post"> 2 3 <div class="fprm_container"> 4 <p class="qtype_title">お問い合わせ項目</p> 5 <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ"> 6 <label for="i_qtype01">お問い合わせ</label><br> 7 <input id="i_qtype02" type="radio" name="qtype" value="資料請求"> 8 <label for="i_qtype02">資料請求</label><br> 9 <input id="i_qtype03" type="radio" name="qtype" value="キャンペーン"> 10 <label for="i_qtype03">キャンペーン</label> 11 <div class="clearfix"></div> 12 13 <div class="data-contents"> 14 15 <!-- お問い合わせを選択時に表示 --> 16 17 <div class="siryou"> 18 <div class="title"> 19 <label>サイトを知ったきっかけ</label><br> 20 <em>必須(複数回答可)</em> 21 </div> 22 <div class="item"> 23 <div> 24 <input id="check01_01" type="checkbox" required> 25 <label for="check01_01">紹介</label> 26 </div> 27 28 <div> 29 <input id="check01_02" type="checkbox" required> 30 <label for="check01_02">広告</label> 31 </div> 32 33 <div> 34 <input id="check01_03" type="checkbox" required> 35 <label for="check01_03">SNS</label> 36 </div> 37 38 <div> 39 <input id="check01_04" type="checkbox" required> 40 <label for="check01_04">DM</label> 41 </div> 42      <div> 43 <input id="check01_05" type="checkbox" required> 44 <label for="check01_05">FAX</label> 45 </div> 46 </div> 47 <label class="title"> 48 お問い合わせ内容<em>必須</em> 49 50 </label> 51 52 <textarea class="item" required></textarea> 53 54 </div> 55 <!-- <資料請求選択時に表示 --> 56 <div class="siryou02"> 57 <label class="title">お問い合わせ内容(必須)</label> 58 <textarea class="item" required></textarea> 59 </div> 60 <!-- <親タグ閉じる --> 61 62 </div> 63 <!-- <家族閉じる --> 64</div> 65<p class="btn"><input type="submit" value="送信内容を確認する"></p> 66 </form> 67

CSS

1.fprm_container { 2 max-width: 900px; 3 margin: 0 auto; 4} 5.qtype_title { 6 float: left; 7 margin: 25px; 8 width: 200px; 9} 10.clearfix { 11 clear: both; 12} 13 14.siryou, 15.siryou02 { 16 display: none; 17 flex-wrap: wrap; 18 align-items: center; 19 margin: 20px 0; 20} 21 22.title { 23 margin: 25px; 24 width: 200px; 25} 26 27.item { 28 width: calc(100% - 260px); 29} 30textarea.item { 31 height: 150px; 32} 33 34.data-contents .siryou, 35.data-contents .siryou02 { 36 display: none; 37} 38 39input[value="お問い合わせ"]:checked ~ .data-contents .siryou{ 40 display: flex; 41} 42input[value="資料請求"]:checked ~ .data-contents .siryou02{ 43 display: flex; 44}

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

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

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

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

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

m.ts10806

2020/11/29 19:40

required がついてる入力コントロールの値を全部入れたら飛びます。 「お問い合わせ選択項目によって 設問を表示・非表示となるように」 と仰っていますが、肝心のcssが提示されていないので「提示されているHTMLだけでは再現しなかった」としかお伝え出来ません。
m.ts10806

2020/11/29 19:41

html これで全部ですかね。 </section>がありますが<section>がありません。
chocon

2020/11/29 20:13

少し整理して修正させて頂きました
guest

回答1

0

ベストアンサー

早朝からお疲れさまです^^
質問者様が言う通り
これはrequiredが邪魔をしているように思います。
それらをすべて消すと動作はしました。

如何でしょうか?

投稿2020/11/29 20:32

編集2020/11/29 20:41
tomtomtomtom

総合スコア563

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

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

chocon

2020/11/29 20:49

ありがとうございます! そうなんです。 equiredが多分邪魔してるんだろうと思ったのですが設問を必須にしたい場合こういう時どうしたらよいでしょうか? 必須、任意とその設問の横に表示するだけでよいのでしょうか?
m.ts10806

2020/11/29 20:51 編集

JavaScriptもしくはサーバーサイドの言語でチェックでしょうね。 ※ただ1点、HTMLに対して送信しても何も受け取れません。
tomtomtomtom

2020/11/29 21:02

私もぱっと思いつく方法ではjavascriptですね。 如何でしょうか?
chocon

2020/11/30 04:34

有り難う御座います! もちろん何も受け取れないことは理解してます。 ただ、ボタンを押して切り替わることだけみてみたかったのです。 ではhtmlでは「必須」「任意」を項目に記載するものの「equired」は消すのがぶなんですね。 そして別の言語などでチェック入れるようにしてみます。
tomtomtomtom

2020/11/30 05:48

jqueryで同様なことをしたことがあります。 ponkotsuさんもチャレンジしてみて下さい^^ また質問を見かけたら回答してみます^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問