Correct code to change ASP:textbox text with javascript

Question

0.00/5 (No votes)

See more:

I have an aspx webform with asp.TextBoxes for the user to input numbers.
If they then click on a CheckBox these numbers should change to zeroes.
The problem is that they do not change.
These are examples of the TextBoxes -

<asp:TextBox CssClass="pcnt18right" type="number" min="0" style="width:10%; text-align:right" placeholder="00" ID="TimeMins" runat="server"></asp:TextBox>

<asp:TextBox CssClass="pcnt18right" type="number" min="0" Style="text-align: left;" ID="TimeSecs" runat="server"></asp:TextBox>

This is the CheckBox -

<input type="CheckBox" id="LandingOver75m" class="regular-checkbox" onclick="MakeScoresZero()" runat="server" />

What I have tried:

The JavaScript is written at the end of the web form
The JavaScript code that runs when the CheckBox is clicked is called 'MakeScoresZero()'. I tested to see that the code runs when the checkbox is clicked by inserting a line with alert("123"); in it as the first line. That is the only line that works.

<script type="text/javascript">
    function MakeScoresZero() {
        let Mins = document.getElementById("TimeMins");
        Mins.Text = "0";
        let Secs = document.getElementById("TimeSecs");
        Secs.Text = "0";
    }
  </script>

Instead of .Text I have also tried .value, .innerHTML and .textContent, all without success.

Any help appreciated as I have spent days on this and it is very frustrating.

Posted 21-Dec-23 20:08pm

Gerry Carter

Add a Solution

3 solutions

Solution 1

The following should do the trick -

JavaScript

<script type="text/javascript">
    function MakeScoresZero() {
        document.getElementById("TimeMins").value = 0;        
        document.getElementById("TimeSecs").value = 0;        
    }
  </script>

Posted 21-Dec-23 22:04pm

Andre Oosthuizen

Comments

Richard Deeming 22-Dec-23 4:21am

Except the OP is using WebForms, so the client IDs will probably be "mangled". :)

Solution 3

Fantastic! It all works now. Thank you all very much.
I used ClientIDMode="Static" for the objects where the values had to be changed. This included three asp:TextBox(es) and one asp:DropDownList.
The JavaScript then became very simple.

<script type="text/javascript">
    function MakeScoresZero() {
        document.getElementById("TimeMins").value = "0";
        document.getElementById("TimeSecs").value = "00";
        document.getElementById("Height").value = "0";
        document.getElementById("DropDownLanding").value = "0";
    }
</script>

Posted 22-Dec-23 18:29pm

Gerry Carter

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-12-21T22:21:00

WebForms "mangles" the IDs you set to ensure they are unique across the entire page. This is particularly important in data-bound controls, where the same template can be repeated multiple times.

If you view the source of your page in the browser, you will see that your controls' IDs are not exactly equal to the ID you've set in the markup.

There are several options:

1) If your script is defined inline within the page, you can use an expression to pass the ClientID to the script:

ASPX

<script type="text/javascript">
function MakeScoresZero() {
    let Mins = document.getElementById("<%= TimeMins.ClientID %>");
    Mins.Text = "0";
    let Secs = document.getElementById("<%= TimeSecs.ClientID %>");
    Secs.Text = "0";
}
</script>

2) If you're certain there will never be a conflict, set the ClientIDMode to Static: