入力フォームの残り項目数を表示したい

下記参考サイトのように入力フォームの残りの項目数をリアルタイムで表示したいです。
https://www.31sumai.com/form/Profile

具体的仕様は以下の通りです。

lang
1
2<form name=hoge method=GET action=hogehoge>
3
4  <p>ニックネーム</p>
5  <input class="name" type="text" id="name" name="name" value="" >
6  
7  <p>>都道府県</p>
8  <select name="area" class="area">
9    <option value="北海道">北海道</option>
10    <option value="青森県">青森県</option>
11    <option value="秋田県">秋田県</option>
12    <option value="岩手県">岩手県</option>
13    <option value="山形県">山形県</option>
14    <option value="宮城県">宮城県</option>
15    <option value="福島県">福島県</option>
16    <option value="茨城県">茨城県</option>
17  </select>
18  
19  <p>年齢</p>
20  <select name="age" id="age" class="age">
21    <option value="">選択</option>
22    <option value="1">20代</option>
23    <option value="2">30代</option>
24    <option value="3">40代</option>
25    <option value="4">50代</option>
26    <option value="5">60代</option>
27  </select>
28  
29  <p>■電話番号</p>
30  <input type="tel" name="tel" style="ime-mode: disabled;" Value="" class="tel">
31  
32  <p>暗証番号</p>
33  <input type="tel" name="pass" style="ime-mode: disabled;" Value="" class="pass">
34  <span>※数字4桁</span>
35  
36  <p>オプション</p>
37  <label for="q1">
38  <div>
39    <input class="option" type="checkbox" id="q1" name="q1" checked>
40    オプション1</div>
41  </label>
42  <label for="q2">
43  <div>
44    <input class="option" type="checkbox" id="q2" name="q2" checked>
45    オプション2</div>
46  </label>
47  <label for="q3">
48  <div>
49    <input class="option" type="checkbox" id="q3" name="q3" checked>
50    オプション3</div>
51  </label>
52  
53      <input type="image" src="button.png" alt="送信する">
54  
55</form>

上記のフォームは全て必須項目です。
オプションはすでにchecked状態なので実質その上の5項目を入力する形になります。

入力状況に応じて下記別エリアmessageのnumber内部に残りの項目数を表示する方法をお教えください。

lang
1<p class="message">残りの入力項目は<span class="number"></span> / 5です。</p>
2
3

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1var total = $("form").find("input, select").length; //入力フォームの合計の数
2
3var i = 0;
4var check = function() {
5  $("form").find("select").each(function() {
6    if(typeof this.val() !== "undefined") {
7      i++;
8    }
9  });
10  i += $("form").find("input[type=\"option\"]:checked").length;
11  i += $("form").find("input[type=\"tel\"],input[type=\"text\"]").each(function() {
12    if(this.val() !== "") {
13      i++;
14    }
15  });
16  $(".number").html(i);
17};
18
19$("form").find("select, input[type=\"option\"]").change(function() {
20  check();
21});
22$("form").find("input[type=\"tel\"],input[type=\"text\"]").keyup(function() {
23  check();
24});

たぶん、こんな感じでいけるかなと

修正

html
1<html>
2<head>
3<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
4<script type="text/javascript">
5<!--
6$(function(){
7  var total = $("form").find("input[type=\"tel\"],input[type=\"text\"], select").length; //入力フォームの合計の数
8  $(".total").html(total);
9
10  var i = 0;
11  $(".number").html(total - i);
12  var check = function() {
13    i = 0;
14    $("form").find("select").each(function() {
15      if($(this).val() !== "") {
16        i++;
17      }
18    });
19    $("form").find("input[type=\"tel\"],input[type=\"text\"]").each(function() {
20      if($(this).val() !== "") {
21        i++;
22      }
23    });
24    $(".number").html(total - i);
25  };
26
27  $("form").find("select, input[type=\"option\"]").change(function() {
28    check();
29  });
30  $("form").find("input[type=\"tel\"],input[type=\"text\"]").keyup(function() {
31    check();
32  });
33});
34-->
35</script>
36</head>
37<body>
38<form name=hoge method=GET action=hogehoge>
39
40  <p>ニックネーム</p>
41  <input class="name" type="text" id="name" name="name" value="" >
42
43  <p>都道府県</p>
44  <select name="area" class="area">
45    <option value="">選択</option>
46    <option value="北海道">北海道</option>
47    <option value="青森県">青森県</option>
48    <option value="秋田県">秋田県</option>
49    <option value="岩手県">岩手県</option>
50    <option value="山形県">山形県</option>
51    <option value="宮城県">宮城県</option>
52    <option value="福島県">福島県</option>
53    <option value="茨城県">茨城県</option>
54  </select>
55
56  <p>年齢</p>
57  <select name="age" id="age" class="age">
58    <option value="">選択</option>
59    <option value="1">20代</option>
60    <option value="2">30代</option>
61    <option value="3">40代</option>
62    <option value="4">50代</option>
63    <option value="5">60代</option>
64  </select>
65
66  <p>■電話番号</p>
67  <input type="tel" name="tel" style="ime-mode: disabled;" Value="" class="tel">
68
69  <p>暗証番号</p>
70  <input type="tel" name="pass" style="ime-mode: disabled;" Value="" class="pass">
71  <span>※数字4桁</span>
72
73  <p>オプション</p>
74  <label for="q1">
75  <div>
76    <input class="option" type="checkbox" id="q1" name="q1" checked>
77    オプション1</div>
78  </label>
79  <label for="q2">
80  <div>
81    <input class="option" type="checkbox" id="q2" name="q2" checked>
82    オプション2</div>
83  </label>
84  <label for="q3">
85  <div>
86    <input class="option" type="checkbox" id="q3" name="q3" checked>
87    オプション3</div>
88  </label>
89</form>
90<p class="message">残りの入力項目は<span class="number"></span> / <span class="total"></span>です。</p>
91</body>