Hide submit button after click

Question

I know there is a lot of answers on how to hide a submit button after click but I cant get any of the solutions to work. I have tried to hide it with onclick="" and javascript. The form is for a wordpress plugin.

echo '<p><input type="submit" name="submitted" id="send" value="Send"></p>';

Answer 1

You can do this by adding onclick="this.style.display='none';" as shown in the provided code snippet.

echo '<p><input type="submit" name="submitted" id="send" value="Send" onclick="this.style.display='none';"></p>';

Answer 2

If you have jQuery available, you could do something as simple as:

$(document).ready(function() {
    $('#send').on('click', function() {
        $(this).hide();
    });
});

Answer 3

I would do what @Nexxuz suggested, but to add, if you are hiding the button for the purpose of preventing duplicate submissions, you should probably tie the hiding of the button to the submit event on the form, as this catches the click of the submit button, as well as the user hitting "enter"

$(document).ready(function($) {
    $('#myForm').on('submit', function(evt) {
        $('#send').hide();
    });
});