I working in 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. So I can't do that with C# code.
Now I am using the following :
JAVASCRIPT Function :
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....
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.
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.
Have you considered using JQUERY? Jquery selectors has different combinations that may help you to more easily reset controls based on CSS classes, control types, using 'likes'.
http://api.jquery.com/button-selector/
Here is an example from jquery page:
<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>
if you are using jQuery you could add a style class like textbox to each of your textboxes and then do $('.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"
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 :
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 :
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>
