Onblur is using the value in the value="" part of form

Hello All:

I have a search box on my site that goes something like this,

<input onfocus="this.value=''" onblur="this.value='Enter Product Name or Keyword'" type="text" value="Enter Product Name or Keyword" type="TEXT" name="q" size="40">

however when I use the submit button on my site it uses the onblur value as the query for the search and not what people enter into the input box.

How can I deter this if at all?

Thanks,

Paul

By extracting the scripting from within the middle of the HTML code.

Then you can more easily apply some logic, such as checking if the value is the same as the default value that it started with.


if (this.value === '') {
    this.value = 'Enter Product Name or Keyword';
}

Here’s a working example:


<html>
<head>
<title>test</title>
</head>
<body> 
<form id="search">
    <input type="text" value="Enter Product Name or Keyword" type="TEXT" name="q" size="40">
</form>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

js/script.js



var search = document.getElementById('search'),
    query = search.elements.q;
query.onfocus = function () {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
}
query.onblur = function () {
    if (this.value === '') {
        this.value = 'Enter Product Name or Keyword';
    }
} 

thanks PMW!!! That was exactly what I needed… your are the best… you know that man.

LOL

Worked like a charm, you can see for yourself at www.kardwell.com

Paul