Click here to Skip to main content
15,882,552 members
Please Sign up or sign in to vote.
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

The following should do the trick -

JavaScript
<script type="text/javascript">
    function MakeScoresZero() {
        document.getElementById("TimeMins").value = 0;        
        document.getElementById("TimeSecs").value = 0;        
    }
  </script>
 
Share this answer
 
Comments
Richard Deeming 22-Dec-23 4:21am    
Except the OP is using WebForms, so the client IDs will probably be "mangled". :)
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:
ASPX
<asp:TextBox CssClass="pcnt18right" type="number" min="0" style="width:10%; text-align:right" placeholder="00" ID="TimeMins" ClientIDMode="Static" runat="server"></asp:TextBox>
<asp:TextBox CssClass="pcnt18right" type="number" min="0" Style="text-align: left;" ID="TimeSecs" ClientIDMode="Static" runat="server"></asp:TextBox>
ClientIDMode in ASP.NET 4.0 - Rick Strahl's Web Log[^]

3) Rather than looking for an exact match on the ID, look for an ID ending with the expected value:
JavaScript
function MakeScoresZero() {
    let Mins = document.querySelector("input[id^='TimeMins']");
    Mins.Text = "0";
    let Secs = document.querySelector("input[id^=TimeSecs']");
    Secs.Text = "0";
}
Attribute selectors - CSS: Cascading Style Sheets | MDN[^]

4) Use some other means to identify the target controls - for example, add a dummy CSS class, and select the element with that class.
 
Share this answer
 
Comments
Andre Oosthuizen 22-Dec-23 5:56am    
This is the perfect solution, I did not pick up on the WebForms, thanks for the heads-up!
Gerry Carter 22-Dec-23 6:31am    
Thank you both. It's late here so I will try your suggestions tomorrow and let you know how it goes.
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>
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900