HTML表单onsubmit错误/方法=“发布”不起作用

I have a working php/mysql form submission and I'm trying to disable the submit button once the form is submitted,

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>

It works fine without the onsubmit but when I add it i guess the post method isnt firing. I tried adding:

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

but no luck.

Instead of using javascript. You can directly use 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>

If you post then submit button will be disabled.

Using 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>

within script tags,

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

It seems that your form is submitted directly, executing the 'action' tag. If you want to stay on the same form try using an AJAX request instead..

Try:

<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>

with following script:

<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>