title: Trying to change a SQL Request depending on what the user has selected from a dropdown menu
body: <p>please excuse me for my english as it is not my first language. I have access to a baseball database and created a dropdownlist that contains the years from 1985 to 2013. I now want to be able to display the highest paid player from the year selected, after clicking the 'lancer' button. as of right now, I am able to display data, when I click on the button. I want the player's last name, first name, team and salary, in that order. Here is my SQL request:</p>
  <pre><code>SELECT nameLast as Nom_de_famille, nameFirst as Prenom, teamID as Équipe, MAX(salary) as Salaire
  
  FROM Master, Salaries
  
  WHERE yearID=1985;
  </code></pre>
  <p>My problem is the following, I have been searching everywhere and I can't seem to find a way to change the WHERE clause of my SQL request depending on what year the user selects from my dropdown menu. It would mean the world to me if someone could point me into the right direction. The SQL request is the last line in my .js file.</p>
  <p><strong>Here's a picture of what the page looks like without clicking the button:</strong>
  <a href="https://i.stack.imgur.com/etx76.png" rel="nofollow noreferrer">Page without clicking the button</a></p>
  <p><strong>Here's a picture of what the page looks like when clicking the button when the yearID in my .js file is 1985 (just an example, I can put whatever year I want):</strong>
  <a href="https://i.stack.imgur.com/9EBp7.png" rel="nofollow noreferrer">Page when clicking the button 'lancer'</a></p>
  <p><strong>Here is my HTML code:</strong></p>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;fr&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;exercice1.js&quot;&gt;&lt;/script&gt;
          &lt;title&gt;Document&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;   
              &lt;form name=&quot;Form1&quot;&gt;
                  Choisissez une année:
                  &lt;select name=&quot;Année&quot;&gt;
                      &lt;option value=&quot;1985&quot;&gt;1985&lt;/option&gt;
                      &lt;option value=&quot;1986&quot;&gt;1986&lt;/option&gt;
                      &lt;option value=&quot;1987&quot;&gt;1987&lt;/option&gt;
                      &lt;option value=&quot;1988&quot;&gt;1988&lt;/option&gt;
                      &lt;option value=&quot;1989&quot;&gt;1989&lt;/option&gt;
                      &lt;option value=&quot;1990&quot;&gt;1990&lt;/option&gt;
                      &lt;option value=&quot;1991&quot;&gt;1991&lt;/option&gt;
                      &lt;option value=&quot;1992&quot;&gt;1992&lt;/option&gt;
                      &lt;option value=&quot;1993&quot;&gt;1993&lt;/option&gt;
                      &lt;option value=&quot;1994&quot;&gt;1994&lt;/option&gt;
                      &lt;option value=&quot;1995&quot;&gt;1995&lt;/option&gt;
                      &lt;option value=&quot;1996&quot;&gt;1996&lt;/option&gt;
                      &lt;option value=&quot;1997&quot;&gt;1997&lt;/option&gt;
                      &lt;option value=&quot;1998&quot;&gt;1998&lt;/option&gt;
                      &lt;option value=&quot;1999&quot;&gt;1999&lt;/option&gt;
                      &lt;option value=&quot;2000&quot;&gt;2000&lt;/option&gt;
                      &lt;option value=&quot;2001&quot;&gt;2001&lt;/option&gt;
                      &lt;option value=&quot;2002&quot;&gt;2002&lt;/option&gt;
                      &lt;option value=&quot;2003&quot;&gt;2003&lt;/option&gt;
                      &lt;option value=&quot;2004&quot;&gt;2004&lt;/option&gt;
                      &lt;option value=&quot;2005&quot;&gt;2005&lt;/option&gt;
                      &lt;option value=&quot;2006&quot;&gt;2006&lt;/option&gt;
                      &lt;option value=&quot;2007&quot;&gt;2007&lt;/option&gt;
                      &lt;option value=&quot;2008&quot;&gt;2008&lt;/option&gt;
                      &lt;option value=&quot;2009&quot;&gt;2009&lt;/option&gt;
                      &lt;option value=&quot;2010&quot;&gt;2010&lt;/option&gt;
                      &lt;option value=&quot;2011&quot;&gt;2011&lt;/option&gt;
                      &lt;option value=&quot;2012&quot;&gt;2012&lt;/option&gt;
                      &lt;option value=&quot;2013&quot;&gt;2013&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button id=&quot;lancer&quot;&gt;Lancer&lt;/button&gt;
              &lt;p id=&quot;texte&quot;&gt;&lt;/p&gt;
              &lt;table id=&quot;table&quot;&gt;&lt;/table&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p><strong>Here is my Javascript code:</strong></p>
  <pre><code>function genereTableau(donnees, id){
      var nb = donnees.length;
      if (nb&gt;0){
          var htmltable=&quot;&lt;tr&gt;&quot;;
          for(var attr in donnees[0]){
               htmltable=htmltable+&quot;&lt;th&gt;&quot;+attr+&quot;&lt;/th&gt;&quot;;
          };
          htmltable=htmltable+&quot;&lt;/tr&gt;&quot;;
          for(var x=0;x&lt;nb;x++){
              htmltable=htmltable+&quot;&lt;tr&gt;&quot;;
              for(var a in donnees[x]){
                  htmltable=htmltable+&quot;&lt;td&gt;&quot;+donnees[x][a]+&quot;&lt;/td&gt;&quot;;
              }
              htmltable=htmltable+&quot;&lt;/tr&gt;&quot;;
          }
          $(&quot;#&quot;+id).html(htmltable);
      }else{
          alert(&quot;La réponse à la requête est vide.&quot;);
          $(&quot;#&quot;+id).html(&quot;&quot;);
      }
  };
  
  function poste(requête){
      var postData = {};
      postData[&quot;db&quot;] = &quot;dift6800_baseball&quot;;
      postData[&quot;query&quot;] = requête; 
      $.post(
          &quot;http://www-ens.iro.umontreal.ca/~dift6800/baseball/db.php&quot;,
          postData,
          function(reponse,status){
               console.log(status);
               var obj = JSON.parse(reponse);
              if(obj.error==&quot;&quot;){
                  genereTableau(obj.data, &quot;table&quot;);
              }else{
                  alert(&quot;Erreur:&quot;+obj.error);
              }
          
          }
      );
  };
  
  function requete() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              alert(&quot;status:&quot; + this.status);
              $(&quot;#texte&quot;).text = this.responseText;
          };
      };
      xhttp.open(&quot;GET&quot;, &quot;LoremIpsum.txt&quot;, true);
      xhttp.send();
  }
  $(document).ready(function(){
  $(&quot;#lancer&quot;).click(function(event){
  
      poste(&quot;nameLast as Nom_de_famille, nameFirst as Prenom, teamID as Equipe, MAX(salary) as Salaire from Master, Salaries WHERE yearID=1985&quot;); 
  });
  });
  </code></pre>