Search code examples
javascriptajaxxmlhttprequest

Javascript check form field value before submit

I have a search box on my site to search through a database of books. The following options are presented to the user:

  • Search Query (a text input field)
  • Where to search (a select field with the options: current, archive or all)
  • What to search for (a select field with the options: title, author, owner or reader)

As the user types input into the search field suggestions for book titles popup below like Google has when you search. I want to know how to check which option they have chosen search for (i.e. title, author, etc.) and display the suggestions accordingly.

The current code I use is as follows:

HTML

    <form method='get' action='/main'>
     <label for='search'>Search</label>
     <div style='position:relative;display:inline;'>
      <input type='text' id='search' name='search' onkeyup='showHint(this.value)' autocomplete='off'/>
      <div style='display:inline;' id='txtHint'></div>
     </div>
     <select name='searchIn'>
      <option name='searchIn' id='searchIn' value='current' selected>Current</option>
      <option name='searchIn' id='searchIn' value='archive'>Archive</option>
      <option name='searchIn' id='searchIn' value='all'>All</option>
     </select>
     <select name='searchBy' onChange='getSearchBy(this.value)'>
      <option name='searchBy' id='searchBy' value='Title' selected>By Title</option>
      <option name='searchBy' id='searchBy' value='Author'>By Author</option>
      <option name='searchBy' id='searchBy' value='Owner'>By Owner</option>
      <option name='searchBy' id='searchBy' value='Reader'>By Reader</option>
     </select>
     <input type='submit' class='submit' value='Submit'/>
    </form>

AJAX/Javascript

      function getSearchBy(val){
   return val;
  }
  function showHint(str){
   var xmlhttp;
   if (str.length==0){ 
    document.getElementById('txtHint').innerHTML='';
    return;
   }
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
   }
   else{// code for IE6, IE5
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
   }
   xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
     document.getElementById('txtHint').innerHTML=xmlhttp.responseText;
    }
   }
   var searchBy = getSearchBy(document.getElementById('searchBy').value);
   xmlhttp.open('GET','get_hint.php?q='+str+'&searchBy='+searchBy,true);
   xmlhttp.send();
  }

The file 'get_hint.php' does all the processing and queries the database and returns the results as the innerHTML of txtHint element...

The getSearchBy function doesn't seem to return 'Author' when the 'By Author' option has been selected, any ideas?

Update

I know that many of these answers may be right, but I marked the one which arrived quickest right. Thanks for the quick response from all of you!

Solution

  • the problem in this line.

    document.getElementById('searchBy').value

    you are searching for an element with id 'searchBy'. but the element name is searchBy not id. So please add an id='searchBy' for the select element. and remove id='searchBy' from options.

    <select name='searchBy' id='searchBy' onChange='getSearchBy(this.value)'>
      <option  value='Title' selected>By Title</option>
      <option  value='Author'>By Author</option>
      <option  value='Owner'>By Owner</option>
      <option  value='Reader'>By Reader</option>
     </select>