jQuery preventDefault - cannot get this working

Question

I am trying to use preventDefault so that nothing happens when a form is submitted with 'Account number' as the input's value.

For all the reading I have done, I cannot see the problem. I suspect I have just been staring at it too long and am missing something really obvious. Help me leave the office on time today!

Example of the non-working code here: http://jsfiddle.net/sX52r/

HTML

<form action="/" id="AccSearch" method="post">                            

<input type="text" name="AccountNumber" ID="AccountNumber" class="lookup_field" value="Account number" onfocus="if(this.value=='Account number'){this.value=''}" 
onblur="if(this.value==''){this.value='Account number'}">

<input type="image" id="AccSearchSubmit" src="/Images/search.png" onmousedown="this.src='/Images/search_down.png'" onmouseup="this.src='/Images/search.png'" onmouseout="this.src='/Images/search.png'" alt="Submit" />

</form>

js

$('#AccSearchSubmit').click(function (e) {
    if ($('#AccountNumber').val == 'Account number') {
        e.preventDefault();
        alert("BOING!");
    }
});

Answer 1

val is a function, you should call it.

if ($('#AccountNumber').val() == 'Account number') {

And the working jsFiddle .

Suggestions:

• It might be a better idea to catch the form's submit event instead, because pressing Enter in the text input also submits the form for example.

• Instead of this "fragile" solution (with all the ugly, obtrusive inline event handlers), you should use the placeholder HTML5 attribute (all modern browsers support it) and for older browsers, use a plugin like Mathias Bynens's jquery-placeholder .

Answer 2

Use the submit event of the form.. Using click() - you will have to manually handle the enter key press.

$('#AccSearch').submit(function (e) {
    if ($('#AccountNumber').val() == 'Account number') {
        e.preventDefault();
        alert("BOING!");
    }
});

Also you were missing the parentheses after .val()

http://jsfiddle.net/sX52r/8/

Answer 3

val is a method of a jQuery object, not a property. Change this:

if ($('#AccountNumber').val == 'Account number') {

to this:

if ($('#AccountNumber').val() == 'Account number') {
//                         ^^ invoke the method

Answer 4

$('#AccountNumber').val is the function pointer. To use the value call the function like this:

$('#AccountNumber').val();

Answer 5

I just wanted to follow up on this as I had a little free time today and managed to improve my original code.

I found that using return false was actually more suitable than preventDefault on this occasion. There was also an issue around submitting the form by pressing enter which was down to the value of the textbox I was using.

Anyway, here is my solution - turned out to be quite a bit lighter too.

http://jsfiddle.net/sX52r/22/

$('#AccSearch').submit(function () {
if ($('#AccountNumber').val() == 'Account number' || $('#AccountNumber').val() == '') {
alert("BOING!");            
return false;
}});