title: Ajax script calls php script twice
body: <p>I use ajax on my html page to load data from MySql db w.o. reload and send email notification on some event, after selecting on html page - ajax calls script.php that made request to db and return result, it works perfect; and in same time I use function that shows and hides ajax loader image until query is executed, but it calls my php script twice so that each time it sends email twice</p>
  
  <pre><code>&lt;script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  function showUser(str)
  {
      if (str=="")
      {
          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;
          }
      }
      xmlhttp.open("GET","../getuser.php?q="+str,true);
      xmlhttp.send();
  }
  
  // ajax loader image
  
  function getuser(str){
      $.ajax({
          url: "http://site.com/getuser.php?q="+str,
          beforeSend: function (XMLHttpRequest)
          {
              $("#loading").show();
          }
      })
      .done(function ( data ) {
          $("#txtHint").html(data);
          $("#loading").hide();
      });
  }
  $(document).ready(function(){
      $("select[name='users']").change(function () {
          getuser($("option:selected", this).val());
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>how to improve this code to call php script just one time?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt;
      &lt;select name="users" onchange="showUser(this.value)"&gt; 
          &lt;option value=""&gt;Select a user:&lt;/option&gt;
          &lt;option value="1"&gt;User1&lt;/option&gt;
          &lt;option value="2"&gt;User2&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  &lt;div style="display:none" id="loading"&gt;
      &lt;p&gt;&lt;img src="../loader.gif" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="txtHint"&gt;&lt;b&gt;User info will be listed here.&lt;/b&gt;&lt;/div&gt;
  </code></pre>