HTML Form Submit disable and change text on click

Question

Whats the best way to disable a HTML Form Submit button when it is clicked and also change the text value on it?

Answer 1

Someone recommended a Javascript onclick event, but I would instead recommend using onsubmit. This will be on the form itself rather than the button, and this encompasses the real event that you want to disable the button with (submission), as well as other events that could possibly trigger submit.

document.getElementById('FormId').addEventListener('submit',function(){
    var button = document.getElementById('buttonId');
    button.innerText = 'Something new!';
    button.disabled = true;
});

Edited my answer to include the extra changes you were looking for (text of button, disabled as well).

Edit again: lets be super cross browser!

var form = document.getElementById('FormId');

function submitForm(){
    var button = document.getElementById('ButtonId');
    button.innerText = 'Something new!';
    button.disabled = true;
}

if(form.addEventListener){
    form.addEventListener('submit',submitForm,false);
} else {
    form.attachEvent('onsubmit',submitForm);
}

This covers versions of IE prior to IE9. Obviously if you have more than one form you would try to make this a little more reusable, but this is the general gist.

Answer 2

The best way to achieve this is via JQuery.

Let say your form submit button has an id="submitButton". So add this script to you page head and refer the place where you put your downloaded JQuery and JQuery-UI script.

<script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>

<script>
    function submitButton_OnClick() {
        $("#submitButton").text("New Text");
        $("#submitButton").attr("disabled", "disabled");
     }

    $(document).ready(function() {
        $("#submitButton").click(submitButton_OnClick);
    });

</script>

and this to your html

<button id="submitButton">test</button>

Check it work!

Answer 3

You can add an onclick event and implement a javascript function to do what you want. You can have a look here to see how to disable a button from javascript. Also take a look here for an example how to change the text of the button using javascript.

Answer 4

You have to use JavaScript and set on click event for example it should be:

HTML:

input type="button" value="value" id="1" onClick="OnClick(this.id)"/>

JavaScript:

function OnClick(id)
{
    //some stuff...
}

Also you can use jQuery and catch on submit, for example:

$("form").on('submit',function(event)
{
    event.preventDefault();
    //some stuff...
}

Answer 5

You can use to onclick attribute to set the disabled attribute. Note that I don't cover how to reenable the button when form submission is complete.

<button type="submit" onclick="this.setAttribute('disabled', 'disabled');">Submit</button>

See the live example here at this fiddle:

http://jsfiddle.net/yinkadet/DPJGw/

I hope this helps

Answer 6

Here is my example of providing this functionality using Ruby on Rails and jQuery - it is an implementation example of the jQuery answer which i found very useful! (so there, haters):

<div class="col s12">
    <div class="actions">
        <%= f.submit nil, class: "waves-effect waves-light btn green darken-3", id: "gsb" %>
        <script>
            function submitButton_OnClick() {
                $("#gsb").val("***CREATING***");
                $("#gsb").attr("disabled", "disabled");
                $("#new_group").submit();
             }

            $(document).ready(function() {
                $("#gsb").click(submitButton_OnClick);
            });
        </script>
    </div>
</div>