SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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,

    Code JavaScript:
    <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
    ********
    Regards,

    P

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.

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

    Here's a working example:

    Code html4strict:
    <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
    Code javascript:
     
    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';
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ********
    Regards,

    P


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •