CustomElement with Input - How to get value from Input element?

Ask the community
,
1

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.

2

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.

3

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.

4

Ok. First thing - we are talking about 2 different events here:

  1. We have oninput and onchange which are fired by the <input> element.
  2. 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
5

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