在 Javascript 中获取文本框值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5039544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting Textbox value in Javascript
提问by Shijilal
I am trying to get the value of the textbox in a javascript, but its not working. Given below is the code of my test page
我试图在 javascript 中获取文本框的值，但它不起作用。下面给出的是我的测试页的代码
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="test3.aspx.vb" Inherits="test3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<script language="javascript">
function GetAlert() {
var TestVar = document.getElementById('txt_model_code').value;
alert(TestVar);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:TextBox ID="txt_model_code" runat="server" ></asp:TextBox><br /><br />
<input type="button" value="db Function" onclick="GetAlert()" /><br />
</asp:Content>
So where am i going wrong?? How to get the text entered in the textbox in the javascript???
那我哪里错了？？如何在javascript的文本框中获取输入的文本？？？
回答by Nirmal
Use
用
document.getElementById('<%= txt_model_code.ClientID %>')
instead of
代替
document.getElementById('txt_model_code')`
Also you can use onClientClickinstead of onClick.
您也可以使用onClientClick代替onClick.
回答by Sean Taylor
This is because ASP.NET it changing the Id of your textbox, if you run your page, and do a view source, you will see the text box id is something like
这是因为 ASP.NET 它改变了你的文本框的 ID，如果你运行你的页面，并查看源代码，你会看到文本框的 id 类似于
ctl00_ContentColumn_txt_model_code
ctl00_ContentColumn_txt_model_code
There are a few ways round this:
有几种方法可以解决这个问题：
Use the actual control name:
使用实际的控件名称：
var TestVar = document.getElementById('ctl00_ContentColumn_txt_model_code').value;
var TestVar = document.getElementById('ctl00_ContentColumn_txt_model_code').value;
use the ClientID property within ASP script tags
在 ASP 脚本标签中使用 ClientID 属性
document.getElementById('<%= txt_model_code.ClientID %>').value;
document.getElementById('<%= txt_model_code.ClientID %>').value;
Or if you are running .NET 4 you can use the new ClientIdMode property, see this link for more details.
或者，如果您运行的是 .NET 4，则可以使用新的 ClientIdMode 属性，请参阅此链接了解更多详细信息。
http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx1
http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net- 4-0-series.aspx 1
回答by Muhammad Akhtar
Since you have master page and your control is in content place holder, Your control id will be generated different in client side. you need to do like...
由于您有母版页并且您的控件位于内容占位符中，因此您的控件 ID 将在客户端生成不同的。你需要像...
var TestVar = document.getElementById('<%= txt_model_code.ClientID %>').value;
Javascript runs on client side and to get value you have to provide client id of your control
Javascript 在客户端运行并获得价值，您必须提供控件的客户端 ID
回答by Bindas
The ID you are trying is an serverside.
您正在尝试的 ID 是服务器端。
That is going to render in the browser differently.
这将在浏览器中以不同的方式呈现。
try to get the ID by watching the html in the Browser.
尝试通过在浏览器中查看 html 来获取 ID。
var TestVar = document.getElementById('ctl00_ContentColumn_txt_model_code').value;
var TestVar = document.getElementById('ctl00_ContentColumn_txt_model_code').value;
this may works.
这可能有效。
Or do that ClientID method. That also works but ultimately the browser will get the same thing what i had written.
或者做那个 ClientID 方法。这也有效，但最终浏览器会得到与我写的相同的东西。
回答by Sai Kalyan Kumar Akshinthala
<script type="text/javascript" runat="server">
public void Page_Load(object Sender, System.EventArgs e)
{
double rad=0.0;
TextBox1.Attributes.Add("Visible", "False");
if (TextBox1.Text != "")
rad = Convert.ToDouble(TextBox1.Text);
Button1.Attributes.Add("OnClick","alert("+ rad +")");
}
</script>
<asp:Button ID="Button1" runat="server" Text="Diameter"
style="z-index: 1; left: 133px; top: 181px; position: absolute" />
<asp:TextBox ID="TextBox1" Visible="True" Text="" runat="server"
AutoPostBack="true"
style="z-index: 1; left: 134px; top: 133px; position: absolute" ></asp:TextBox>
use the help of this, hope it will be usefull
使用this的帮助，希望它会有用
回答by Sagar R
<script type="text/javascript">
function MyFunction() {
var FNumber = Number(document.getElementById('txtFirstNumber').value);
var SNumber = Number(document.getElementById("txtSecondNumber").value);
var Sum = FNumber + SNumber;
alert(Sum);
}
</script>
<table class="auto-style1">
<tr>
<td>FirstNaumber</td>
<td>
<asp:TextBox ID="txtFirstNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>SecondNumber</td>
<td>
<asp:TextBox ID="txtSecondNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:TextBox ID="txtSum" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" OnClientClick="MyFunction()" />
</td>
</tr>
</table>
</div>
</form>
