Just starting out with Javascript!
Below is some code:
This code is taken directly from the HTML page
<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||
| --------------------- ------ |
|___________________________________|
This code makes it so that when the search button is pressed, the search field opens.
The search button itself is just a background image:
#ToolSearchField {
background:url(../../Content/images/search_but.png) no-repeat scroll
right center transparent;
cursor:pointer; }
How can I remove the default text in the search field? I've tried using both Javascript and CSS but without success.
<script type="text/javascript">
var jo = document.getElementById("ToolSearchField").value;
alert(jo);
</script>
When I run this script, the output is always "Enter Search Term".
Then if I try using jo.remove(); it doesn't have any effect.
var jo = document.getElementById("ToolSearchField").value;
jo.remove();
In the end, I want to have a search button that triggers the search action upon clicking.
Please, could you tell me what mistake I might be making?