Member Avatar for Ana D.

Hi,

In my page I have the following code:

<asp:TextBox ID="SearchCriteriaTextBox" runat="server" Text="Enter Search Criteria" Width="150px" ForeColor="GrayText" OnClick="this.value = ''; this.style.color = 'black'" OnBlur="javascript:changeText('<%=SearchCriteriaTextBox.ClientID %>')" />

And for the javascript:

function changeText(txtB) {
            var textBox = document.getElementById(txtB);
            var txt = textBox.value;
            if (txt = "") {
                textBox.value = "Enter Search Criteria";
                textBox.style.color = "grey";
            }
        }

What I'm trying to do is, when the user clicks on the TextBox, the text is cleared (this part is working) and when the user clicks outisde the textBox the text "Enter Search Criteria" is shown again, but only if the the textBox is empty. The problem is that on the function changeText the variable textBox is null, but I don't understand why.

Does anyone know what is wrong?

Thanks in advance,

Ana

  • 3 Contributors
  • 4 Replies
  • 500 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by yamanshr

Dani AI

Generated

A short, practical follow-up.

As pointed out, the simplest fix for the original symptom was to avoid relying on a server-side ClientID expression in the inline handler and instead reference the control from the element itself. Also check for the common JavaScript mistakes that cause runtime nulls — always confirm the rendered id in View Source and guard before using properties (for example, check the element exists before reading value), and watch out for assignment vs comparison in if statements.

A more robust, modern approach is to use the HTML5 placeholder for the hint text and unobtrusive JavaScript for any fallback/behavior or cross-control logic (passing multiple ClientIDs). Example pattern:

<input id="searchInput" type="text" placeholder="Search…" data-action-btn="<%= MyButton.ClientID %>" aria-label="Search" />
document.addEventListener('DOMContentLoaded', function () {
  var inp = document.getElementById('searchInput');
  if (!inp) return;
  var defaultText = inp.getAttribute('placeholder') || '';

  // fallback for very old browsers without placeholder
  if (!('placeholder' in document.createElement('input'))) {
    if (inp.value.trim() === '') inp.value = defaultText;
    inp.addEventListener('focus', function () { if (this.value === defaultText) this.value = ''; });
    inp.addEventListener('blur',  function () { if (this.value.trim() === '') this.value = defaultText; });
  }

  // access related controls (button) via data- attribute
  var btn = document.getElementById(inp.dataset.actionBtn);
  if (btn) {
    inp.addEventListener('input', function () {
      var v = this.value.trim();
      btn.disabled = v === '' || v === defaultText;
    });
  }
});

Quick tips and checklist:

  • For WebForms, consider ClientIDMode="Static" for predictable IDs when appropriate.
  • Prefer addEventListener and data-attributes over inline onclick/onblur for maintainability.
  • Always console.log() the id you think is rendered — if document.getElementById(...) returns null, inspect the page source to verify the actual id.
  • Don’t rely on placeholder alone for accessibility; include a proper <label>.

For a quick one-line fix in simple pages, ’s inline approach works, but for production code use the unobtrusive pattern above.

Recommended Answers

All 4 Replies

Member Avatar for Ramesh S

If see ViewSource of the HTML for your page, <%=SearchCriteriaTextBox.ClientID %> is not rendered properly.

You can change your code as below

<asp:TextBox ID="SearchCriteriaTextBox" runat="server" Text="Enter Search Criteria" Width="150px" ForeColor="GrayText"  OnClick="this.value = ''; this.style.color = 'black'" OnBlur="javascript:changeText(this.id)" />
Member Avatar for Ana D.

Hi Ramesh,

Thanks for you reply! It solved the problem and now it's working great! Thanks a lot!

Ana

Member Avatar for Ana D.

Hi Ramesh,

The code you suggested worked for my case initially. But now I need to reference another control in the javascriptMethod. So, the parameter I have to pass to the javascript method are: myTextBox.ClientID and myButton.ClientID.

myTextBox.ClientID I can pass using , but how do I do with myButton.ClientID?

Thanks,

Ana

Member Avatar for yamanshr

Simplifing the code:

<asp:TextBox ID="SearchCriteriaTextBox" runat="server" Text="Enter Search Criteria" Width="150px" ForeColor="GrayText"  OnClick="this.value = ''; this.style.color = 'black'" OnBlur="this.value='Enter Search Criteria';this.style.color='grey'" />
Edited by yamanshr because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.