Q&A
実現したいこと
コンタクトフォームの送信ボタンに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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
1
ベストアンサー
念のためコピペで動くソース
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
総合スコア112600
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/10 06:49
2023/05/10 09:09
2023/05/11 03:41
2023/05/11 03:47
2023/05/12 07:59
2023/05/12 08:13
2023/05/12 12:10