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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

8640閲覧

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

castail

総合スコア117

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

2クリップ

投稿2015/08/21 03:19

下記参考サイトのように入力フォームの残りの項目数をリアルタイムで表示したいです。
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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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>

投稿2015/08/21 05:35

編集2015/08/21 06:29
S_Minecraft

総合スコア29

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

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

castail

2015/08/21 05:49

S_Minecraft様 ご回答頂きありがとうございます。 試したところこちらでは表示されませんでした。 他はjqueryのみの読み込みで問題ないでしょうか? その場合バージョンは限定されますでしょうか?
S_Minecraft

2015/08/21 06:30

すいません、$(function(){}するの忘れてました jQueryだけで問題ないです コードは回答に追加しておきました
castail

2015/08/24 01:49

S_Minecraft様 ご回答頂きありがとうございます。 ご指示頂いた内容で実現できました! この度は誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問