Question

Note: I am new to Javascript.

Here is code:

it is from the html page itself

<form action="#" id="ToolKeywordSearch">
  <input type="text" class="ProductFinderText"
          id="ToolSearchField"onblur="if(this.value=='')    
             {this.value='Enter Search Term ';}" 
                onclick="if (this.value == 'Enter Search Term ')
                  { this.value = ''; }" value="Enter Search Term " />
</form>

 ___________________________________
|  _____________________     ______ |      (restriction does not let me insert image)
| |                  |O |   |      ||
| |enter search term | \|   |Search||                      
|  ---------------------     ------ |
|___________________________________|

Here what it does: when search button is pressed it opens the search field

the search image is a background:

#ToolSearchField {

 background:url(../../Content/images/search_but.png) no-repeat scroll 
    right center   transparent;

cursor:pointer;
}

How to remove the text in the search field? with Javascript or CSS, tried both but it wasn’t successful.

<script type="text/javascript">
    var jo = document.getElementById("ToolSearchField").value;
    alert(jo);
</script>

I receive Enter Search Term as an output. 

Then if I insert remove(); instead, it doesn't do anything.

var jo = document.getElementById("ToolSearchField").value;
    jo.remove();

The final result should have search button that launches the search action.

Tell me please, what am I doing wrong.

Answer 1

The var jo you’re instantiating has the string value “Enter Search Term ” after your first line of javascript. In the next line you’re telling this string to remove(), which isn’t achieving anything in the original element.

Try document.getElementById("ToolSearchField").value = ""; instead!