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

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

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

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

jQuery

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

Q&A

解決済

3回答

3811閲覧

JS 複数のテキストボックスの値を配列で取得したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/07/08 10:06

編集2018/07/13 00:25

複数のテキストボックスがあり、その値を配列で取得したいと思っています。
以下の様に書いてみたところ、Uncaught TypeError: input_areas[i].val is not a functionというエラーが出てしまいます。

どこがおかしいのかが分かりません。
ご指導お願いいたします。
なお、テキストボックスの数は3つです。

↓誤記がありましたので、修正しました。htmlも追加しました。
console.log()すると、input_areasは取得できていますが、inputsは取得できません。

html

1<div> 2 <input type="text" value=${date[0]} style="width:50px">/ 3 <input type="text" value=${date[1]} style="width:25px">/ 4 <input type="text" value=${date[2]} style="width:25px"> 5 <br> 6 <input class = 'ok' type="button" value="OK"> 7 <input class = 'esc' type="button" value="esc"> 8</div>

okボタンのイベントとして↓

javascript

1 input_areas = $(event.target).siblings("input[type='text']"); 2 console.log(input_areas); 3 var inputs=[]; 4 for(var i =0; i<3;i++){ 5 inputs.push(input_areas[i].val()); 6 } 7 console.log(inputs);

追記:自分の中で、上記の方法で動かない理由が理解できていないため、その点のご指摘をいただけると嬉しいです。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/07/08 10:41

どちらかと言うとjqueryを使用している様ですのでjqueryのタグも追加してください。
x_x

2018/07/11 06:06

inputtypeというのは誤記でしょうか?
退会済みユーザー

退会済みユーザー

2018/07/13 00:26

すみません、修正しました!
guest

回答3

0

サンプル1

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action=""> 9 <p><input type="text" name="ipt00" value="100" /></p> 10 <p><input type="text" name="ipt01" value="101" /></p> 11 <p><input type="text" name="ipt02" value="102" /></p> 12 <p> 13 <button type="button">取得</button> 14 </p> 15 </form> 16 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 17 <script> 18 $(function () { 19 $("button[type=button]").on('click', function () { 20 var form = $("form"); 21 var arr = form.serializeArray(); 22 console.log(arr); 23 }); 24 }); 25 </script> 26 </body> 27</html>

サンプル2

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action=""> 9 <p><input type="text" name="ipt00" value="100" /></p> 10 <p><input type="text" name="ipt01" value="101" /></p> 11 <p><input type="text" name="ipt02" value="102" /></p> 12 <p> 13 <button type="button">取得</button> 14 </p> 15 </form> 16 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 17 <script> 18 $(function () { 19 $("button[type=button]").on('click', function () { 20 var val = []; 21 $("input").each(function (i, obj) { 22 val.push(obj.value); 23 }); 24 console.log(val); 25 }); 26 }); 27 </script> 28 </body> 29</html>

投稿2018/07/08 10:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

siblingsを見ているということは自分以外のテキストボックスの値を
とりたいということですか?

javascript

1$(function(){ 2 $('input:text').on('change',function(){ 3 var inputs=$(this).siblings('input:text').map(function(){return $(this).val()}).get(); 4 console.log(inputs); 5 }); 6});

HTML

1<form> 2<input type="text"><br> 3<input type="text"><br> 4<input type="text"><br> 5</form>

投稿2018/07/09 01:32

yambejp

総合スコア114583

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

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

0

ベストアンサー

配列アクセスで取得できるのはDOMオブジェクトだから。console.log( input_areas[ i ] ); として確認してみればよいです。

JavaScript

1// inputs.push( input_areas[ i ].val() ); 2// ↓ ↓ 3 inputs.push( $( input_areas[ i ] ).val() ); 4```**動くサンプル:**[https://jsfiddle.net/zwc2ax0d/](https://jsfiddle.net/zwc2ax0d/)

投稿2018/07/13 01:31

kei344

総合スコア69366

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

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

退会済みユーザー

退会済みユーザー

2018/07/15 09:27

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問