Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

how to access input element in a polymer web-component

I've managed to setup a simple registration form with Polymer:

<polymer-element name="app-registration">

    <template>
        <style>
            ...
        </style>
        <section>
            <paper-input class="username" .... ></paper-input>
            <paper-input class="password" .... ></paper-input>
            <paper-button label="Submit" on-tap="{{handleSubmit}}"></paper-button>
        </section>
    </template>

    <script>
        Polymer({
            handleSubmit: function (event, detail, sender) {
                alert(this.querySelector('.username').value);
            }
        });
    </script>

</polymer-element>

It works fine, however, within the handleSubmit callback I'm not able to query the values from the other input fields. Whatever I query paper-input or by classname I receive null. Any suggestion how to do this ?

Upvotes: 0

Views: 945

Answers (2)

Jan Gunzenhauser
Jan Gunzenhauser

Reputation: 73

Not sure if it was already available in 0.5, but in 1.0 you can do

this.$$(selector)

your example:

this.$$('.username').value

-> same but shorter, and works on dynamically created nodes

https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#work-with-local-dom

Upvotes: 0

ebidel
ebidel

Reputation: 24109

Those elements are in your shadow dom, so you need this.shadowRoot. this.querySelector() will give you light dom nodes.

this.shadowRoot.querySelector('.username').value

Better yet, would be to add an id:

<section id="container">
  <paper-input class="username" .... ></paper-input>
  ...
</section>

and use node finding: this.$.container.querySelector('.username').value.

Upvotes: 3

Related Questions