I am using Wix website editor to create a CustomElement that has an Input element within it. I have nearly everything working - except, I cannot figure out how to get the Input element’s value from the page code. I can set the value easily using .setAttribute(). But…there is no .getAttribute() - so how can I get the value from the CustomElement?
I’ve defined getter and setter for the “value” property - and they work fine from “within” the CustomElement.
But I cannot call the getter from the page code…the error is “Property ‘value’ does not exist on type ‘CustomElement’.”
I’ve read through all of the examples Wix has provided - dropdown, helloworld, chart, etc. nothing is leading me down the right path. This should be so simple - I just want to get the value of a text box in my CustomElement.
Hi, @user1981
See Velo Reference > CustomElement > on( )
In your page code you can listen to events dispatched by the Custom Element with the .on() function. And in the Custom Element. your dispatched event will carry a detail property (object) which you can use to send your data to the Page code.
Thanks for the quick feedback. If my Custom Element had buttons that would trigger events, I can imagine how that would work. In this case, I only have an Input element - there are no events in the Custom Element to trigger.
In the page code, when the form is submitted, I need to grab the value of the Input element from the Custom Element. I can’t imagine how the ‘on’ event would be wired up to work in this case.
Ok. First thing - we are talking about 2 different events here:
- We have oninput and onchange which are fired by the <input> element.
- CustomEvent which can be fired by the Custom Element and cought by a listener on() in the Page code.
In my response I was talking about the CustomEvent.
By what you described I imagine you have a form page and inside a Custom Element there is a <input> (part of the form data) and the button (submit) is in not in the Custom Element.
In such case:
In the Page code prepare to receive a response from the Custom Element which will come wrapped in a event:
$w('#customElement').on('responsedataevent', (event) => {
console.log('Here is your data:', event.detail);
});
Still in the Page code, when your submit button is clicked use an attribute to ask Custom Element for data:
$w("#myButton").onClick( (event)=>{
$w('#customElement').setAttribute('sendMeData', 'please');
});
In your Custom Element register which attribute must be watched for changes:
static get observedAttributes() {
return ['sendMeData', 'anotherattribute','andother'];
}
And what to do when the value of any watched attribute changes. In this case we dispatch an event which carries the input data:
attributeChangedCallback( attributeName, oldValue, newValue) {
if ( attributeName == 'sendMeData' ) {
let data = 'my input field';
this.dispatchEvent(new CustomEvent('responsedataevent', { detail: data }));
}
}
2 Likes
Thank you so much for your thorough reply. Your code samples are super helpful and exactly what I needed to overcome this challenge. THANK YOU!
1 Like