Add click event to a form's children (in this case, checkboxes)

Ask the community
,
1

I have a form (powrFormBuilder) and I want to add a click event on its radio buttons so that I can scrollto somewhere and also change some styling when its clicked.

There is no “onclick” event on the form, and it is impossible to select its children.

Using the developer console (chrome) on my published site I can easily do :

$(“label.radioOption”).on(“click”, function(){ console.log(“ASDASDASDSAD”)})

($ is accessible by default on the published site but not on the editor")

Using Corvid, how can I select the form’s children and add an onclick event?

2

If you use a ready-to-use form, you’ll be limited. Create a custom from of your own, and you’ll be able to do whatever you want.

3

Are you using an Wix App from Powr
https://www.wix.com/app-market/search?query=powr
Or are you simply embedding the html code on your page as like here.
https://www.powr.io/plugins/form-builder

f you are using a Wix App made by Powr then you can’t edit it yourself if the app settings won’t let you have that choice or option etc.

As for the html version, for that to happen then you will need to alter your html code that is used so that the page and the html iframe can communicate with each other.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://support.wix.com/en/article/corvid-working-with-the-html-element

Although I am sure that Powr would not want you altering their own branded designed forms, hence why you can only do it yourself through the screen display in the developer console and you won’t be able to save any changes as you haven’t got access to the DOM.

Why not just avoid all of that hassle and simply make your own user input form through Wix Corvid?

4

Thanks for the quick replies, I believe it is the ready-to-use form so I suppose I’ll have to look into building a custom form but still, is there really no way for me to select the checkbox elements using Corvid and append a click function?

Also, why is the Click event on my form’s frame properties unaccessible?

Is there a way for me to write real Javascript inside Wix without using this ultra limited Corvid thing?

5

It seems that you’ll have to create a form of yourself.
Anyway you should use onChange() and not onClick() (since onClick() fires before the value changes).

6

Not everything in the Wix Editor will have all the event handlers listed in their properties panel, especially not the Powr Wix App which you have no connectivity with through code apart from with onMouse and onViewport.

As for not having to use the properties panel, well no you don’t have to use it if you write the event into your code itself in either the page tab or the site tab.

Also, here is the Wix API reference if you want to look through it.
https://www.wix.com/corvid/reference/

7

Ok so if I use a radioGroup, I can:

$w.onReady( function () {
$w(“#radioGroup1”).onChange( (event, $w) => {
console.log(event)
})
} );

8

Yes, but you don’t need the $w in the parentheses. Only “event”.

9

Exactly, it will tell you that it has been depreciated many times in the reference guide.

$w
Deprecated:
A selector function. The $w function was used to enable event handlers to work with elements in repeaters . Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

Or

Deprecation note:
The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

Would be good if Wix took out any code that is now not needed or used etc in any guides or tutorials etc.

Have a read here if you are wanting more info on it all
https://www.wix.com/corvid/forum/corvid-tips-and-updates/removal-of-the-w-parameter-from-event-handlers