You are viewing limited content. For full access, please sign in.

Discussion

Discussion

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

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
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.

Sign in to reply to this post.