javascript - Form not submitting after disabling submit button - Stack Overflow

admin管理员组

文章数量:1340605

I have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.

I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.

Here's what I tried so far

<form method="POST" action="xyz.php">
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>

The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.

I have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.

I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.

Here's what I tried so far

<form method="POST" action="xyz.php">
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>

The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.

• javascript
• jquery
• html
• forms
• jquery-events

Share Improve this question Follow asked Aug 6, 2018 at 11:58 Amarjit SinghAmarjit Singh 2,15411 gold badge2424 silver badges5454 bronze badges 1

• And what is with those users that have JavaScript disabled? That's a task for the server, not the client. – Andreas Commented Aug 6, 2018 at 12:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You May try the below code onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"

If you're using jQuery, then here's a fully-jQuery, unobtrusively handled version which would work.

If you were to give your form an ID, you could make it handle that form specifically - this example will handle all forms on your page.

$(function() {
  $("form").submit(function(event) {
    $(this).find('input[type="submit"]').prop("disabled", true);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
  <input type="text" name="fields[]" />
  <input type="text" name="fields[]" />
  <input type="text" name="fields[]" />
  <input type="text" name="fields[]" />
  <input type="submit" value="Submit" />
</form>

Note that you should use .prop() rather than .attr() to set properties such as "disabled" (see http://api.jquery./attr/).

本文标签： javascriptForm not submitting after disabling submit buttonStack Overflow