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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

645閲覧

コンタクトフォームで入力しなければ、送信できないようにしたい。

spn

総合スコア37

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/10 02:08

編集2023/05/10 02:24

実現したいこと

コンタクトフォームの送信ボタンにdisabledをかけ未入力ではボタンを非活性にし、
入力が完了すれば送信できるようにしたい。

ボタンのidとjQueryのid名が一致しているかも確認済です。

HTMLを見るとdisabledの部分が消えたりついたりしておらず、jQueryが動いていません。

前提

エラーが出ています。

エラー内容↓
navigator.userAgent、navigator.appVersion、および navigator.platform の使用状況を監査する

SameSite 属性を指定して、クロスサイトリクエストで Cookie を送信するかどうかを指定します。

イメージ説明

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

1 2 <form 3 action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc68CwcBH9_LMtwaIP1D5I9EpSL1wGJ4mcNXl8ai9JPjEJAdA/formResponse" 4 target="_self" method="POST" id="mG61Hd" jsmodel="TOfxwf Q91hve CEkLOc" 5 data-shuffle-seed="8911685883490239039" data-response="%.@.[]]" 6 data-dlp-data="%.@.null,false,[]]" data-first-entry="0" data-last-entry="7" 7 data-is-first-page="true"> 8 <p class="form_ttl">お問い合わせメールフォーム</p><!-- /.form_txt --> 9 10 <div class="contact__container "> 11 <div class="input-field"> 12 <label class=" input-label">お問い合わせ種類 13 <span class="require" aria-hidd37-en="true">必須</span><!-- /.require --> 14 </label><!-- /.contact__ttl --> 15 <div class="radio-wrap"> 16 <div class="radio-wrap_item"> 17 <input type="radio" id="company" class="radio" name="entry.305880971" checked 18 value="弊社製品について"> 19 <label for="company">弊社製品について</label> 20 </div><!-- /.radio-wrap_item --> 21 <div class="radio-wrap_item"> 22 <input type="radio" id="strawberries" class="radio" name="entry.305880971" 23 value="いちご狩りについて"> 24 <label for="strawberries">いちご狩りについて</label> 25 </div><!-- /.radio-wrap_item --> 26 <div class="radio-wrap_item"> 27 <input type="radio" id="ohter" class="radio" name="entry.305880971" 28 value="その他のお問い合わせ"> 29 <label for="ohter">その他のお問い合わせ</label> 30 </div><!-- /.radio-wrap_item --> 31 </div><!-- /.radio-wrap --> 32 </div><!-- /.input-field --> 33 34 </div><!-- /.contact__container --> 35 36 <div class="contact__container"> 37 <div class="input-field"> 38 <label for="contact__name" class="input-label">お名前 39 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 40 </label><!-- /.contact__name --> 41 <input type="text" id="contact__name" name="entry.691037678" required> 42 </div><!-- /.input-feild --> 43 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">お名前を入力してください。</p> 44 <!-- /.error-text --> 45 </div><!-- /.contact__container --> 46 47 <div class="contact__container"> 48 <div class="input-field"> 49 <label for="contact__post-code" class="input-label">郵便番号</label> 50 <input type="text" id="contact__post-code" name="entry.843362794" inputmode="numeric"> 51 </div><!-- /.input-field --> 52 </div><!-- /.contact__container --> 53 54 <div class="contact__container"> 55 <div class="input-field"> 56 <label for="contact__address" class="input-label">ご住所 57 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 58 </label> 59 <input type="text" id="contact__address" name="entry.672554844" required> 60 </div><!-- /.input-field --> 61 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">ご住所を入力してください。 62 </p><!-- /.error-text --> 63 </div><!-- /.contact__container --> 64 65 <div class="contact__container"> 66 <div class="input-field"> 67 <label for="contact__email" class="input-label">メールアドレス 68 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 69 </label> 70 <input type="email" id="contact__email" name="entry.1375337957" required> 71 </div><!-- /.input-field --> 72 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true"> 73 正しい形式のメールアドレスを入力してください。</p><!-- /.error-text --> 74 </div><!-- /.contact__container --> 75 76 <div class="contact__container"> 77 <div class="input-field"> 78 <label for="contact__tel" class="input-label">電話番号 79 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 80 </label> 81 <input type="tel" id="contact__tel" name="entry.1445859162" required> 82 </div><!-- /.input-field --> 83 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">電話番号を入力してください。 84 </p><!-- /.error-text --> 85 </div><!-- /.contact__container --> 86 87 <div class="contact__container"> 88 <div class="input-field"> 89 <label for="contact__msg" class="input-label">お問い合わせ内容 90 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 91 </label> 92 <textarea id="contact__msg" name="entry.2136629426" cols="30" rows="10" 93 required></textarea> 94 </div><!-- /.input-field --> 95 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true"> 96 お問い合わせ内容を入力してください。 97 </p><!-- /.error-text --> 98 </div><!-- /.contact__container --> 99 100 <p class="end-message">お問い合わせありがとうございました</p> 101 <p class="false-message">送信失敗です</p> 102 103 <div class="btn-center"> 104 <button id="submit" class="btn btn--action" disabled>送信する</button> 105 </div> 106 </form> 107

jQuery

1$(function () { 2 3 4 5 6 const $submitBtn = $('#submit') 7 $('#form input,#form textarea').on('change', function () { 8 if ( 9 $('#form input[type="text"]').val() !== "" && 10 $('#form input[type="email"]').val() !== "" && 11 $('#form input[type="tel"]').val() !== "" 12 ) { 13 $submitBtn.prop('disabled', false); 14 15 } else { 16 $submitBtn.prop('disabled', true); 17 } 18 }); 19});

scss

1@use "../global" as *; 2 3/* contact 4------------------------------------------------------ */ 5 6 7.contact .blank { 8 display: block; 9} 10 11.contact_txt { 12 font-size: clamp(14px, 2.8vw, 18px); 13 font-weight: bold; 14 margin: 47px 0 47px; 15} 16 17form { 18 background: #fff; 19 border-radius: 28px; 20 padding: 37px 30px 43px; 21 22} 23 24 25.form_ttl { 26 font-weight: 700; 27 font-size: 18px; 28 margin-bottom: 44px; 29} 30 31.contact__container { 32 margin: 40px 0; 33 text-align: left; 34} 35 36.input-field { 37 display: flex; 38 flex-direction: column; 39 40 41 label { 42 display: block; 43 flex: 1; 44 text-align: left; 45 cursor: pointer; 46 } 47 48 label:not(.radio-wrap_item label) { 49 font-weight: 700; 50 } 51 52 .radio-wrap, 53 input[type=text], 54 input[type=email], 55 input[type=tel], 56 textarea { 57 display: block; 58 width: 100%; 59 margin-top: 15px; 60 cursor: pointer; 61 } 62 63 input[type=text], 64 input[type=email], 65 input[type=tel], 66 textarea { 67 background: #EFEAE6; 68 border: 1px solid transparent; 69 font-size: 16px; 70 padding: 6px 10px; 71 border-radius: 10px; 72 } 73 74 textarea { 75 resize: none; 76 } 77} 78 79 80 81//必須ラベル 82.require { 83 padding: 5px 11px; 84 background: $c_btn; 85 border-radius: 10px; 86 flex-shrink: 0; 87 font-size: 14px; 88 font-weight: 700; 89 margin-left: 18px; 90} 91 92 93 94 95.btn--action { 96 display: block; 97 98} 99 100#submit:disabled { 101 background: linear-gradient(90deg, #808080, #808080); 102 color: #fff; 103} 104

試したこと

https://shogo-log.com/submit-disabled/
上記サイトを参考にし、ボタンのHTMLにdisabledを記入し、jQueryで未記入ならdisabledをfalseにすると指示をした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

念のためコピペで動くソース

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $(document).on('input',function(){ 5 var flg1=$('[required]:is([type=text],[type=tel],[type=email],textarea)').is(function(){return $(this).val()=="";}); 6 var flg2=!$(':radio[required]:checked').val(); 7 $('#submit').prop('disabled',flg1 || flg2); 8 }); 9}); 10</script> 11<ul class="portfolio-type-list portfolio-type-1"> 12</ul> 13<form> 14<label><input type="radio" name="entry.305880971" value="弊社製品について" required>弊社製品について</label> 15<label><input type="radio" name="entry.305880971" value="いちご狩りについて" required>いちご狩りについて</label> 16<label><input type="radio" name="entry.305880971" value="その他のお問い合わせ" required>その他のお問い合わせ</label><br> 17<label>お名前<input type="text" name="entry.691037678" required></label><br> 18<label>ご住所<input type="text" name="entry.672554844" required></label><br> 19<label>メールアドレス<input type="text" name="entry.1375337957" required></label><br> 20<label>電話番号<input type="tel" name="entry.1445859162" required></label><br> 21<label>お問い合わせ内容<br> 22<textarea id="contact__msg" name="entry.2136629426" cols="30" rows="10" required></textarea> 23<hr> 24<button id="submit"disabled>送信する</button> 25</form>

投稿2023/05/10 03:05

編集2023/05/10 03:46
yambejp

総合スコア114784

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

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

spn

2023/05/10 06:49

コメントありがとうございます。 これでも動かないようです。
spn

2023/05/11 03:41

失礼しました。codepenで動いていること確認いたしました。 私のjQueryを消してyambejpさんのjQueryをコピペして動作を確認してみたのですが 変わらなかったです。HTMLが違うのでしょうか。。。 次に組み合わせて書いてみるのはどうだろうと下記を記入したのですが、 それでも動かなかったです。 const $submitBtn = $('#submit') $('#form input,#form textarea').on('change', function () { if ( $('#form input[required]:is([type="text"])').val() !== "" && $('#form input[required]:is([type="email"])').val() !== "" && $('#form input[required]:is([type="tel"])').val() !== "" ) { $submitBtn.prop('disabled', false); } else { $submitBtn.prop('disabled', true); } });
yambejp

2023/05/11 03:47

逆にspnさんのソースをcodepen(もしくはその他ソースが実行できるサイト)にアップできませんか?
yambejp

2023/05/12 08:13

私のソースと違うところはラジオボタンにrequiredをつけていないところです。 つけて再チャレンジしてみてください
spn

2023/05/12 12:10

初歩的なミスに気づかず失礼いたしました。 yambejpさんのお陰で無事解決いたしました。 適切な受け答えありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問