Javascript Checkbox

[s.arndt]

Just starting to create a javascript function. How do I get the state of a checkbox element in Javascript?

[mani2726]

Try to use Toolbox plugin.

[ihsanzainal84]

Just curious; what are you trying to do?

[s.arndt]

Want to check the yes/no state in checkbox. Just want to know how to code the line to check the state? I’m currently using Zeroqode’s Javascript plugin. Don’t know if that one or the Toolbox is better for passing individual/list of values back and forth. And if one is easier to work with.

[s.arndt]

Ok - I switched to using Toolbox. And I tried coding my Action Script to be

setTimeout(function(){bubble_fn_2(document_querySelector(’#PP CanvasToggle Uppercase Letters’);},1000);

But that doesn’t work. Anyone know how to get the value from the checkbox (element name is PP Canvas Toggle Uppercase Letters)?

[mani2726]

Hi @s.arndt ,
Refer below forum link,

Toolbox plugin - collection of utility elements

Announcing Toolbox, a plugin containing some element-based utilities. [image] [image] #List of Numbers Generate a list of numbers. Can be used to create a data source for a repeating group or dropdown. [image] #Javascript to Bubble Call a function from your custom javascript, to trigger a Bubble workflow event, and pass a value to be made available in Bubble. Properties: [image] Published value: [image] Sample HTML element: [image] Result: [image] #Expression Enter an expres…

[mishav]

I assume the checkbox is not a bubble element already?

@s.arndt

document_querySelector(’#PP CanvasToggle Uppercase Letters’)

Nearly there, try either of

document.querySelector('#idOfElement').checked  // returns true if checked
document.querySelector("input[name='nameOfElement']").checked // returns true if checked

You could also setup an event listener, to send the checked value to bubble when it changes.

[s.arndt]

no its bubble element. im just trying to understand how to code the javascript to get its value.

[mishav]

Then either of …

or using a parameter

[s.arndt]

Still not working…Here’s what I’ve tried

var checkedvalue = null;
var cb = document.getElementsByName(‘PP Checkbox Uppercase Letters’).checked;
console.log(cb);
if(cb) {
checkedvalue = cb.value;
}
console.log(checkedvalue);

var aa = document.getElementsByName(“PP Checkbox Uppercase Letters”).checked;
console.log(aa);

var cc = document.querySelector(‘PP Checkbox Uppercase Letters:checked’).value;
console.log(cc);

And what I get usually is Undefined or Null - even though the checkbox in Bubble is checked.

[mani2726]

@s.arndt

PP Checkbox Uppercase Letters

Please place this text in the element ID attribute like below,

I think, you are using the element name instead of element id attribute.

[s.arndt]

Ok…I set the id attribute as shown below…

And I put change the action item to be:

var cc = document.querySelector(‘#PPCHECKBOXUPPERCASELETTERS’).checked;
console.log(cc);

And I still get an Undefined message in the console when I run the workflow - even thought the checkbox is checked. Not sure what I’m doing wrong.

[Eugene_West]

I can review your code if you drop here a link to your editor.

[s.arndt]

Bubble Editor - Checkbox

Run in console mode to see the result being sent as a False value (Null) even though the checkbox is checked.

[Eugene_West]

Your app is private. You need to change in settings to make it visible.

[s.arndt]

Done…

[mani2726]

Hi @s.arndt ,

selected script was working fine,

for the html checbox code

[s.arndt]

So does mean I need to create my checkboxes in an HTML window instead of using the out-of-the box checkbox element?

[Eugene_West]

Yes. But it won’t be Bubble.io element

[Eugene_West]

You can check my code that works with Bubble.io. Seem like i made it work. Check it.