入力テキストボックスの値を取得する


1004

jQueryを使用して入力値を取得およびレンダリングする方法は何ですか?

ここに1つあります:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />


1
次のコードを使用:var value = $( '#txt_Name')。val(); jqueryを使用して値を設定することもできます。この投稿をご覧ください:coding-issues.blogspot.in/2013/10/…–
Ranadheer Reddy

回答:


1654
//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);

35
@Prabsの質問は、「jQueryを使用して入力値を取得およびレンダリングする方法は何ですか?」というラベルでした。ラベルは入力ではありません。
バリーマイケルドイル

3
'bla'から引用符を削除します。$( '#txt_name')。val(bla);である必要があります。
Charles Xavier

9
@ParbhuBissessar必ずしもそうではありません。彼が文字通りのテキスト「bla」を望んでいるなら、彼はそれを正しく理解しています。彼が望んでいる場合valのをvar bla、彼は引用符を削除する必要があります。
double_j 2016年

「val」ではなく「val()」に注意してください。私のプロフィールを見ることができます
TheRedstoneTaco

私はこれをしましたが、問題があります。
Wasey Raza 2018

591

次の2つの方法でのみ値を選択できます。

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

直接JavaScriptを使用して値を取得する場合は、次のようになります。

document.getElementById('txt_name').value 

6
私はこれが古い質問であることを知っていますが、attrもに置き換えられることを忘れないでくださいprop。これは意味的に良いです。
Sablefoste

$("#txt_name").val(str);値を設定するためにChromeでのみ私のために働いた。この投稿をお試しください。
gkiko 2013

jQuery追加関数は、フォームの値を保持しながら、HTMLに追加しても問題ないようです。
アダムF

1
$( "#txt_name")。attr( 'value'); デフォルト値を返す/答えが間違っています!
zloctb 2013

1
ことを心に留めておく$("#txt_name").attr('value')意志オールウェイズは、属性「値」の内容を返しますが、入力フィールドを変更した場合ので、値が変更されていません、。.val()オールウェイズは、フィールドの内容を返します。..
honk31

84

言及すべき重要なことが1つあります。

$("#txt_name").val();

たとえば、ユーザーがページの読み込み後にそこで何かを入力した場合、テキストフィールドの現在の実際の値が返されます。

だが:

$("#txt_name").attr('value')

DOM / HTMLから値を返します。


40

要素であるvalueことがわかっているため、属性を直接取得でき<input>ますが、現在の使用方法.val()は既に現在のものです。

上記の場合は、単に使用し.value、直接DOM要素に次のように

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});

@Bharanなぜ代替案が必要なのですか?
Doug Molineux 2010年

3
どこかで、私は代わりを使用したいと思います
Bharanikumar

16

入力要素の現在の値を取得するには、さまざまな方法を使用する必要があります。

方法-1

シンプルなを使用したい場合は.val()、これを試してください:

<input type="text" id="txt_name" />

入力から値を取得する

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

値を入力に設定

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

方法-2

.attr()コンテンツを取得するために使用します。

<input type="text" id="txt_name" value="" />

入力フィールドに属性を1つ追加するだけです。value=""属性は、入力フィールドに入力したテキストコンテンツを保持する属性です。

$("input").attr("value");

方法-3

これをinput要素で直接使用できます。

$("input").keyup(function(){
    alert(this.value);
});

15

次のような値を取得できます。

this['inputname'].value

ここでthis、入力を含むフォームを指します。


8
この回答は、それthisが入力を含むフォームを参照していることを前提としています。
nandan 2015


6

テキストボックスの値を取得するには、jQuery val()関数を使用できます。

例えば、

$('input:textbox').val() –テキストボックスの値を取得します。

$('input:textbox').val("new text message") –テキストボックスの値を設定します。


3

私と同じような人がJSの初心者でundefined、テキスト値の代わりに取得する場合は、無効な文字が含まれidいないことを確認してください


3

テキストボックスに値を設定するだけです。

まず、次のような値を取得します

var getValue = $('#txt_name').val();

のような入力で設定された値を取得した後

$('#txt_name').val(getValue);

1

これを試して。それは確かに動作します。

var userInput = $('#txt_name').attr('value')

いいえ、ありません!! (1)属性 "value"(<input type="text" />)がない場合は、undefinedを返します。(2)あなたはこのようにそれを行う場合は<input type="text" value="test" />、ユーザーのタイプは、入力フィールドでのfoo、$('#txt_name').attr('value')まだリターン「テスト。
ndsvw

この答えは正しくありませんが、これは私が探していたAPIです。
アンソニー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.