jQuery/JavaScript - get clicked button itself in a function

Question

I need a way to get the element pressed in a function called by that element, and disable it.

I tried using $(this), but is not working, this is my code:

<script>
function x(){
    $(this).prop("disabled",true);
}
<script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

    function x(){
        $(this).prop("disabled",true);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

I want to avoid add and call an id, is there any way to do it?

Thank you!

-- edit --

I can not edit the input elements, they are in another file.
the JS code is called before the html file, and I can not edit the html file.

Just so you know, you can avoid inline event handlers altogether. — Mike Cluck
– Mike Cluck, Commented Jun 21, 2016 at 21:42

DinoMyte · Accepted Answer · 2016-06-21 22:13:36Z

8

Solution 1 :

You can simply attach a click event handler which targets the input of type button and then use this to target the element from where the event was invoked.

<script>
$(document).ready(function(){
$("input:button").click(function()
{
  $(this).prop("disabled",true);
});
});
</script>
<input type='button' value='Disable me' />
<input type='button' value='Disable me' />

Example : https://jsfiddle.net/DinoMyte/jmLynLsg/1/

Solution 2 :

You can pass this keyword from your javascript function that would acts as a pointer to the element.

 <script>
function x(obj){
        $(obj).prop("disabled",true);
    }
</script>
<input type='button' onclick='x(this)' value='Disable me' />
<input type='button' onclick='x(this)' value='Disable me' />

Example : https://jsfiddle.net/DinoMyte/jmLynLsg/2/

edited Jun 21, 2016 at 22:13

answered Jun 21, 2016 at 21:39

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

2 Comments

stramin Over a year ago

Thank you, it works, but sadly the JS code is called before the html file, and I can not edit it.

DinoMyte Over a year ago

You can wrap the js code around $(document).ready. Updated solution.

Hector Barbossa · Accepted Answer · 2016-06-21 21:41:41Z

2

Its better to remove the onclick from html and do the binding inside jQuery like

$(document).ready(function(){
    $('input[type="button"]').on('click', function(){
         $(this).prop('disabled', true);
  });
});

Check out this working fiddle.

answered Jun 21, 2016 at 21:41

Hector Barbossa

5,53813 gold badges51 silver badges70 bronze badges

Comments

Sk. Tajbir · Accepted Answer · 2016-06-21 21:35:53Z

1

Try this:

function x(elem){
    $(elem).prop("disabled",true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x(this)' value='Disable me' />
<input type='button' onclick='x(this)' value='Disable me' />

answered Jun 21, 2016 at 21:35

Sk. Tajbir

2902 silver badges9 bronze badges

1 Comment

stramin Over a year ago

Thank you, it's works, but sadly, I can not edit the input elements, they are in another file.

westandy · Accepted Answer · 2016-06-21 21:45:58Z

1

You can get the element with jQuery in a few ways. In the case of your input tag, you can just say $('input'), but this will get all input elements. If you give it an id, like <input id="test" ...>, then $('#test') would work. Otherwise, $('input').prop('disabled',true); worked for me in Chrome.

Here's my full code:

<html>
<head>
</head>
<body>

    <input id="test" type='button' onclick='disable()' value='Disable me' />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    function disable() {
        $('#test').prop('disabled',true);
    }
    </script>
</body>
</html>

answered Jun 21, 2016 at 21:45

westandy

1,5013 gold badges19 silver badges42 bronze badges

Comments

David Thomas · Accepted Answer · 2016-06-21 22:46:46Z

The one approach I can think of that doesn't require changing the HTML you're working with, but does involve changing the DOM you receive, is:

function x() {
  $(this).prop('disabled', true);
}

// selecting, and iterating over, all <input> elements with
// an in-line 'onclick' event-handler attribute:
$('input[onclick]').each(function() {

  // retrieving the contents of the 'onclick' attribute:
  var onClickFunction = $(this).attr('onclick');

  // setting the onClickFunction variable to the
  // substring of the existing value from the first
  // character to the index of the first '('
  // character, so from 'x()' to 'x' or from
  // 'function1();function2()' to 'function1'
  // (this could be worked-around, but this is
  // a simple proof-of-concept):
  onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));

  // if there is a function, or a variable, held as a
  // property of the window object, then:
  if (window[onClickFunction]) {
    // we remove the 'onclick' attribute, and use the
    // on() method to add the event-handler back:
    $(this).removeAttr('onclick').on('click', window[onClickFunction]);
  }
});

function x() {
  $(this).prop('disabled', true);
}

$('input[onclick]').each(function() {
  var onClickFunction = $(this).attr('onclick');
  onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
  if (window[onClickFunction]) {
    $(this).removeAttr('onclick').on('click', window[onClickFunction]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

It's worth noting that, while the above is quite possible with jQuery, it's similarly possible with plain JavaScript:

function x() {
  this.disabled = true;
}

// excuse the absurdly-long variable-names; they were meant to be
// descriptive.
// here we retrieve all <input> elements with an onclick attribute:    
var inputsWithOnClick = document.querySelectorAll('input[onclick]'),

  // here we use Array.from() to turn that collection into an Array:
  arrayOfOnClickInputs = Array.from(inputsWithOnClick);

// iterating over the Array, 'input' (the first argument)
// refers to the current element of the array over which
// we're iterating:
arrayOfOnClickInputs.forEach(function(input) {

  // retrieving the contents of the 'onclick' attribute:
  var onClickFunction = input.getAttribute('onclick');

  // updating that variable to contain the substring of
  // of the attribute-value, from the first character to
  // the first occurrence of of the '(' character:
  onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));

  // as above:
  if (window[onClickFunction]) {

    // removing the 'onclick' attribute:
    input.removeAttribute('onclick');

    // using EventTarget.addEventListener to bind the
    // function to the click-event on the <input> element:
    input.addEventListener('click', window[onClickFunction]);
  }
});

function x() {
  this.disabled = true;
}

var inputsWithOnClick = document.querySelectorAll('input[onclick]'),
  arrayOfOnClickInputs = Array.from(inputsWithOnClick);

arrayOfOnClickInputs.forEach(function(input) {
  var onClickFunction = input.getAttribute('onclick');
  onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));

  if (window[onClickFunction]) {
    input.removeAttribute('onclick');
    input.addEventListener('click', window[onClickFunction]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

The reason for these approaches is simply that, in this case, the attribute is known (onclick), and you wanted to use this within the function, which jQuery manages for you, and which addEventListener() also does automagically.

And I honestly couldn't think of an alternative approach to supply the this to where you needed it to be.

References:

CSS:
- Attribute-selectors ([attribute]).
JavaScript:
jQuery:
- attr().
- each().
- on().
- prop().
- removeAttr().

Collectives™ on Stack Overflow

jQuery/JavaScript - get clicked button itself in a function

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related