blocks|key|2019852|text|//Get
var+bla+=+$('#txt_name').val();

//Set
$('#txt_name').val(bla);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2019853|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

blocks|key|4927545|text|您只能通过以下两种方式选择一个值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4927546|//+First+way+to+get+a+value
value+=+$("#txt_name").val();+

//+Second+way+to+get+a+value
value+=+$("#txt_name").attr('value');|code-block|syntax|javascript|4927547|如果你想直接使用JavaScript来获取这个值，方法如下：|4927548|document.getElementById('txt_name').value+|4927549|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can only select a value with the following two ways:

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

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

If you want to use straight JavaScript to get the value, here is how:

<pre><code>document.getElementById('txt_name').value 
</code></pre>

blocks|key|4927646|text|有一件重要的事情要提一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4927647|$("#txt_name").val();|code-block|syntax|javascript|4927648|将返回文本字段的当前实际值，例如，如果用户在页面加载后在文本字段中键入内容。|4927649|但是：|4927650|$("#txt_name").attr('value')|4927651|将从DOM/HTML返回值。|4927652|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

There is one important thing to mention:

<pre><code>$("#txt_name").val();
</code></pre>

will return the current real value of a text field, for example if the user typed something there after a page load.

But:

<pre><code>$("#txt_name").attr('value')
</code></pre>

will return value from DOM/HTML.

blocks|key|2024240|text|您可以直接获取value属性，因为您知道它是一个<input>元素，但是您当前使用的.val()已经是当前的使用情况。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2024241|对于上面的操作，只需直接在DOM元素上使用.value，即like+this|2024242|$(document).ready(function(){
++$("#txt_name").keyup(function(){
++++alert(this.value);
++});
});|code-block|syntax|javascript|2024243|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/val/|1|http://www.jsfiddle.net/nick_craver/uA2we/^0|7|5|O|7|16|6|16|6|0|0|L|6|T|9|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

You can get the <code>value</code> attribute directly since you know it's an <code>&lt;input&gt;</code> element, but your current usage of <a href="http://api.jquery.com/val/" rel="noreferrer"><code>.val()</code></a> is already the current one.

For the above, just use <code>.value</code> on the DOM element directly, <a href="http://www.jsfiddle.net/nick_craver/uA2we/" rel="noreferrer">like this</a>:

<pre><code>$(document).ready(function(){
 $("#txt_name").keyup(function(){
 alert(this.value);
 });
});
</code></pre>

blocks|key|1275303|text|您必须使用各种方法来获取输入元素的当前值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275304|方法-+1|offset|length|style|BOLD|1275305|如果你想使用一个简单的.val()，试试这个：|CODE|1275306|<input+type="text"+id="txt_name"+/>|code-block|syntax|javascript|1275307|从输入获取值|1275308|//+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();|1275309|输入的设置值|1275310|//+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");|1275311|方法-+2|1275312|使用.attr()获取内容。|1275313|<input+type="text"+id="txt_name"+value=""+/>|1275314|我只向输入字段添加了一个属性。value=""属性是携带我们在输入字段中输入的文本内容的属性。|1275315|$("input").attr("value");|1275316|方法-+3|1275317|你可以直接在你的input元素上使用它。|1275318|$("input").keyup(function(){
++++alert(this.value);
});|1275319|entityMap^0|0|0|5|0|B|6|0|0|0|3|0|0|3|3|0|0|0|5|0|0|E|2|7|0|0|0|1B|F|8|0|0|0|5|0|0|K|8|5|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1J|8|@$D|1K|E|1L|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1M|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|R|3|S|5|M|7|1Q|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|V|3|W|5|M|7|1U|8|@]|9|@]|A|$N|O]]|$1|X|3|Y|5|6|7|1V|8|@$D|1W|E|1X|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1Y|8|@$D|1Z|E|20|F|G]|$D|21|E|22|F|J]]|9|@]|A|$]]|$1|11|3|12|5|M|7|23|8|@]|9|@]|A|$N|O]]|$1|13|3|14|5|6|7|24|8|@$D|25|E|26|F|G]|$D|27|E|28|F|J]]|9|@]|A|$]]|$1|15|3|16|5|M|7|29|8|@]|9|@]|A|$N|O]]|$1|17|3|18|5|6|7|2A|8|@$D|2B|E|2C|F|G]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2D|8|@$D|2E|E|2F|F|G]|$D|2G|E|2H|F|J]]|9|@]|A|$]]|$1|1B|3|1C|5|M|7|2I|8|@]|9|@]|A|$N|O]]|$1|1D|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]]|1E|$]]

You have to use various ways to get current value of an input element. 

METHOD - 1

If you want to use a simple <code>.val()</code>, try this:

<pre><code>&lt;input type="text" id="txt_name" /&gt;
</code></pre>

Get values from Input

<pre><code>// 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();
</code></pre>

Set value to Input

<pre><code>// 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");
</code></pre>

METHOD - 2

Use <code>.attr()</code> to get the content.

<pre><code>&lt;input type="text" id="txt_name" value="" /&gt;
</code></pre>

I just add one attribute to the input field. <code>value=""</code> attribute is the one who carry the text content that we entered in input field.

<pre><code>$("input").attr("value");
</code></pre>

METHOD - 3

you can use this one directly on your <code>input</code> element.

<pre><code>$("input").keyup(function(){
 alert(this.value);
});
</code></pre>

blocks|key|4927561|text|我认为这个函数在前面的答案中被遗漏了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4927562|.val(+function(index,+value)+)+|code-block|syntax|javascript|4927563|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I think this function is missed here in previous answers:

<pre><code>.val( function(index, value) ) 
</code></pre>

blocks|key|4927625|text|你可以像这样得到这个值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4927626|this['inputname'].value|code-block|syntax|javascript|4927627|其中this指的是包含输入的表单。|offset|length|style|CODE|4927628|entityMap^0|0|0|2|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can get the value like this:

<pre><code>this['inputname'].value
</code></pre>

Where <code>this</code> refers to the form that contains the input.

blocks|key|1277303|text|要获取文本框值，可以使用jQuery+val()函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1277304|例如,|1277305|$('input:textbox').val()+-获取文本框值。|1277306|$('input:textbox').val("new+text+message")+-设置文本框值。|1277307|entityMap^0|J|5|0|0|0|O|0|0|16|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|M|$]]

To get the textbox value, you can use the jQuery <code>val()</code> function.

For example,

<code>$('input:textbox').val()</code> – Get textbox value.

<code>$('input:textbox').val("new text message")</code> – Set the textbox value.

blocks|key|3516789|text|您可以简单地在文本框中设置该值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3516790|首先，你会得到如下的值|3516791|var+getValue+=+$('#txt_name').val();|code-block|syntax|javascript|3516792|在输入中设置了一个值之后，比如|3516793|$('#txt_name').val(getValue);|3516794|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can simply set the value in text box.

First, you get the value like

<pre><code>var getValue = $('#txt_name').val();
</code></pre>

After getting a value set in input like

<pre><code>$('#txt_name').val(getValue);
</code></pre>

blocks|key|3516755|text|对于那些和我一样是JS新手，并且使用undefined而不是文本值的人，请确保您的不包含无效字符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|3516756|entityMap^0|I|9|X|F|0^^$0|@$1|2|3|4|5|6|7|I|8|@$9|J|A|K|B|C]|$9|L|A|M|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|N|8|@]|E|@]|F|$]]]|H|$]]

For those who just like me are newbies in JS and getting <code>undefined</code> instead of text value make sure that your <code>id</code> doesn't contain invalid characters.

blocks|key|1275349|text|尝尝这个。它肯定会工作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275350|var+userInput+=+$('#txt_name').attr('value')|code-block|syntax|javascript|1275351|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this. It will work for sure.

<pre><code>var userInput = $('#txt_name').attr('value')
</code></pre>

blocks|key|3516800|text|纯JS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3516801|txt_name.value|code-block|syntax|javascript|3516802|​|3516803|txt_name.onkeyup+=+e=>+alert(txt_name.value);|3516804|<input+type="text"+id="txt_name"+/>|3516805|3516806|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<h1>Pure JS</h1>
<pre><code>txt_name.value
</code></pre>
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>txt_name.onkeyup = e=&gt; alert(txt_name.value);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="txt_name" /&gt;</code></pre>
</div>
</div>

blocks|key|4927831|text|你可以试试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4927832|let+quantity+=+$('input[name+=+quantity]').val()|code-block|syntax|javascript|4927833|其中，输入字段的名称是quantity|4927834|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can try
<pre><code>let quantity = $('input[name = quantity]').val()
</code></pre>
where the name of the input field is quantity

What are the ways to get and render an input value using jQuery?

Here is one: 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
 $("#txt_name").keyup(function() {
 alert($(this).val());
 });
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="text" id="txt_name" /&gt;</code></pre>
</div>
</div>

Get the value in an input text box

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

使用jQuery获取和呈现输入值的方法有哪些？这里有一个：​$(document).ready(function() { $("#txt_name").keyup(function() { alert($(this).val()); });})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.m

问获取输入文本框中的值
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取输入文本框中的值EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取输入文本框中的值
EN