javascript clear asp textbox on html button click

Question

I want to clear an asp textbox when click to a button (html).

so basically the JS function is:

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

And an asp.net TextBox

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

And a HTML button

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

All buttons and other controls are in an asp update-panel (don't know if it makes different)

Nothing happend when I clicked to the HTML clearButton, error on the web console:

Uncaught TypeError: undefined is not a function
clearTextBox 
onclick

Answer 1

I will suggest add JS into Head part of page. then it will not create the Uncaught ReferenceError: clearTextBox is not defined

Answer 2

Try to pass Id of textbox, in your case it should be:

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

and then assign method to you input something like this

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

Answer 3

Move your following js code in page header or some other place, right now it is unable to find your js function. It must be breaking due to some error or break. Or try to put js alert/debugger in your js function to make sure that are you even able to find this function. Clearing the textbox is next step.

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

Now, if you are able to see your alert then your code can find your function. Then modify your textbox tag like:

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

Now, modify your clearTextBox function like:

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

Answer 4

You need to add

ClientIDMode="Static"

so you text box will look like this

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

In asp.net when page renders the id of controls changes

I suggest you should use jquery.

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

Also return false in your javascript function

Also try in one block your JS

Answer 5

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

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

Answer 6

Change

document.getElementByID

to

document.getElementById

and it worked. Credit goes to Mudassar

Thanks everybody!