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

Pang · Accepted Answer · 2014-10-30 07:03:51Z

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"

edited Oct 30, 2014 at 7:03

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Oct 30, 2014 at 6:57

Grzegorz P.

771 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ronaldinho Learn Coding Over a year ago

tried document.getElementByID('txtFName').value = ""; but same error

Grzegorz P. Over a year ago

i have one more idea. Try to change method inside you textbox OnClick to OnClientClick=("YourJavaScriptMethodName")

Amer · Accepted Answer · 2014-10-30 08:17:28Z

2

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>

edited Oct 30, 2014 at 8:17

answered Oct 30, 2014 at 8:07

Amer

4192 silver badges11 bronze badges

5 Comments

Ronaldinho Learn Coding Over a year ago

the alert worked but when change to document.getElementById('txtFName').value = ''; it showed same error

Amer Over a year ago

open the browser console and type $('input'), now check can you see your textbox 'txtFName' in this list, try to find its exact client-side id

Ronaldinho Learn Coding Over a year ago

yes I can see it, it looks as:

<input name="txtFName" type="text" autocomplete="off" maxlength="30" id="txtFName" cliendidmode="Static" class="form-control" placeholder="First name">

Amer Over a year ago

so type document.getElementById('txtFName').value = '' in console, if it is working in console, it should be in JS as well

Ronaldinho Learn Coding Over a year ago

yes typed document.getElementById('txtFName').value = 1000 and it workes, textbox showed 1000, but still same error when I clicked to the button

Amit · Accepted Answer · 2014-10-30 06:55:50Z

1

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

answered Oct 30, 2014 at 6:55

Amit

15.4k8 gold badges49 silver badges69 bronze badges

2 Comments

Ronaldinho Learn Coding Over a year ago

I put it on <head> but still same problem, in fact if I put other JS and Jquery on the head it will cause a lot of problem unless I move them under body tag

Ronaldinho Learn Coding Over a year ago

I click "View page source" and see all, JS and all control codes.

fc123 · Accepted Answer · 2014-10-30 10:03:40Z

0

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

edited Oct 30, 2014 at 10:03

answered Oct 30, 2014 at 7:02

fc123

9183 gold badges16 silver badges40 bronze badges

8 Comments

Ronaldinho Learn Coding Over a year ago

can you post full jquery function and how to call it on the control, my JS and JQuery is weak

fc123 Over a year ago

@RonaldinhoState If you are using VS 2010. Jquery is included in website project. Just drag 3 jquery files from script folder and drop it on your page's header section and use the line of code I wrote above

fc123 Over a year ago

@RonaldinhoState Updated my answer should return false on your javascript function

Ronaldinho Learn Coding Over a year ago

I think I have Jquery references included, I still having hard time to figure out how to follow your answer, have no idea about how to use JS and Jquery.

fc123 Over a year ago

@RonaldinhoState post ur html in question I think u r writng ur JS code not correctly

|

Aarif Qureshi · Accepted Answer · 2014-10-30 11:57:50Z

0

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

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

answered Oct 30, 2014 at 11:57

Aarif Qureshi

4741 gold badge3 silver badges13 bronze badges

1 Comment

Ronaldinho Learn Coding Over a year ago

I have more than one control using form-control CSS class, how do I do?

Ronaldinho Learn Coding · Accepted Answer · 2014-10-30 16:37:11Z

0

Change

document.getElementByID

to

document.getElementById

and it worked. Credit goes to Mudassar

Thanks everybody!

answered Oct 30, 2014 at 16:37

Ronaldinho Learn Coding

13.9k25 gold badges86 silver badges111 bronze badges

Collectives™ on Stack Overflow

javascript clear asp textbox on html button click

6 Answers 6

2 Comments

5 Comments

2 Comments

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

5 Comments

2 Comments

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related