Quick jQuery Question

Question

I have this code:

<a href="javascript:$('#searchPost').submit()">Search</a>

This submits my search form. I'm trying to keep it from submitting when empty. I know that'll be difficult to do inline, but when I tried to take the JS code out of the link, it ceases to work, even when the inline code calls a function outside of the link.

I was told to use this code:

$('#searchPost').submit(function(event) {
    if ($(this).find('#searchBox').val() == '') {
       event.preventDefault();
    }
});

But I'm not sure where to put it to make it work. Of course, inline, that code doesn't do what I want it to. I put that completely in the head of my document and it didn't change much either. Any help?

score 3 · Answer 1 · answered Mar 03 '11 at 18:02

3

You will need to wrap it in $(document).ready(function(){}); or short hand of $(function(){});

answered Mar 03 '11 at 18:02

Mark Coleman

40,542
9
81
101

Nothing to feel sorry about, just glad I could help with your problem. – Mark Coleman Mar 03 '11 at 18:04

score 0 · Answer 2 · answered Mar 03 '11 at 18:00

0

if ($(this).find('#searchBox').val() == '') {
     return false;
    }

answered Mar 03 '11 at 18:00

Vivek Goel

22,942
29
114
186

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Add this to the function:

return false;

event.preventDefault() vs. return false

edited May 23 '17 at 12:04

Community

1
1

answered Mar 03 '11 at 18:01

Mike Thomsen

36,828
10
60
83

score 0 · Answer 4 · answered Mar 03 '11 at 18:01

0

I think you want to trap the $('#searchPost').click() event, not the submit() event.

Try trapping $.click(), then checking the val(), then conditionally executing $.submit().

Make sure $('#searchPost') exists too...

answered Mar 03 '11 at 18:01

Fudgie

413
3
12

score 0 · Answer 5 · answered Mar 03 '11 at 18:02

0

Without seeing any of your code, I'd say a safe bet would be to place that code after the jQuery script and after the form.

answered Mar 03 '11 at 18:02

sdleihssirhc

42,000
6
53
67

score 0 · Answer 6 · answered Mar 03 '11 at 18:02

You should wrap it in a DOMready handler, this is the easiest way to do it with jQuery:

<script>
$(function() {
   $('#searchPost').submit(function(event) {
       if ($(this).find('#searchBox').val() == '') {
          event.preventDefault();
       }
   }); 
});
</script>

Quick jQuery Question

6 Answers6