CODEWITHSUNDEEP
jquerysearchselecttextinput
JV10
JV10

Reputation: 891

jQuery select menu and text input search

I'm creating an image search function, that will be used on the homepage of the website, linking to the websites photography library.

I've created a select menu with all the Image Gallery Albums (these are the pages that display a list of child images) as options, and have a text input and a search button.

<select name="photographySearch" id="photographySearch">
    <option value="">Select category</option>
    <option value="football.aspx">Football</option>
    <option value="basketball.aspx">Basketball</option>
    <option value="hockey.aspx">Hockey</option>
</select>

<input type="text" id="photographySearchKeyword"
  onfocus="if(this.value==this.defaultValue) this.value='';"
  onblur="if(this.value=='') this.value='Enter keyword';"
  value="Enter keyword" />

<input type="button" 
  id="photographySearchButton" 
  name="searchbutton" 
  value="Search" />​

I need a script that will do the following:

  1. If the user clicks the search button without selecting any options from the select menu or entering any keywords into the text input, the location will change to the "/photography-search.aspx" page (which by default displays all the images in the photography library) and not display the default "Enter keyword" as the search result

  2. If the user clicks the search button without selecting any options from the select menu and enters a keyword/s into the text input, the location will change to the "/photography-search.aspx?search=' + $('#photographySearchKeyword').attr('value');" including the value entered into the text input

  3. If the user clicks the search button without selecting any options from the select menu or entering any keywords into the text input, the location will change to the "/photography-search.aspx" page (which by default displays all the images in the photography library)

  4. If the user clicks the search button and selects any options from the select menu and doesn't enter any keywords into the text input, the location will change to the value of the selected option e.g. "/football.aspx" page and not display the default "Enter keyword" as the search result

  5. If the user clicks the search button and selects any options from the select menu and enter any keyword/s into the text input, the location will change to the value of the selected option e.g. "/football.aspx?search=' + $('#photographySearchKeyword').attr('value');" including the value entered into the text input page

So far I've only managed to create option 2:

$('#photographySearchButton').click(function() {
    location.href = '/photography-search.aspx?search=' +
                    $('#photographySearchKeyword').attr('value');
});

http://jsfiddle.net/zjs8n/

Any help would be greatly appreciated.

Upvotes: 0

Views: 1617

Answers (1)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48693

Test the example here

$(document).ready(function() {
  $('#photographySearchButton').click(function() {
    var category = $('#photographySearch :selected').val();
    var keyword = $('#photographySearchKeyword').val();

    var page = '/photography-search.aspx';
    var query = '';

    if (category.length > 0)
      page = category;
    if (keyword.length > 0 && keyword != 'Enter keyword')
      query = '?search=' + keyword;

    alert(page+query);
  });
});

Upvotes: 2

Related Questions