Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide submit button after click

Tags:

php

wordpress

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>';
like image 898
mattesj Avatar asked Oct 21 '15 10:10

mattesj


People also ask

How do you disable the button after click it in JavaScript?

To disable a button in JavaScript, we get its reference and then set its disable property to true .

How do you hide a button after it is clicked in angular?

How do you hide a button after it is clicked in angular? First set up a Boolean variable for the show hide like public show:boolean = false. Next, set up a function that is tied to the click event of a button or some event on the dom.


3 Answers

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>';
like image 27
Mark E. Avatar answered Oct 13 '22 01:10

Mark E.


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

$(document).ready(function() {
    $('#send').on('click', function() {
        $(this).hide();
    });
});
like image 152
Nexxuz Avatar answered Oct 13 '22 00:10

Nexxuz


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();
    });
});
like image 38
Chris Avatar answered Oct 13 '22 00:10

Chris