title: Javascript check form field value before submit
body: <p>I have a search box on my site to search through a database of books. The following options are presented to the user:</p>
  
  <ul>
  <li>Search Query (a text input field)</li>
  <li>Where to search (a select field with the options: current, archive or all)</li>
  <li>What to search for (a select field with the options: title, author, owner or reader)</li>
  </ul>
  
  <p>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.</p>
  
  <p>The current code I use is as follows:</p>
  
  <h3>HTML</h3>
  
  <pre><code>    &lt;form method='get' action='/main'&gt;
       &lt;label for='search'&gt;Search&lt;/label&gt;
       &lt;div style='position:relative;display:inline;'&gt;
        &lt;input type='text' id='search' name='search' onkeyup='showHint(this.value)' autocomplete='off'/&gt;
        &lt;div style='display:inline;' id='txtHint'&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;select name='searchIn'&gt;
        &lt;option name='searchIn' id='searchIn' value='current' selected&gt;Current&lt;/option&gt;
        &lt;option name='searchIn' id='searchIn' value='archive'&gt;Archive&lt;/option&gt;
        &lt;option name='searchIn' id='searchIn' value='all'&gt;All&lt;/option&gt;
       &lt;/select&gt;
       &lt;select name='searchBy' onChange='getSearchBy(this.value)'&gt;
        &lt;option name='searchBy' id='searchBy' value='Title' selected&gt;By Title&lt;/option&gt;
        &lt;option name='searchBy' id='searchBy' value='Author'&gt;By Author&lt;/option&gt;
        &lt;option name='searchBy' id='searchBy' value='Owner'&gt;By Owner&lt;/option&gt;
        &lt;option name='searchBy' id='searchBy' value='Reader'&gt;By Reader&lt;/option&gt;
       &lt;/select&gt;
       &lt;input type='submit' class='submit' value='Submit'/&gt;
      &lt;/form&gt;
  </code></pre>
  
  <h3>AJAX/Javascript</h3>
  
  <pre><code>      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 &amp;&amp; xmlhttp.status==200){
       document.getElementById('txtHint').innerHTML=xmlhttp.responseText;
      }
     }
     var searchBy = getSearchBy(document.getElementById('searchBy').value);
     xmlhttp.open('GET','get_hint.php?q='+str+'&amp;searchBy='+searchBy,true);
     xmlhttp.send();
    }
  </code></pre>
  
  <p>The file 'get_hint.php' does all the processing and queries the database and returns the results as the innerHTML of txtHint element...</p>
  
  <p>The getSearchBy function doesn't seem to return 'Author' when the 'By Author' option has been selected, any ideas?</p>
  
  <h2>Update</h2>
  
  <p>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!</p>