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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1355閲覧

お問い合わせフォームで必須項目を入力後、disabledを解除したい

KKino

総合スコア3

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/30 08:19

前提・実現したいこと

お問い合わせフォームで必須項目を入力後、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使用``````ここに言語を入力
ここに言語を入力

コード

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

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

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

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

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

m.ts10806

2021/05/30 08:24

もっと短いコードで試した方がいいと思いますが、 そもそもその分岐は通っているのでしょうか。
KKino

2021/05/30 08:42

以前作ったLPでも同じコードでやって動いたので、あって入ると思います。 今回コピペして流用し、nameの値を変えたら動かなくなりました
guest

回答1

0

jsはどこで読み込んでます?
ベタが書き?

投稿2021/05/30 13:17

編集2021/05/30 13:17
himazin_bivar

総合スコア23

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問