Help with some Javascript and raido button change event

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
	});
});

});


Hi @Mikeacce

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

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

Hi @Mikeacce

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

$().on('change')

https://api.jquery.com/live/

Craig

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

``

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

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

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.

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?

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

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

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

Sorry about that

Craig

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?

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

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
			});
		};

});

});

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.

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

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:

$('#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
           });
     };            
});