CODEWITHSUNDEEP
search
Ursinus
Ursinus

Reputation: 71

Disable empty search

I have a photography site driven in part by the 'Photoshelter' service, and I put an embedded search bar in my nav.

<form action="http://brettcole.photoshelter.com/search" method="get">
<input type="text"  placeholder="search library" size="15" name="I_DSC">
<input type="submit" value="go">
<input type="hidden" name="I_DSC_AND" value="t">
<input type="hidden" name="_ACT" value="search">
</form>

It allows for a search to be executed with the no search term present, which then returns all 12,000 photos in my archive. Is there a best practice for preventing this, such that the user has to type something or nothing will happen when they click search?

It's also present on my advanced search page. This is generated by a search widget shortcode in the Photoshelter back end. I'd like to apply the same thing here, but not sure how the widgetization of it might affect the process.

Many thanks

Upvotes: 1

Views: 2366

Answers (3)

Eli Dalbey
Eli Dalbey

Reputation: 1

Here is a function I wrote to disable the search form submitting if the search field is empty. It also focuses the cursor on the search field if the form is not submitted so that the user does not think that search is broken.

This is assuming that jQuery is loaded. Hope this helps!

var preventSearchIfEmpty = function() {

    $('form[method="get"]').on( 'submit', function( ev ){

        var query = $('input[type="text"]').val(),
            queryLength = query.length;

        if ( 0 === queryLength ) {

            // Make the cursor blink so user is aware it's not broken, they need input to search
            $('input[type="search"]').focus();
            ev.preventDefault();
            return;
        }
    });
}();

Upvotes: 0

user764357
user764357

Reputation:

You can use the onsubmit attribute of the form element to check if the user has entered information in any fields and then prevent submit based on that.

<script>
    function checkValues() {
        searchBox = document.getElementById("SearchField");
        return searchBox.value != ""; // True will allow submission and false will prevent it
    }
 </script>

With this...

<form onsubmit="checkValues();" action="http://brettcole.photoshelter.com/search" method="get">
    <input type="text" id="SearchField" placeholder="search library" size="15" name="I_DSC">
    <input type="submit" value="go">
    <input type="hidden" name="I_DSC_AND" value="t">
    <input type="hidden" name="_ACT" value="search">
</form>

Should do what you need.

See also this answer: How to grab the onSubmit event for a form?

Upvotes: 1

Ursinus
Ursinus

Reputation: 71

The actual search isn't working

From the contact page for example, it returns this

http://brettcolephotography.com/contact.html?I_DSC=red&I_DSC_AND=t&_ACT=search

the formula for my search returns is

http://brettcole.photoshelter.com/search?I_DSC=red&I_DSC_AND=t&_ACT=search

this search bar is present on all three of my web properties, personal site, blog, and photoshelter site, all three are tightly integrated to where you can't tell when you're switching between them. It needs to work regardless of where the search is being executed from. Thanks

Upvotes: 0

Related Questions