Discussion

Javascript help. Not sure why this code doesn't log "hello world" in forms

Forms

Updated June 27, 2018

posted on June 27, 2018 • Show version history

Can't see what is wrong with this code. None of this code logs to the console, only with radio type input fields. How to run code on a radio button click is a commonly discussed javascript question on Google, why don't ANY of the approaches recommended work?

$('.myRadio input').on('click', function() {

console.log('hello world');

});

$('input[type=radio]').on('click', function() {

console.log('hello world');

});

$('.myRadio').on('click', function() {

console.log('hello world');

});

$('.myRadio input').click( function() {

console.log('hello world');

});

$('input[type=radio]').click(function() {

console.log('hello world');

});

I am wondering if it has something to do with this disabled tag that forms adds to radio buttons inside of a table. Only thing I can see. It does seem to work with radio buttons outside of a table.

0 0

Comments 6
Follow-Ups 0

replied on June 27, 2018 • Show version history

Regarding the disabled status in the code:

If you ever wonder if an element will behave differently without the disabled status, double click on the the text (disabled="disabled") and delete it. That will just remove it from the element until you refresh again. Comes in handy when trying to find a needle in a haystack.

Caveat: deleting code works in Chrome Canary and Firefox Developer Edition. I can't attest to any other browser.

1 0

replied on June 27, 2018

Oh, that's a cool trick. Thanks!

0 0

replied on June 27, 2018 • Show version history

Hi Chad,

For me, your events do fire in the console, and $('input[type=radio]').click and onclick fire on buttons in and outside of a table. However, in order to make the code fire on all rows other than the 1st row of a table, you will need to take into account the fact that the radio button does not exist when the document is ready.

For example:

$(document).ready(function() {
 $('input[type=radio]').click(function() { 
 console.log('hello world');
 });

$('.cf-table-add-row').click(function() {
  $('input[type=radio]').click(function() {
  console.log('hello world');
  });
});
});

It is also worth noting that since the radio buttons are inputs, it may make more sense to use change events rather than clicks - but this depends on your use case. I assume also that this will eventually grow into code that conditionally triggers behavior based on radio button selection - switch statements can be useful in that case.

2 0

replied on June 27, 2018

Oh man that explains everything. I was baffled because even the first row didn't work, but I had a lookup populating the entire table.

Does this mean I should use

 $(document).on("lookupcomplete", function (event) {

Instead of

$(document).ready( function() {

Oddly I just found that this works regardless even though it also explicitly references the .details objects which do not exist yet.

  $('li.displayTable').on('change', '.details input', function() {

where .displayTable is my table class. This exists, but the class referenced after change doesn't.

0 0

replied on June 27, 2018

I have not tested your suggestion but it sounds like you're on the right track. Let us know how it works out!

0 0

replied on June 27, 2018

Its working out great now.

I needed a way for the user to select a single row and radio buttons are the most intuitive feature for that, but my code to make all radio buttons across all rows act as a single object runs optimally when a radio button is changed, and not other fields within the table.

Thanks again!

0 0

You are not allowed to follow up in this post.

Discussion

Discussion

Javascript help. Not sure why this code doesn't log "hello world" in forms

Comments 6

Follow-Ups 0

Sign in to reply to this post.