# Help with some Javascript and raido button change event

**URL:** <https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609>\
**Category:** Ask Developers\
**Created:** [January 26, 2024, 4:13pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609 "2024-01-26T16:13:11Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mikeacce](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Mikeacce](https://forums.knack.com/u/Mikeacce)\
**Post date:** [January 26, 2024, 4:13pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/1 "2024-01-26T16:13:11Z")

</div>

I am looking to get a little help with my javascript.

I have the following code which is working for one of my pages. This code uses a webhook to get data from another knack database based on a selected item within a radio button.

The issue I am having is that I don’t seem to be able to get the code to trigger when I modify a radio button. I am not sure why this works with the other form but not with this one.

Any assistance would be appreciated.

P.S… I confirm that the webhook itself does work.

* * *

$(document).on(‘knack-view-render.view\_1639’, function(event, view, data) {

```
let chosenVal = $("#view_1639-field_820 option:selected" ).text()

$('#view_1639-field_820 ').live('change', function () { 
		// the value of the selected text
		
		//create webhook parameter string
		var paramstring = 'selectedText=' + chosenVal; + 'retVal=Nothing'
		
  		commandURL = "https://hook.us1.make.com/fumap1jl1a0jgbvp2ypqw58b6pn8tmex/?" + paramstring
 
 //Send webhook
  $.get(commandURL, function(data, status){
 	
	var retVal = data

	//Remove all the html <br> values and add true carage returns
	let retValUpdated = retVal.replace(/(<br \/>)/g, '\n');
	document.getElementById('field_820').value = retValUpdated
	});
});

```

});

* * *

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 26, 2024, 4:45pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/2 "2024-01-26T16:45:37Z")

</div>

Hi @Mikeacce

Your selector is for dropdown menus. For radio buttons you’ll need:

```auto
$(document).on(‘knack-view-render.view_1639’, function(event, view, data) {

$('#kn-input-field_820 input[type=radio]').live('change', function () { 
		// the value of the selected text
		const chosenVal = $(':checked', $(this)).val()

		//create webhook parameter string
		const paramstring = 'selectedText=' + chosenVal; + 'retVal=Nothing'
		
  		const commandURL = "https://hook.us1.make.com/fumap1jl1a0jgbvp2ypqw58b6pn8tmex/?" + paramstring
 
 //Send webhook
  $.get(commandURL, function(data, status){
 	
	const retVal = data

	//Remove all the html <br> values and add true carage returns
	const retValUpdated = retVal.replace(/(<br \/>)/g, '\n');
	document.getElementById('field_820').value = retValUpdated
	});
});

```

Hope this helps.

Craig

Edit: replace all let and var with const. Unless this isn’t the entire code.

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 26, 2024, 5:01pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/3 "2024-01-26T17:01:11Z")

</div>

Hi @Mikeacce

Just FYI the .live event handler has been deprecated. You can now use

```auto
$().on('change')

```

[https://api.jquery.com/live/](https://api.jquery.com/live/)

Craig

---

<div class="post-metadata">

**Author:** ![Mikeacce](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Mikeacce](https://forums.knack.com/u/Mikeacce)\
**Post date:** [January 26, 2024, 11:26pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/4 "2024-01-26T23:26:43Z")

</div>

Hi Craig,

Thanks for this… it worked.

However I have a follow-up question. (please excuse my js newbiness!!)

When I use this code.

`let chosenVal = $(‘:checked’, $(this)).val()```

``

`I believe it sets chosenVal as an object. I must pass the text label associated with the selected item. How can I get that from chosenVal? ```

``

`When I did a type of verification it told me the type was undefined.```

``

`Any help would be appreciated. ```

``

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 27, 2024, 7:58am UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/5 "2024-01-27T07:58:22Z")

</div>

The `$(‘:checked’, $(this)).val()` will return a string, which is the value of the checked radio button which will be this in the html:

![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/a/a7bcbbbc63f5c3d6a4f6f73460e541d69a71968a.png)

In Knack the value always matches the label text of a radio button unless you happen to have changed it in JS.

`$(‘:checked’, $(this))` is the JQuery object.

Craig

---

<div class="post-metadata">

**Author:** ![Mikeacce](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Mikeacce](https://forums.knack.com/u/Mikeacce)\
**Post date:** [January 27, 2024, 1:58pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/6 "2024-01-27T13:58:58Z")

</div>

Once again,

Thanks for all your help.

So, when I verify my value I don’t get a text value I get a numeric value.

![](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/9/90ce3cfbe37f44f301f7192860b15daf13da182c.png)

I believe that this is due to the Radio button on that page coming from another table. It is not part of this main page but a connected field from another table. Does this make a difference?

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 27, 2024, 2:14pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/7 "2024-01-27T14:14:41Z")

</div>

Ah I see it’s a connection I didn’t realise.

You can get the label of the radio button with this selector:

```auto
const chosenVal = $(‘:checked’, $(this)).closest('label').text().trim()

```

Sorry about that

Craig

---

<div class="post-metadata">

**Author:** ![Mikeacce](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Mikeacce](https://forums.knack.com/u/Mikeacce)\
**Post date:** [January 27, 2024, 3:48pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/8 "2024-01-27T15:48:11Z")

</div>

Hi Craig,

I added that code and still it is not working. Here is what I have. Maybe I am making a mistake somewhere.

$(‘#kn-input-field\_820 input[type=radio]’).on(‘change’, function (){  
//$(‘#view\_1639-field\_820’).live(‘change’, function () {  
// the value of the seleced text

```
                    const chosenVal = $(':checked', $(this)).closest('label').text().trim
		//let chosenVal = $(':checked', $(this)); (previous code commented out)

		// output value to console for verification
                    console.log('the selected value is ' + chosenVal);
		
		...

```

The output log is blank… Am I missing something?

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 27, 2024, 4:00pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/9 "2024-01-27T16:00:05Z")

</div>

Hi Mike

It looks like the brackets after the trim are missing or this a copy paste issue and you have them in your code?

Craig

---

<div class="post-metadata">

**Author:** ![Mikeacce](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Mikeacce](https://forums.knack.com/u/Mikeacce)\
**Post date:** [January 27, 2024, 5:06pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/10 "2024-01-27T17:06:12Z")

</div>

here is the whole script

$(‘#kn-input-field\_820 input[type=radio]’).on(‘change’, function (){  
//$(‘#view\_1639-field\_820’).live(‘change’, function () {  
// the value of the seleced text

```
                    const chosenVal = $(':checked', $(this)).closest('label').text()
		//let chosenVal = $(':checked', $(this)); // Old version

		console.log('the selected value is ' + chosenVal);
		
		console.log ("value cahnged")
	
		if (chosenVal != "") {
			console.log("Chsenval not null");
			
			//create webhook parameter string
			var paramstring = 'selectedText=' + chosenVal; + 'retVal=Nothing';
			console.log (paramstring);
 
 			commandURL = "https://hook.us1.make.com/fumap1jl1a0jgbvp2ypqw58b6pn8tmex/?" + paramstring
 
		 //Send webhook
 		 $.get(commandURL, function(data, status){
 			console.log ('retune from webhook', data)
			var retVal = data

			//Remove all the html <br> values and add true carage returns
			let retValUpdated = retVal.replace(/(<br \/>)/g, '\n');
			document.getElementById('field_839').value = retValUpdated
			});
		};

});

```

});

---

<div class="post-metadata">

**Author:** ![Mikeacce](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Mikeacce](https://forums.knack.com/u/Mikeacce)\
**Post date:** [January 27, 2024, 5:37pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/11 "2024-01-27T17:37:32Z")

</div>

I got it working but I had to use this line of code  
let chosenVal =$(‘#kn-input-field\_820 input[type=radio]:checked’ ).closest(‘label’).text().trim();

vs  
const chosenVal = $(‘:checked’, $(this)).closest(‘label’).text().trim()

not sure what the difference is and why the top one worked.

thank you for all your help on this.

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 27, 2024, 7:55pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/12 "2024-01-27T19:55:19Z")

</div>

Hi Mike

No worries glad you got it working. I’ll look into why it didn’t work if I find out I’ll post it here.

Craig

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [January 28, 2024, 2:45pm UTC](https://forums.knack.com/t/help-with-some-javascript-and-raido-button-change-event/15609/13 "2024-01-28T14:45:43Z")

</div>

Hi Mike

It appears I was overcomplicating it by getting the checked label text. As they are radio buttons only one is ever checked so the following code should work:

```auto
$('#kn-input-field_6675 input[type=radio]').on('change', function (){
       // the value of the seleced text
       const chosenVal = $(this).parent().text().trim();
       //let chosenVal = $(':checked', $(this)); // Old version
    
       console.log('the selected value is ' + chosenVal);
            
       console.log ("value changed")
        
       if (chosenVal != "") {
           console.log("Chosenval not null");
                
           //create webhook parameter string
           const paramstring = 'selectedText=' + chosenVal; + 'retVal=Nothing';
           console.log (paramstring);
        
           const commandURL = "https://hook.us1.make.com/fumap1jl1a0jgbvp2ypqw58b6pn8tmex/?" + paramstring
        
           //Send webhook
           $.get(commandURL, function(data, status){
                console.log ('retune from webhook', data)
                const retVal = data
    
                //Remove all the html <br> values and add true carage returns
                const retValUpdated = retVal.replace(/(<br \/>)/g, '\n');
                document.getElementById('field_839').value = retValUpdated
           });
     };            
});

```