title: Console log on click event with textbox
body: <p>I know this is probably a duplicate question. I am trying to use the value of a textbox and just show it in my console.log. It appears for a second and disappears.</p>
  
  <p>Here is my HTML form</p>
  
  <pre><code>&lt;form&gt;
      &lt;input type ="text" id="search" name="search" placeholder="Search..." size="45" required&gt;
      &lt;input type ="submit" value="GO" id="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my JavaScript</p>
  
  <pre><code>$(function(){
  
  
  $("#submit").on("click", function(){
  
      var t = document.getElementById("search").value;
      console.log(t);
  
  
      });
  });
  </code></pre>
  
  <p>For future context, I am trying to use that information to plug it into the wikipedia API.</p>
  
  <pre><code>        var wikipediaURL = "https://en.wikipedia.org//w/api.php?action=opensearch&amp;search="+ t +"&amp;format=json&amp;callback=?";
  
      $.ajax({
          url: wikipediaURL,
          type:'GET',
          contentType: "application/json; charset=utf-8",
          async: false,
          dataType: "json",
          success: function(data, status, jqXR){
              console.log(data);
          },
      })
      .done(function() {
          console.log("success");
      })
      .fail(function() {
          console.log("fail");
      })
      .always(function() {
          console.log("complete");
      });
  </code></pre>