How do you disable a button using an onclick javascript function?

Question

I need to remove button click event after press. How can I edit the function so whenever it's clicked, it gets disabled then runs the url, or vise-versa.

<form id="edit" action="" method="post">
    <input type="submit" name="button" onclick="this.value='test...'; MyFunction();" id="1" class="button blue" value="Submit">
</form>
<script>
    function MyFunction() {
        var url = "editing.php";
        document.getElementById("edit").setAttribute('action', url);
        return false;
    }
    $(".blue").click(function(){
        $(".blue").removeClass("disabled");
        $(this).addClass("disabled");
    });
</script>

adeneo · Answer 1 · 2013-02-23T22:50:53.500

Remove the onclick, and do it the proper way :

<form id="edit" action="" method="post">
  <input type="submit" name="button" id="a1" class="button blue" value="Submit">
</form>
<script type="text/javascript">
$(function() {
    $('#a1').on('click', function() {
        $(this).val('test...').prop('disabled', true);
        $("#edit").attr('action', 'editing.php');
        return false;
    });
});
</script>

score 2 · Answer 2 · edited Apr 01 '16 at 11:52

2

$(".blue").click(function(){
  $(this).attr('disabled', true);
});

edited Apr 01 '16 at 11:52

Community

1
1

answered Feb 23 '13 at 21:40

martriay

5,632
3
29
39

`prop()` should be used here instead of `attr()`. See: [prop vs attr](http://stackoverflow.com/q/5874652/254830). For changing state, prop is appropriate. – doppelgreener Feb 06 '15 at 00:45

Olaf Dietsche · Answer 3 · 2015-02-06T08:21:18.630

1

Just set the disabled attribute

$('.blue').attr('disabled', 'disabled');

JSFiddle

As @doppelgreener pointed out, prop is equally valid here

$('.blue').prop('disabled', true);

JSFiddle

edited Feb 06 '15 at 08:21

answered Feb 23 '13 at 21:40

Olaf Dietsche

72,253
8
102
198

`prop()` should be used here instead of `attr()`. See: [prop vs attr](http://stackoverflow.com/q/5874652/254830). For changing state, prop is appropriate. – doppelgreener Feb 06 '15 at 00:46

score 1 · Answer 4 · answered Feb 23 '13 at 21:40

You can do this easily through jQuery using the attr() function:

$('.blue').click(function() {  
    $(this).attr('disabled', 'disabled');
});

By the way, I noticed that you're using jQuery. Why not 'jQuery-ify' your whole code:

function MyFunction() {
    var url = "editing.php";
    $("#edit").attr('action', url);
    return false;
}

$(".blue").click(function(){
    $(this).addClass("disabled").attr('disabled', true);
});

score 1 · Answer 5 · edited May 23 '17 at 10:27

To make the .blue button clickable only once. The .one() method of jQuery is just the thing for you. Here is the documentation.

$("#edit > .blue").one("click", function() {
    //Code here will only run once.
});

"How can I edit the function so whenever it's clicked, it gets disabled then runs the url, or vise-versa."

I think you want the form to be submitted only once here; so:

<form id="edit" action="" method="post">
    <input type="submit" name="button" class="button blue" value="Submit" />
</form>

<script>
    //To make the form SUBMITTABLE ONLY ONCE:
    $("#edit").one("submit", function() { 
        $(".blue").prop("disabled", true); //you can still set the button disabled if you like
        $('#edit').attr('action', "editing.php"); //setting the action attribute here
    });
</script>

I don't know what your DOCTYPE is but if it's HTML4; you cannot have numeric ID for an HTML element. HTML5 seems to allow that. See this post.

Demo Fiddle here.

score 0 · Answer 6 · answered Oct 29 '15 at 18:52

0

<input type="submit" name="button" onclick="$(this).attr('disabled', 'disabled')"/>

answered Oct 29 '15 at 18:52

Matt

33,328
25
83
97

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – Drenmi Oct 30 '15 at 05:29

score -1 · Answer 7 · answered Feb 23 '13 at 21:39

-1

document.getElementById('1').setAttribute('disabled', 'disabled');

answered Feb 23 '13 at 21:39

Parv Sharma

12,581
4
48
80

Element IDs cannot begin with a number ;) – BenM Feb 24 '13 at 09:47

How do you disable a button using an onclick javascript function?

7 Answers7