CODEWITHSUNDEEP
javascriptjquery
Sam P
Sam P

Reputation: 1

jquery mouseover event not working

I'm trying to use the Show Hint script from dynamicdrive.com to show form errors on my website.

Currently the error is displayed as 

  <span class="error">Error Message</span>

when there is an error with one of the inputs.

I would like to use the show hint script to display this error instead, then i will have to edit every page which has error on it by replacing 

  <span class="error">Error Message</span>

with

    <span class="error erroranchor" onmouseover="showhint('Error Message Here', this, event, '200px')"></span>

manually.

But i'm trying to save myself some energy here, this is why i've decided to use JQuery instead, I'm new to query and this will be my first coding loool, and from a logical view i thought JQuery will be the best. Here's what i've done so far but nothing is working.

<script type='text/javascript'>
//On document ready.. I'm not sure if it should be document ready or document load.
    $(document).ready(function() {
//First i add the class "erroranchor" to <span class="error">
    $(".error").addClass("erroranchor");
//Then i've tried to convert the onmouseover event to JQuery mouseover event.
    $(".erroranchor").mouseover(showhint(){
//Here i try to get the "Error Message" from <span class="error">Error Message</span> so it can be displayed in the hint box.
        var $errortext = $(this);
        $errortext.text(),
        this.event,
        '200px'
    });
    });
</script>

Then there is the CSS which works perfectly as i want.. 

.error {
    text-indent: -99999px;
}
.erroranchor {
    background: url(anchor.png);
}

I'd appreciate if any improvement can be made on the JavaScript above (please keep it easy to understand).

Upvotes: 0

Views: 1513

Answers (2)

Marcus
Marcus

Reputation: 5447

Your mouseover binding is wrong. It should be

$(".erroranchor").mouseover(function(){...});

Notice it is function instead of showhint.

If you want to create the showhint() function as its own function elsewhere in your code, then the binding would be

$(".erroranchor").mouseover(showhint);

Edit
If you want to have a different error message for each '.erroranchor', you could user jQuery's data() functionality:

<span class="error erroranchor" data-errormessage="Error message here"></span>
<span class="error erroranchor" data-errormessage="Different error message here"></span>

Then your eventhandler and function:

$(".erroranchor").mouseover(showhint);

function showhint() {
    var errMsg = $(this).data('errormessage');
    if(errMsg) {
        //do stuff
    }
}

Upvotes: 4

PSR
PSR

Reputation: 40318

try this

$(".erroranchor").mouseover(function(){
         showhint();
});

Upvotes: 0

Related Questions