HTML表单onsubmit错误/ method =“ post”不起作用

Question

我有一个可以正常工作的php / mysql表单提交程序，并且我试图在表单提交后禁用“提交”按钮，

的HTML

<form action=""  onsubmit="document.getElementById('submit-button').disabled = true;" method="post">
     <p><label>Username</label>
     <input id="username" type="text" name="username" value=""  autofocus/></p>

     <p><label>Password</label>
      <input type="password" name="password" value=""  /></p>

      <p><label></label>
     <input type="submit" id="submit-button" name="submit" value="Login"  /></p>
</form>

没有onsubmit，它可以正常工作，但是当我添加它时，我猜post方法不会触发。 我尝试添加：

onsubmit="document.getElementById('submit-button').disabled = true; return true;"

但没有运气。

Answer 1

而不是使用javascript。 您可以直接使用php

<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value=""  autofocus/></p>
<p><label>Password</label><input type="password" name="password" value=""  /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login"  <?php  echo ('POST' == $_SERVER['REQUEST_METHOD']) ? 'disabled' : ''?>/></p>
</form>

如果您发布，则提交按钮将被禁用。

Answer 2

您的表单似乎是直接提交的，执行了'action'标签。 如果要保留在同一表格上，请尝试使用AJAX请求。

Answer 3

尝试：

<form action="" method="post">
     <p><label>Username</label>
     <input id="username" type="text" name="username" value=""  autofocus/></p>

     <p><label>Password</label>
     <input type="password" name="password" value=""  /></p>

     <p><label></label>
     <input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>

使用以下脚本：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $("#submit-button").on("click", function(e){
        // For demo purpose
        e.preventDefault();
        document.getElementById("submit-button").disabled = true; 
    });
</script>

Answer 4

使用jQuery，

<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value=""  autofocus/></p>
<p><label>Password</label><input type="password" name="password" value=""  /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login"/></p>
</form>

在脚本标签中，

$(function(){
   $("#submit-button").click(function(){
       $("#submit-button").prop("disabled", true);
   });
});