164

Due to a plugin being used, I can't add the "onClick" attribute to the HTML form inputs like usual. A plugin is handling the forms part in my site and it doesn't give an option to do this automatically.

Basically I have this input:

<input type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">

I want to add an onClick to it with jQuery onload for it to be like this:

<input onClick="myfunction()" type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">

How do I go about doing this?

I know this might not be standard practice but seems like the easiest option to do in my situation.

I'm a newbie to jQuery so any help is very much appreciated.

Claudio Delgado
  • 2,239
  • 7
  • 20
  • 27

7 Answers7

268

You can use the click event and call your function or move your logic into the handler:

$("#bfCaptchaEntry").click(function(){ myFunction(); });

You can use the click event and set your function as the handler:

$("#bfCaptchaEntry").click(myFunction);

.click()

Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

http://api.jquery.com/click/

You can use the on event bound to "click" and call your function or move your logic into the handler:

$("#bfCaptchaEntry").on("click", function(){ myFunction(); });

You can use the on event bound to "click" and set your function as the handler:

$("#bfCaptchaEntry").on("click", myFunction);

.on()

Attach an event handler function for one or more events to the selected elements.

http://api.jquery.com/on/

hunter
  • 62,308
  • 19
  • 113
  • 113
  • Simple and easy to understand. Exactly what I wanted. Another question: what's the easiest way to integrate a background color change using jQuery? or is it better to use 'style.backgroundColor = "white";' in the function section? – Claudio Delgado Sep 05 '12 at 15:02
68

try this approach if you know your object client name ( it is not important that it is Button or TextBox )

$('#ButtonName').removeAttr('onclick');
$('#ButtonName').attr('onClick', 'FunctionName(this);');

try this ones if you want add onClick event to a server object with JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
  • 11,967
  • 21
  • 108
  • 144
  • 1
    This one sets the function, without calling it at the same time. – Vassilis Apr 04 '18 at 21:09
  • Using the .attr onClick instead of .click also means you can directly assign a script command instead of calling a function, like `"history.go(0);"` or `"alert('Hi!');"`. – Jon May 03 '20 at 23:09
  • 3
    This is exactly what I needed, as I wanted to be able both define a separate function and be able to set the function without calling it. Thank you 4 years late. – kevin walker Jun 07 '20 at 19:53
  • 2
    What I love about this answer is that it doesn't call the function but only sets onclick – gdrt Jul 09 '20 at 16:00
23

Try below approach,

$('#bfCaptchaEntry').on('click', myfunction);

or in case jQuery is not an absolute necessaity then try below,

document.getElementById('bfCaptchaEntry').onclick = myfunction;

However the above method has few drawbacks as it set onclick as a property rather than being registered as handler...

Read more on this post https://stackoverflow.com/a/6348597/297641

Community
  • 1
  • 1
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • When you say 'However the above method', it is not clear if you are refering just the plain javascript method `.onclick`, or grouping both versions as one in comparison to using `.click`. I know its actually the former, as `.on` does register the handler, but had to check elsewhere to learn that. It would be good for future readers if it was more clear in your answer... ;) – AntonChanning Aug 03 '18 at 14:53
7
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
  • 12,581
  • 4
  • 48
  • 80
7

Or you can use an arrow function to define it:

$(document).ready(() => {
  $('#bfCaptchaEntry').click(()=>{
    
  });
});

For better browser support:

$(document).ready(function() {
  $('#bfCaptchaEntry').click(function (){
    
  });
});
Gabriel Jaime Sierra Rua
  • 324
  • 3
  • 6
  • 1
    I don't see how this provides anything new as the accepted answer already suggested the `.click()` method. Whether to use arrow functions or regular functions is, in my opinion, a discussion not related to the question asked. And for better browser support you should probably remove both arrow functions, not only the first one. – agrm Dec 05 '17 at 17:06
  • Because is another way to use jQuery – Gabriel Jaime Sierra Rua Dec 07 '17 at 21:34
3
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
  • 139
  • 6
1

as @Selvakumar Arumugam suggested, but the function call on registering also

$('#bfCaptchaEntry').on('click', myfunction);,

rather than use

$('#bfCaptchaEntry').on('click', () => { myfunction});

Faraz Ahmed
  • 1,467
  • 2
  • 18
  • 33