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:
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
});
};
});
1 Like