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

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>
   

希望这会有所帮助。