试图停止从页面加载自动提交按钮

Question

我有一个页面有一系列的输入，类似于一个窗体，但没有。按提交后，我想运行我的函数submitForm（）。但是，每次页面加载时，它都会自动点击提交。关于如何阻止这种情况发生的任何想法？

JS：

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 + "&email=" + femail + "&message=" + fmessage, 
     success : function(text){ 
      if (text == "success"){ 
       formSuccess(); 
     } 
    } 
    }); 
} 
function formSuccess(){ 
    $("#msgSubmit").removeClass("hidden"); 
} 

$(function() { 
    $("#btnContact").on("click", submitForm()); 
}); 

我的任何HTML：

<div class="row"> 
    <label for="name" class="h4">Name</label> 
    <input type="text" class="form-control" id="name" placeholder="Enter name" 
     required=""> 
    <label for="email" class="h4">Email</label> 
    <input type="email" class="form-control" id="email" placeholder="Enter email" 
    required=""> 
    <label for="message" class="h4 ">Message</label> 
    <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" 
    required=""></textarea> 
    </div> 
    <button id="btnContact" type="submit">Send Message</button> 
    <div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div> 
</div> 

Answer 1

从你的最后陈述中取出()。

s/submitForm\(\)/submitForm/。

您实际上正在调用该函数。

http://jsfiddle.net/fx6hefe4/

看起来就像这样：

$(function() { $("#btnContact").on("click", submitForm); });

Answer 2

Working fiddle。

您的代码经过多次更改后可以使用。

1. 替换：

   var fname = document.getElementById(name).value(); 
   var femail = document.getElementById(email).value(); 
   var fmessage = document.getElementById(message).value(); 
   

   通过：

   var fname = document.getElementById('name').value; 
   var femail = document.getElementById('email').value; 
   var fmessage = document.getElementById('message').value; 
   

2. 替换：

   $("#btnContact").on("click", submitForm()); 
   

   通过：

   $("#btnContact").on("click", function(){ 
       submitForm(); 
   }); 
   

3. 替换：

   <button id="btnContact" type="submit">Send Message</button> 
   

   通过：

   <button id="btnContact" type="button">Send Message</button> 
   

希望这有助于。