フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】

実現したいこと

フォームのsubmitをdisabledで制御し全て入力するまでsubmitできないようにしたいです。
初歩的な質問ですがお分かりの方がおられたら、宜しくお願いいたします。

前提

下記内容の通りにしたが、動作が動かないです。
1.Googleフォームの回答が回収できない。
2.未入力時と入力後でフォームのボタンの色が変わらない

フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】
https://shogo-log.com/submit-disabled/

Googleフォームを静的サイトに埋め込みカスタマイズ【非同期通信Ajax】
https://shogo-log.com/google-form-ajax/

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8   
9    <linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
10    
11    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
12    <link rel="stylesheet" href="sass/Intermediate/css/common.css">
13</head>
14
15<body>
16<section class="contact _bg_contact">
17                <div class="section-inner ">
18                    <h2 class="section-ttl section-ttl_contact">
19                        <span class="section-ttl_main">お問い合わせ</span><!-- /.section-ttl_main -->
20                        <span class="section-ttl_sub">Contact</span><!-- /.section-ttl_sub -->
21                    </h2><!-- /.section-ttl -->
22                    <p class="contact-text">コーディングの人出が足りないとき、<br> あなたの力になります</p><!-- /.contact-text -->
23
24                    <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdjINhsllY8CnhSDWpqjNMinVHrZ0_FIuO8jc8Wdhmhz169lw/formResponse" target="_self" method="POST" id="form" >
25                        <div class="contact-contents">
26                            <div class="form__item">
27                                <label for="username" class="form__ttl">
28                                    お名前<strong class="label-required" aria-hidden="true">必須</strong>
29                                    <!-- /.label-required -->
30                                </label><!-- /.form__ttl -->
31                                <div class="form__body">
32                                    <div class="input-field">
33                                        <input type="text" name="entry.323905936" id="username" required>
34                                        <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">
35                                            ※お名前を入力してください。</p>
36                                    </div><!-- /.input-field -->
37                                </div><!-- /.form__body -->
38                            </div><!-- /.form__item -->
39
40                            <div class="form__item">
41                                <label for="email" class="form__ttl">
42                                    メールアドレス<strong class="label-required" aria-hidden="true">必須</strong>
43                                    <!-- /.label-required -->
44                                </label><!-- /.form__ttl -->
45                                <div class="form__body">
46                                    <div class="input-field">
47                                        <input type="email" name="entry.2010543020"  id="email" required>
48                                        <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">
49                                            ※正しい形式のメールアドレスを入力してください。</p>
50                                    </div><!-- /.input-field -->
51                                </div><!-- /.form__body -->
52                            </div><!-- /.form__item -->
53
54                            <div class="form__item">
55                                <label for="contact_msg" class="form__ttl">
56                                    お問い合わせ内容<strong class="label-required" aria-hidden="true">必須</strong>
57                                    <!-- /.label-required -->
58                                </label><!-- /.form__ttl -->
59                                <div class="form__body">
60                                    <div class="input-field">
61                                        <textarea name="entry.1368348266" id="contact_msg" cols="80" row="80"
62                                            required></textarea>
63                                        <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">
64                                            ※お問合せ内容を入力してください。</p>
65                                    </div><!-- /.input-field -->
66                                </div><!-- /.form__body -->
67                            </div><!-- /.form__item -->
68                            <div class="check-box">
69                                <label for="checkbox">
70                                    <input type="checkbox" id="checkbox" name="check" value="プライバシーポリシーに同意する">
71                                    <span class="checkbox-txt">プライバシーポリシーに同意する</span>
72                                </label>
73
74                            </div>
75                            <button id="submit" type="submit" class="privacy-btn" disabled>
76                                <a href="" class="btn contact-btn_privacy">送信する</a>
77                            </button>
78
79                            <p class="end-message">お問い合わせありがとうございました</p>
80                            <p class="false-message">送信失敗です</p>
81
82                        </div><!-- /.contact-contents -->
83    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
84    <script src="js/script.js"></script>
85</body>

js
1    //コンタクト
2$(document).ready(function () {
3
4    $('#form').submit(function (event) {
5      var formData = $('#form').serialize();
6      $.ajax({
7        url: "https://docs.google.com/forms/u/0/d/e/1FA~",
8        data: formData,
9        type: "POST",
10        dataType: "xml",
11        statusCode: {
12          0: function () {
13            $(".end-message").slideDown();
14            $(".privacy-btn").fadeOut();
15            window.location.href = "thanks.html";
16          },
17          200: function () {
18            $(".false-message").slideDown();
19          }
20        }
21      });
22      event.preventDefault();
23    });
24   
25
26  });
27
28
29  //form-desabled
30  $(document).ready(function () {
31
32    const $submitBtn = $('#submit')
33    $('#form input,#form textarea').on('change', function () {
34      if (
35        $('#form input[type="text"]').val() !== "" &&
36        $('#form input[type="email"]').val() !== "" &&
37        $('#form input[type="checkbox"]').val() !== "" &&
38        $('#form #checkbox').prop('checked') === true
39      ) {
40        $submitBtn.prop('disabled', false);
41  
42      } else {
43        $submitBtn.prop('disabled', true);
44      }
45    });
46  
47  });

sass
1
2
3//ボタンカラー
4$c_btn: linear-gradient(to right, #FA41CC, #6020B0);
5
6// 背景カラー
7$c_bg: #EEFBFB;
8$c_gradient: linear-gradient(to right, #05A5FA, #63FBD7);
9
10
11
12.section-ttl_contact {
13    color: #fff;
14
15    .section-ttl_sub {
16        color: #fff;
17    }
18}
19
20.contact-text {
21    color: #fff;
22    font-weight: bold;
23    font-size: 16px;
24    text-align: center;
25}
26
27//問い合わせフォーム
28.contact-contents {
29    background: #fff;
30    padding: 20px;
31    margin-top: 40px;
32}
33
34.form__item {
35    margin-top: 30px;
36
37    &:first-child {
38        margin-top: 0;
39    }
40}
41
42.form__ttl {
43    font-weight: bold;
44    font-size: 16px;
45
46    .label-required {
47        display: inline-block;
48        font-weight: bold;
49        font-size: 0.75rem;
50        color: #fff;
51        background: $c_key2;
52        padding: 4px 16px;
53        line-height: 16px;
54        border-radius: 10px;
55        margin-left: 20px;
56    }
57}
58
59.input-field {
60    margin-top: 40px;
61
62    input[type="text"],
63    input[type="email"] {
64        appearance: none;
65        width: 100%;
66        max-width: 500px;
67        padding: 10px 20px;
68        border-radius: 3px;
69        background: $c_bg;
70        border: 0;
71        font-size: 16px;
72    }
73}
74
75.input-field textarea {
76    appearance: none;
77    width: 100%;
78    max-width: none;
79    height: 180px;
80    padding: 10px 20px;
81    border-radius: 3px;
82    background: $c_bg;
83    border: 0;
84    font-size: 16px;
85    resize: none;
86}
87
88//エラーメッセージ
89.error-text {
90    color: red;
91    font-size: 16px;
92    text-align: left;
93    display: none;
94}
95
96//チェックボックス
97.check-box {
98    text-align: center;
99    margin-top: 30px;
100
101    .checkbox-txt {
102        font-size: 16px;
103        font-weight: bold;
104
105    }
106}
107
108input[type="checkbox"] {
109    margin: 0;
110    padding: 0;
111    background: none;
112    border: none;
113    border-radius: 0;
114    outline: none;
115    -webkit-appearance: none;
116    -moz-appearance: none;
117    appearance: none;
118
119    padding-left: 30px;
120    vertical-align: middle;
121    position: relative;
122
123    &::before,
124    &::after {
125        content: "";
126        display: block;
127        position: absolute;
128    }
129
130    &::before {
131        background-color: #fff;
132        border-radius: 0%;
133        border: 1px solid #707070;
134        width: 20px;
135        height: 20px;
136        transform: translateY(-50%);
137        top: 50%;
138        left: 5px;
139    }
140
141    &::after {
142        border-bottom: 3px solid #707070;
143        border-left: 3px solid #707070;
144        opacity: 0;
145        height: 6px;
146        width: 11px;
147        transform: rotate(-45deg);
148        top: -4px;
149        left: 10px;
150
151    }
152
153    &:checked::after {
154        opacity: 1;
155    }
156}
157
158.end-message {
159    display: none;
160}
161
162.false-message {
163    display: none;
164}
165
166@include medium {
167
168    //問い合わせフォーム
169    .contact-contents {
170        padding: 35px 60px;
171    }
172}

試したこと

Googleフォームの作成で
ドメインがeditだとformが見つけられないため、ドメイン末尾が「viewform」となっていることを確認ください。と記載があったが、ドメインの変更方法がネットで探せなかった。

1.Googleフォームに送れないです。
送信後thank.htmlページには変わりました。

追加です。

int32_t

2023/04/12 14:34

> 1.Googleフォームの回答が回収できない。 > 2.未入力時と入力後でフォームのボタンの色が変わらない両方の問題について、「どういう操作をしたときに、どういう動作になるはずが、実際はどういう動作になるか」を説明してください。

spn

2023/04/13 02:38

失礼しました。訂正させていただきます。 1.googleフォームでフォームを作り、そのコードを検証で確認しactionとname="entry.1368348266"などのコードをHTMLに埋め込みました。HTMLで回答をするとgoogleフォームで回答が見れる、送信後にありがとうございましたと記載した送信後画面に変化するはずが、、回答が回収されていないし送信後画面にならないです。 2.入力項目＆プライバシーポリシーに同意が埋まっていないとsubmitができないはずが、submitできてしまいます。

int32_t

2023/04/13 06:31

2. 「submitできてしまいます」というのはどうやって確認しましたか? フォーム送信が開始されると「 $('#form').submit(function (event) {」の中のコードが動くはずですが、そこに到達することを確認しましたか?

spn

2023/04/13 09:33

失礼しました。ｊQuery初心者で確認の仕方も知らず、調べて検証で確認したところ、コード自体動いていませんでした。

int32_t

2023/04/13 12:12

追記の画像を拝見しましたが、ブレークポイントを仕掛けるのはそこではありません。その中の70行目です。 69行目はページロード時に一度だけ実行されているはずです。

spn

2023/04/13 13:35 編集

コメントありがとうございます。WEBページのコードで新しいHTMLを作り、再度検証で確認したところ、７０行目は動いていました。そこから原因がわからず、途方に暮れています。。。 ↓自作フォームから回答してもGoogleフォームに反映されないので調べました。 https://kyotablog.net/google-form-customization/ 自作フォームから回答すると、Googleフォームに反映されるようになりますので、テストしてみましょう。うまく稼働しない場合は次の内容をチェックです。 formタグのaction属性に誤記は無いか。 inputタグやselectタグのname属性に誤記は無いか。テキストの回答箇所は、Googleフォーム側で‘回答の検証’を設定していないか。設定しているなら、自作フォームのtypeを合わせておくこと。 selectタグの回答箇所は、Googleフォームのvalue値と自作フォームのvalue値が異なる値になっていないか。異なるなら同じにしておくこと。全てあっていました。お分かりのことがありましたらコメントお願いできないでしょうか。

int32_t

2023/04/13 21:45

70行目に入っているのでしたら、あとはブラウザの開発者ツールで $.ajax() のレスポンスがどうなっているか確認するぐらいしか思いつかないですね。

spn

2023/04/14 02:53

ご返信ありがとうございます。 2.入力項目＆プライバシーポリシーに同意が埋まっていないとsubmitができないはずが、submitできてしまいます。は解決いたしました。＜解決方法＞ HTMLのボタンを書き換えました。 <button id="submit" class="privacy-btn btn contact-btn_privacy" disabled>送信する</button> CSSにこちらを書き足しました。 .privacy-btn:disabled { background: linear-gradient(90deg, #808080, #808080); } 初歩的なミスでした。お時間いただきましてありがとうございました。 1.の方は開発者ツールで再度確認し、このような挙動になっていました。画面を貼っておきます。

int32_t

2023/04/14 03:08

$.ajax() の呼び出しが終わったあとに、開発者ツールの「ネットワーク」タブを見て、docs.google.com からどんなレスポンスが返ったかを確認してください。

spn

2023/04/14 07:50

ありがとうございます。こちらでしょうか。追加で画像を貼っていきます。

int32_t

2023/04/14 07:57

その画面で合ってますが、目的の通信が記録されていません。ネットワークタブの使い方まで細かく教えるのは大変すぎるので、ご自分で使い方を調べてください。

spn

2023/04/14 13:10

ネットで調べてみたのですがお恥ずかしい話で検証のネットワークでどのように見るのかがわかりません。ローカルのブラウザでJavaScriptが動かない時の主な原因を現役エンジニアが解説【初心者向け】 https://magazine.techacademy.jp/magazine/22765 Google Chrome Networkタブの見方(フィルサイズ/表示時間) https://itsakura.com/chrome-network 画像を追加したのですが、こちらを見れば良いでしょうか。