前提・実現したいこと
お問い合わせフォームで必須項目を入力後、disabledを解除したい
ポートフォリオを作成中です。
お問い合わせフォームの必須項目を入力後、送信ボタンのdisabled解除ができません
発生している問題・エラーメッセージ
氏名とフリガナを入力したらdisabledを解除するようにコードを書いたが反映されないです
### 該当のソースコード <section class="contact wow animate__fadeInUp" id="contact"> <div class="contact_contents"> <div class="contact_head "> <h2>Contact Us</h2> <p class="contact_subtitle">お気軽にご相談ください。</p> </div> <div class="contact_form"> <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdzDRBbfz6GUeS0ZQsEDpS_jkNC2FM9yKE2FYOOFiI8sRga6g/formResponse" class="contact-form" id="js-form"> <dl class="contact_form_dl"> <div class="contact_form_row"> <dt class="contact_form_label"> <label for="your-kind">お問い合わせ種別</label> </dt> <dd class="contact_form_input select_kind"> <select name="entry.583896505" id="your-kind"> <option hidden>選択してください</option> <option value="">見積もり</option> <option value="">料金について</option> <option value="">その他お問い合わせ</option> </select> </dd> </div> <div class="contact_form_row"> <dt class="contact_form_label"> <label for="your-name" class="is-reqired">氏名</label> </dt> <dd class="contact_form_input"> <input type="text" id="your-name" name="entry.203599253" placeholder="氏名" > </dd> </div> <div class="contact_form_row"> <dt class="contact_form_label"> <label for="called" class="is-reqired">フリガナ</label> </dt> <dd class="contact_form_input"> <input type="text" id="called" name="entry.2007100975" placeholder="フリガナ"> </dd> </div> <div class="contact_form_row"> <dt class="contact_form_label"> <label for="your-email">メールアドレス</label> </dt> <dd class="contact_form_input"> <input type="email" id="your-email" name="entry.322671174" placeholder="sample@gmail.com"> </dd> </div> <div class="contact_form_radio"> <div class="contact_form_row"> <div class="contact_form_label">性別</div> <label> <input type="radio" name="entry.759157837" checked> <span>男性</span> </label> <label> <input type="radio" name="entry.759157837"> <span>女性</span> </label> </div> </div> </dl> <dt class="contact_form_label message"> <label for="your-message">メッセージ</label> </dt> <dd class="contact_form_message"> <textarea id="your-message" name="entry.340515830" ></textarea> </dd> <div class="contact_form_button"> <input type="submit" value="送信する" id="js-submit" disabled> </div> </form> <div class="contact_message" id="js-success"> <p>送信完了しました。ありがとうございました。</p> </div> <div class="contact_message -error" id="js-error"> <p>送信に失敗しました。再度ご入力ください。</p> </div> </div> </div> </section> ///////////// //googleform let $form = $( '#js-form' ) $form.submit(function(e) { $.ajax({ url: $form.attr('action'), data: $form.serialize(), type: "POST", dataType: "xml", statusCode: { 0: function() { //送信に成功したときの処理 $form.slideUp() $('#js-success').slideDown() }, 200: function() { //送信に失敗したときの処理 $form.slideUp() $('#js-error').slideDown() } } }); return false; }); let $submit =$( '#js-submit' ) $( '#js-form input' ).on( 'change', function() { if( $( '#js-form input[name="entry.203599253"]' ).val()!==""&& $( '#js-form input[name="entry.2007100975"]' ).val()!=="" ) { //すべて入力されたとき $submit.prop( 'disabled' , false ) $submit.addClass( '-active' ) }else{ //入力不足のとき $submit.prop( 'disabled' , true ) $submit.removeClass( '-active' ) } }); ```ここに言語名を入力 HTML CSS jQuery
試したこと
各種inputのnameの一致確認。
html内のdisabledを外し入力したら送信できたので、紐付けはできていることが確認できました。
補足情報(FW/ツールのバージョンなど)
vs.code使用``````ここに言語を入力
ここに言語を入力
コード