javascript清除html按钮上的asp文本框单击答案

【问题标题】：javascript clear asp textbox on html button clickjavascript清除html按钮上的asp文本框单击
【发布时间】：2014-10-31 00:39:36
【问题描述】：

我想在单击按钮 (html) 时清除 asp 文本框。

所以基本上JS函数是：

<script type="text/javascript">
    function clearTextBox() {
        document.getElementByID('<%=txtFName.ClientID%>').value = "";
    }
</script>

还有一个 asp.net 文本框

<asp:TextBox ID="txtFName" runat="server" class="form-control" placeholder="First name" AutoCompleteType="Disabled" MaxLength="30" />

还有一个 HTML 按钮

<span class="input-group-btn">
<button class="btn default" id="clearButton" type="button" onclick="clearTextBox()"><i class="fa fa-times"></i></button>
</span>

所有按钮和其他控件都在一个asp更新面板中（不知道是否有所不同）

当我单击 HTML clearButton 时没有任何反应，Web 控制台上出现错误：

Uncaught TypeError: undefined is not a function
clearTextBox 
onclick

【问题讨论】：

标签： javascript c# jquery html asp.net

【解决方案1】：

尝试传递文本框的 ID，在您的情况下应该是：

document.getElementByID('txtFName').value = "";

然后将方法分配给您输入类似这样的内容

asp:textbox ..... onClick="yourMethodName"

【讨论】：

试过document.getElementByID('txtFName').value = "";但同样的错误
我还有一个想法。尝试将文本框内的方法 OnClick 更改为 OnClientClick=("YourJavaScriptMethodName")

【解决方案2】：

将下面的 js 代码移动到页眉或其他地方，现在它无法找到你的 js 函数。由于某些错误或中断，它一定会中断。或者尝试将 js 警报/调试器放入您的 js 函数中，以确保您甚至能够找到此函数。下一步是清除文本框。

<script type="text/javascript">
function clearTextBox() {
    alert('Hello World');
}</script>

现在，如果您能够看到警报，那么您的代码就可以找到您的函数。然后修改您的文本框标签，如：

<asp:TextBox CliendIDMode="Static" ID="txtFName" runat="server" class="form-control" placeholder="First name" AutoCompleteType="Disabled" MaxLength="30" />

现在，修改您的 clearTextBox 函数，如下所示：

<script type="text/javascript">
function clearTextBox() {
    document.getElementById('txtFName').value = '';
}</script>

【讨论】：

警报有效，但当更改为 document.getElementById('txtFName').value = ''; 时显示相同的错误
打开浏览器控制台并输入$('input')，现在检查你能在这个列表中看到你的文本框'txtFName'，试着找到它的确切客户端ID
是的，我可以看到它，它看起来像：<input name="txtFName" type="text" autocomplete="off" maxlength="30" id="txtFName" cliendidmode="Static" class="form-control" placeholder="First name">
so type document.getElementById('txtFName').value = '' 在控制台中，如果在控制台中工作，它也应该在JS中
是的，输入document.getElementById('txtFName').value = 1000，它可以工作，文本框显示1000，但当我点击按钮时仍然出现同样的错误

【解决方案3】：

我会建议将 JS 添加到 Head part of page. 然后它不会创建 Uncaught ReferenceError: clearTextBox is not defined

【讨论】：

我把它放在<head> 上但还是同样的问题，事实上如果我把其他JS和Jquery放在头上，除非我把它们移到body标签下，否则会引起很多问题
我点击“查看页面源码”查看全部，JS和所有控制代码。

【解决方案4】：

你需要添加

ClientIDMode="Static"

所以你的文本框看起来像这样

<asp:TextBox CliendIDMode="Static" ID="txtFName" runat="server" class="form-control" placeholder="First name" AutoCompleteType="Disabled" MaxLength="30" />

在asp.net中页面渲染时控件的id发生变化

我建议你应该使用 jquery。

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

在你的 javascript 函数中也返回 false

也可以在一个块中尝试你的 JS

【讨论】：

能否贴出完整的jquery函数以及如何在控件上调用，我的JS和JQuery很弱
@RonaldinhoState 如果您使用的是 VS 2010。Jquery 包含在网站项目中。只需从脚本文件夹中拖动 3 个 jquery 文件并将其放在页面的标题部分并使用我上面编写的代码行
@RonaldinhoState 更新了我的答案应该在你的 javascript 函数上返回 false
我想我包含了 Jquery 参考，我仍然很难弄清楚如何遵循您的答案，不知道如何使用 JS 和 Jquery。
@RonaldinhoState 发布有问题的 html 我认为你编写的 JS 代码不正确

【解决方案5】：

function clearTextBox() {
   var elements = [] ;
    elements = document.getElementsByClassName("form-control"); // your class name 

    for(var i=0; i<elements.length ; i++){
       elements[i].value = "" ;
    }
}

【讨论】：

我有多个控件使用form-control CSS 类，我该怎么做？

【解决方案6】：

改变

document.getElementByID

到

document.getElementById

它奏效了。归功于Mudassar

谢谢大家！

【讨论】：