Jquery - sometimes working script

Question

Consider the following script for checking if search form is empty. The id's of search buttons are: mainSearch and searchIcon

    <script type="text/javascript">
    $(document).ready(function() {
        $('#mainSearch').click(function() {
                if($("input[type=text][name=search]").val() == "" || $("input[type=text][name=search]").val() == 'Напишете търсената дума'
                || $("input[type=text][name=search]").val() == 'Enter search keywords here')
                    return false;
        });
    });
    $(document).ready(function() {
        $('#searchIcon').click(function() {
                if($("input[type=text][name=q]").val() == "" ) 
                    return false;
        });
    });
    </script>

HTMLscheme:

<div class="searchForm">
            <form action="search.php" method="get">
                <input type="text" name="search" id="searchForm" value="<?php if(checkBgLanguage()) echo 'Напишете търсената дума'; else echo 'Enter search keywords here'; ?>" autocomplete="off"
                maxlength="35"/>
                <a href="search.php"><img src="css/imgs/searchIcon.png" width="24" height="24" id="mainSearch"/></a>
            </form></div>

For some reason the second function is working on every page. The first function works only on the home page. Another problem is pressing enter button; nobody should submit clear form with enter. Any help is greatly appreciated.

I don't get it. How are you using these? Returning false from an event handler is probably not going to do what you want. Also, you don't need two document.ready functions. — Ariel, Nov 27 '11 at 07:44

score 4 · Accepted Answer · answered Nov 27 '11 at 07:47

You should put both those functions into a single $(document).ready(){} block, as each block will slow down your page by binding the event respectively. You can also use the shorthand $(function(){});. From there, try event.preventDefault() instead of returning false:

$(function(){
    $('#mainSearch').click(function(event) {
        var val = $("input[type=text][name=search]").val();
        if(val == "" || val == 'Напишете търсената дума'
            ||val == 'Enter search keywords here') {
            event.preventDefault();
        }
    });

    $('#searchIcon').click(function(event) {
        var val = $("input[type=text][name=q]").val();
        if(val == "" ) {
            event.preventDefault();
        }
    });
});

MilkyWayJoe · Answer 2 · 2011-11-27T07:56:33.020

1

You just need one $(document).ready(function() {

Try changing to this:

<script type="text/javascript">

    var texts = [ 'Enter search keywords here' 
                 ,'Напишете търсената дума'];
    $(document).ready(function() {
        $('form').bind('submit', function(e) {
           var errors = 0;
           if('' === $("input[type=text][name=q]").val()) {
               errors++;
           }
           $(texts).each(function(i,x) {
               if(x === $("input[type=text][name=q]").val()) {
                   errors++;
               };
           )};

           if(0 != errors) {
               e.preventDefault();
               return false;
           }

        });
    });
    </script>

edited Nov 27 '11 at 07:56

answered Nov 27 '11 at 07:45

MilkyWayJoe

9,082
2
38
53

1

I thought that might be an issue, but http://stackoverflow.com/questions/1148241/jquery-is-it-bad-to-have-multiple-document-readyfunction... – Bert Nov 27 '11 at 07:45
@BertEvans http://jsperf.com/docready/3 Multiple doc ready events slow down the page. – Maverick Nov 27 '11 at 07:53
@PHPBree Cool beans! Nice to know. – Bert Nov 27 '11 at 07:55

Jquery - sometimes working script

2 Answers2