title: Trying to Stop Button From Auto-Submitting With Page Load
body: <p>I have a page with a series of inputs, similar to a form but not. Upon pressing Submit, I want to run my function submitForm(). However, every time the page loads, it auto-clicks submit. Any ideas on how to stop this from happening?</p>
  
  <p>JS:</p>
  
  <pre><code>function submitForm(){
      // Initiate Variables With Form Content
      var fname = document.getElementById(name).value();
      var femail = document.getElementById(email).value();
      var fmessage = document.getElementById(message).value();
  
  
      $.ajax({
          type: "POST",
          url: "cgi-bin/process.php",
          data: "name=" + fname + "&amp;email=" + femail + "&amp;message=" + fmessage,
          success : function(text){
              if (text == "success"){
                  formSuccess();
          }
      }
      });
  }
  function formSuccess(){
      $( "#msgSubmit" ).removeClass( "hidden" );
  }
  
  $(function() {
      $("#btnContact").on("click", submitForm()); 
  });
  </code></pre>
  
  <p>Any my HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;label for="name" class="h4"&gt;Name&lt;/label&gt;
      &lt;input type="text" class="form-control" id="name" placeholder="Enter name"
        required=""&gt;
      &lt;label for="email" class="h4"&gt;Email&lt;/label&gt;
      &lt;input type="email" class="form-control" id="email" placeholder="Enter email" 
      required=""&gt;
      &lt;label for="message" class="h4 "&gt;Message&lt;/label&gt;
      &lt;textarea id="message" class="form-control" rows="5" placeholder="Enter your message"
      required=""&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;button id="btnContact" type="submit"&gt;Send Message&lt;/button&gt;
      &lt;div id="msgSubmit" class="h3 text-center hidden"&gt;Message Submitted!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>