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 · Accepted Answer · 2013-02-23 22:50:53Z

4

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>

edited Feb 23, 2013 at 22:50

answered Feb 23, 2013 at 21:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2016-04-01 11:52:21Z

2

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

edited Apr 1, 2016 at 11:52

CommunityBot

11 silver badge

answered Feb 23, 2013 at 21:40

martriay

5,7423 gold badges32 silver badges39 bronze badges

1 Comment

doppelgreener Over a year ago

prop() should be used here instead of attr(). See: prop vs attr. For changing state, prop is appropriate.

BenM · Accepted Answer · 2013-02-23 21:40:39Z

1

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);
});

answered Feb 23, 2013 at 21:40

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:27:45Z

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.

Olaf Dietsche · Accepted Answer · 2015-02-06 08:21:18Z

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 6, 2015 at 8:21

answered Feb 23, 2013 at 21:40

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

1 Comment

doppelgreener Over a year ago

prop() should be used here instead of attr(). See: prop vs attr. For changing state, prop is appropriate.

Matt · Accepted Answer · 2015-10-29 18:52:20Z

0

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

answered Oct 29, 2015 at 18:52

Matt

35.6k30 gold badges94 silver badges107 bronze badges

1 Comment

Drenmi Over a year ago

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.

Parv Sharma · Accepted Answer · 2013-02-23 21:39:24Z

-1

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

answered Feb 23, 2013 at 21:39

Parv Sharma

12.7k5 gold badges52 silver badges83 bronze badges

1 Comment

BenM Over a year ago

Element IDs cannot begin with a number ;)

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related