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

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

ただいまの
回答率

90.52%

  • PHP

    20343questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16418questions

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

  • jQuery

    6704questions

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

  • Webサイト

    1077questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Jqueryでフォームの値をリアルタイムで取得

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 690

ryohasegawa

score 116

やりたい事は、数値を入力するフォームに数値を入れるとリアルタイムでその値を取得し入力した回数、繰り返し処理を行いたいです。
調べると、http://www.kaasan.info/archives/1676というサイトが出てきました。
下の方の「リアルタイムにテキストエリアのvalue値を取得する」というものが一番近いような気がします。
読んで見たんですが、そもそもJavaScriptの知識があまりなくわかりませんでした。
実際に自分で作ったフォームのコードが以下です。

<form id="anime">
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">話数</label>
    <div class="col-sm-10">
      <div class="input-group mb-2 mb-sm-0" id="wasuu">
        <div class="input-group-addon">全</div>
        <input type="number" class="form-control" name="wa" placeholder="話数">
        <div class="input-group-addon">話</div>
      </div>
      <div>
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" name="zero">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">0話スタート</span>
        </label>
      </div>
    </div>
  </div>
</form>

入力は7行目のinput です。
とりあえずは、取得を行いたいので、ここに入力された値をコンソール画面に表示をやりたいです。
どのように書けばいいのか教えてください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+4

keyup イベントを拾って、処理するのが定番ですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/13 20:48

    ありがとうございます。keyup がわからなかったので調べてきました。
    http://qiita.com/maruyam-a/items/cf0168f91d934b449a07
    勉強になりました。

    キャンセル

+4

IE8以下を無視するならinputイベントも使えます。

【input - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/input

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=input-event

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/13 21:30

    ありがとうございます。
    勉強してきます。

    キャンセル

checkベストアンサー

+1

わたしも基本的にはinputイベント派ですが、inputは確定前のデータまで拾ってしまいます
keyupの方がいい場合もあるので運用にあわせて使い分けて下さい

※以下IMEをありなしで動きがちがいます

$(function(){
  $('input').on('keyup input change',function(e){
    console.log(e.type+":"+$(this).val());
  });
});
<input type="text">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/13 20:55

    ありがとうございます。
    http://qiita.com/maruyam-a/items/cf0168f91d934b449a07#change-keypress-keyup%E3%81%AE%E6%8C%99%E5%8B%95%E3%81%BE%E3%81%A8%E3%82%81
    を見てたんですが、inputイベントというのが見当たりません。
    でも、これらとよく似たものなんですかね?

    キャンセル

+1

jqueryを使って下記のようなコードでいかがでしょうか。

1話 or 0話 - end話までのul > (li * end)要素を追加するコードに変更しました。また、チェックボックスでli要素を自動更新するようにしています。

$(function() {
    var $episodeGroup  = $('#anime .input-group-addon').eq(1);   //〇話DIV要素
    var $inputEepisode = $('#anime input[name="wa"]');           //話数のTEXT
    var $zeroStart     = $('#anime input[name="zero"]');         //ゼロスタートのCHECKBOX

    var createEpisodeElem = function (start, end) {
        var episodes = '';

        if (start === undefined) start = 1;
        if (end   === undefined) return '';

        if ($('#anime input[name="zero"]').is(':checked')) {
            start = 0;
            end--;
        }

        for (var i = start; i <= end; i++) {
            episodes += '<li data-episode="'+ i +'">'+ i +'話</li>';
        }

        return episodes;
    };

    var updateEpisodeElem = function (start, end) {
        if (start === undefined) start = 1;
        if (end   === undefined) return false; else end = parseInt(end);

        if (end > 0) {
            $episodeGroup.empty().append('<ul>'+ createEpisodeElem(start, end) +'</ul>');
            return true;
        }

        return false;
    };

    //話数記入でli要素を追加
    $inputEepisode.on('input paste', function (e) {
        updateEpisodeElem(1, $(e.target).val());
    });
    //ゼロ話スタートチェックでli要素を更新
    $zeroStart.on('change', function () {
        updateEpisodeElem(1, $('#anime input[name="wa"]').val());
    });
});

HTMLの属性にminmaxを設定すれば、最小値・最大値を決められますので、下記のように「min="1"」を追加しておきます。

<input type="number" class="form-control" name="wa" min="1" placeholder="話数">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/13 20:46

    テレビやアニメ、連番のついた作品の1話1話の内容を入力したく、たとえば全13話の作品だった場合、フォームに13と入力すると、その下に入力フォームを13個作成したいと思います。(これを言おうとするとややこしかったので繰り返し処理と略しました)0話スタートのチェックは13としたら1~13のフォームを作りたいんですが、中には0話から始まる作品もありますよね?その場合に0~12としたいためこのようなチェックをつけました。この説明でわかりますかね?

    キャンセル

  • 2017/09/13 20:57

    それとなんですが、数字の前の全や最後の話は関係ないです。
    入力画面でわかりやすくするデザインです。
    なので、欲しいのは入力された数値だけです。

    キャンセル

-1

なんか突っ込みどころが多すぎる気がするのですが、(PHP?htmlじゃなくて?や、jquery?いらなくない?など)

とりあえず挙げていただいたURLのようにchangeイベントを使うなら、こんな感じですかね?当方も初心者なんで下手くそなコードかもしれませんが。

<!DOCTYPE html><html>
<head>
  <meta charset="UTF-8">
  <title>anime</title>
<script>
window.addEventListener("load",function(){
  wa = document.getElementsByName("wa")[0];
  wa.addEventListener("change",function(){
    console.log(wa.value);
    alert(wa.value);
  },false);
},false);
</script>
</head>
<body>
  <form id="anime">
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">話数</label>
    <div class="col-sm-10">
      <div class="input-group mb-2 mb-sm-0" id="wasuu">
        <span class="input-group-addon"></span>
        <input type="number" class="form-control" name="wa" placeholder="話数" style="width:20px;">
        <span class="input-group-addon"></span>
      </div>
      <div>
        <label class="custom-control custom-checkbox">
          <button class="custom-control-input" name="zero"><span class="custom-control-description">0話スタート</span></button>
          <span class="custom-control-indicator"></span>
        </label>
      </div>
    </div>
  </div>
</form>
</body>
</html>


フォームの一部は勝手ながら自然な形に変えてみました。
開発者ツールを使っておられるかわからなかったのでalert入れましたけど、
うるさかったらコメントアウトしてください。m(_ _)m

追記・修正ver

<!DOCTYPE html><html>
<head>
  <meta charset="UTF-8">
  <title>anime</title>
<script>
window.addEventListener("load",function(){
  wa = document.getElementsByName("wa")[0];
  wa.addEventListener("input",function(){
    console.log(wa.value);
  },false);
},false);
</script>
</head>
<body>
  <form id="anime">
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">話数</label>
    <div class="col-sm-10">
      <div class="input-group mb-2 mb-sm-0" id="wasuu">
        <span class="input-group-addon"></span>
        <input type="number" class="form-control" name="wa" placeholder="話数" style="width:20px;">
        <span class="input-group-addon"></span>
      </div>
      <div>
        <label class="custom-control custom-checkbox">
          <button class="custom-control-input" name="zero"><span class="custom-control-description">0話スタート</span></button>
          <span class="custom-control-indicator"></span>
        </label>
      </div>
    </div>
  </div>
</form>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/13 02:28

    changeじゃないんですねよく読んでませんでしたすみません…ただchangeのところは他の回答者様がおっしゃるような別なイベントに変えていただければ、差し支えないと思います。

    キャンセル

  • 2017/09/13 02:41

    kei344様の受け売りですが、inputイベントを利用した場合の修正verを追記しました。

    以前の回答そのものを編集しても良かったんですけどね…最初私は間違えましたのでその自戒も込めて追記とさせていただきました。

    キャンセル

  • 2017/09/13 21:29

    色々突っ込んでいただいてありがとうございます。
    PHPを使っているんですが、フォームに入力した値分だけの入力欄を作りたいのですが、それをPHPでやろうとすると、一旦数値を送信してそれで次のページで反映する形になると思います。
    これでもいいのですが、一つのページで入力させたかったので、リアルタイムで反映できる方法を取らせていただきました。

    キャンセル

  • 2017/09/13 21:30

    ソースもありがとうございます。
    参考にさせていただきます。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20343questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16418questions

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

  • jQuery

    6704questions

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

  • Webサイト

    1077questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。