title: How to do a Get request from a form using ajax and node
body: <p>I am using Node.js with the express framework for my web application. What I am trying to do is get the input from the client side (<strong>index.js</strong>) after a button click and request the information from my route (<strong>app.js</strong>) based off that parameter to display on my index page. I tried using ajax to make the request to my route but it does not work. I know I am doing something wrong with the URL Query string but not too sure how to fix it. Let me know if I need to clarify anything more. Thanks in advance. </p>
  
  <p><strong>index.ejs</strong></p>
  
  <pre><code>&lt;form action="" id="searchForm"&gt;
      &lt;!-- Input box--&gt;
      &lt;input type="text" id="userName" name="userName"&gt;
      &lt;!-- Submit button--&gt;
      &lt;input type="submit" value="Click Me"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>$(document).ready(function () {    
  // When the search Button is clicked run function
  $("#searchForm").submit(function () {
      // Make a ajax request to a route
      $.ajax({
          // Connect to /json route
          url: "http://localhost:8080/json",
          contentType: "application/json",
          dataType: 'json',
          // If there is no errors run my function
          success: function (data) {
              //Writes the data to a table
              var table = "";
              for (var i in data) {
                  table += "&lt;tr&gt;&lt;td&gt;" + data[i] + "&lt;/td&gt;&lt;/tr&gt;";
              }
          },
          // If there is any errors, show me.
          error: function () {
              alert('Oops, there seems to be an error!');
          },
          type: "GET",
      });           
  });
  });
  </code></pre>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>module.exports = function (app){
      app.get('/', function (req, res) {
          res.render('index.ejs'); //load the page
      });
  
  app.get('/json', function (req, res) {
          var SomeQuery = "SELECT * FROM table WHERE user LIKE '%" + req.query.userName+ "%';
          client.query(SomeQuery, function (err, results) {
              if (err) throw err; //Show any errors
              var data = [];
              // Loop through all known data
              for (var i = 0; i &lt; results.rows.length; i++) {
                  data.push(results.rows[i]); //Push any information into empty array
              }
              res.json(data); //send it to make an ajax request
          });
      });
  });
  }
  </code></pre>
  
  <p><strong>Solution</strong>
  For anyone who ran into the same problem here was the fix:</p>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>$(document).ready(function () {    
  // When the search Button is clicked run function
  $("#searchForm").submit(function () {
      // Make a ajax request to a route
      //Value from input
      var userNameID = $("#username").val();
      $.ajax({
          // Connect to /json route
          url: "http://localhost:8080/json?userName=" + userNameID,
          contentType: "application/json",
          dataType: 'json',
          // If there is no errors run my function
          success: function (data) {
              //Writes the data to a table
              var table = "";
              for (var i in data) {
                  table += "&lt;tr&gt;&lt;td&gt;" + data[i] + "&lt;/td&gt;&lt;/tr&gt;";
              }
          },
          // If there is any errors, show me.
          error: function () {
              alert('Oops, there seems to be an error!');
          },
          type: "GET",
      });           
  });
  });
  </code></pre>