简体   繁体   English

单击按钮时使用JavaScript清除多个文本框

[英]Clear multiple textbox using JavaScript on button click

I working in Asp.net c# . 我在Asp.net c# I have a task to clear multiple textbox on button click , but now according to the requirement I have to use JAVASCRIPT . 我的任务是在button click清除多个textbox ,但是现在根据要求我必须使用JAVASCRIPT So I can't do that with C# code. 所以我不能用C#代码做到这一点。 Now I am using the following : 现在我正在使用以下内容:

JAVASCRIPT Function : JAVASCRIPT功能

function clrCtrl() {
    document.getElementById('TextBox1').value = "";

} 

with this method the line of is greater. 用这种方法的线更大。 Now when I have 20 30 of textbox this code is not efficient so plz give me any suggestion to this.... 现在当我有20 30个文本框时,此代码效率不高,因此请给我任何建议。

Have you considered using JQUERY ? 您是否考虑过使用JQUERY Jquery selectors has different combinations that may help you to more easily reset controls based on CSS classes, control types, using 'likes'. jQuery选择器具有不同的组合,可以帮助您使用“喜欢”更轻松地基于CSS类,控件类型重置控件。

http://api.jquery.com/button-selector/ http://api.jquery.com/button-selector/

Here is an example from jquery page: 这是jquery页面的示例:

<input class="myClass" name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

<script>
     $( "input[name*='man']" ).val( "has man in it!" );
     $( ".myClass" ).val("setting value based on class")
</script>

Give class name to the text box to which you want to clear then try to use 在要清除的文本框中输入类别名称,然后尝试使用

document.getElementsByClassName("MyTestClass") to get elements and use your logic to do whatever you want. document.getElementsByClassName("MyTestClass")来获取元素并使用您的逻辑进行所需的操作。

eg:- 例如:-

function clrCtrl() {

    var elements = [] ;
    elements = document.getElementsByClassName("MyTestClass");

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

} 

Hope this helps. 希望这可以帮助。

Kind Regards. 亲切的问候。

if you are using jQuery you could add a style class like textbox to each of your textboxes and then do $('.textbox').val(''); 如果您使用的是jQuery,则可以向每个文本框添加一个诸如textbox之类的样式类,然后执行$('.textbox').val(''); you html would look something like <asp:TextBox runat="server" ID="TextBox" CssClass="textbox" /> for each of you text boxes make sure to include CssClass="textbox" 您的html看起来像<asp:TextBox runat="server" ID="TextBox" CssClass="textbox" /> ,确保每个文本框都包含CssClass="textbox"

You should gather the input elements you want to clear first, and then just loop on them to erase their content : 您应该先收集要清除的输入元素,然后循环遍历它们以清除其内容:

function clrCtrl() {

    var elems = [] ;
    elems = elems.concat(document.getElementsByTagName("input"));
    elems = elems.concat(document.getElementsByTagName("textarea"));
    //and so on

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

} 

I would also advice to give a common className to those elements if you want to group them : 如果要对它们进行分组,我也建议给这些元素一个通用的className:

function clrCtrl(groupName) {

    var elems = [] ;
    elems = elems.concat(document.getElementsByTagName("input"));
    elems = elems.concat(document.getElementsByTagName("textarea"));

    for(var i=0,c=elems.length ; i<c ; i++){
       if(elems[i].className==groupName){elems[i].value = "" ;}
    }

} 

Or if you are targetting only modern browsers, you can use the "getElementsByClassName" method : 或者,如果您仅针对现代浏览器,则可以使用“ getElementsByClassName”方法:

function clrCtrl(groupName) {

    var elems = document.getElementsByClassName(groupName) ;

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

} 
<html>
<head>

<script>
function funClear() {

    document.getElementById("form1").reset();

} 

</script>
</head>

<body>
<form id="form1">
Name:<input type="text" id="txt"><br><br>
Email:<input type="text" id="txt"><br><br>
Phone:<input type="text" id="txt"><br><br>
Message:<input type="textarea" height="50" width="70" id="txt"><br><br>

<input type="button" name="clear"value="clear" onclick="funClear()">

</form>
</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM