Try var username = this.$.loginInput'.value;
https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
document.getElementById('#loginInput') will look for a node in the main
page...but your node is in the element's shadow dom :)
On Wed, Nov 12, 2014 at 2:27 AM, <[email protected]> wrote:
> Hi,
>
> I started Polymer 2 days ago and I am trying to complete a "login form".
> So I did the login form in a web element and I am trying to get the value
> from the input to launch an AJAX request.
>
> First of all, I am not sure that I am doing good with my web element and I
> really don't understand how to get the values, I tried to getElementById
> and also deal with "{{stuff}}" but I don't find any ways... So I am sure
> that I am really doing wrong :/
>
> login.html :
> <link rel="import" href="../components/paper-input/paper-input.html">
> <link rel="import" href="../components/paper-button/paper-button.html">
> <link rel="import"
> href="../components/topeka-elements/category-icons.html">
> <link rel="import" href="../components/core-icon/core-icon.html">
>
> <polymer-element name="login-form">
>
> <template>
> <style>
> :host {
> position: absolute;
> width: 100%;
> height: 100%;
> box-sizing: border-box;
> }
> #core_card {
> position: absolute;
> width: 300px;
> border-top-left-radius: 2px;
> border-top-right-radius: 2px;
> border-bottom-right-radius: 2px;
> border-bottom-left-radius: 2px;
> box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0,
> 0.0980392) 0px 0px 3px;
> left: 0px;
> top: 120px;
> background-color: rgb(255, 255, 255);
> }
> #core_icon {
> height: 128px;
> width: 128px;
> position: absolute;
> left: 90px;
> top: 0px;
> }
> #loginButton {
> width: 100%;
> background-color: rgb(255, 255, 255);
> }
> .login_input {
> width: 95%;
> }
> </style>
> <core-card id="core_card" layout vertical center>
> <paper-input label="Username" floatinglabel id="loginInput"
> class="login_input" vertical layout></paper-input>
> <paper-input label="Password" floatinglabel id="{{passwordInput}}"
> class="login_input" vertical layout></paper-input>
> <paper-button extends="input" on-tap="{{login}}" id="loginButton"
> center vertical layout>LOGIN</paper-button>
> </core-card>
> <core-icon icon="category-icons:entertainment" id="core_icon"
> designmeta="topeka-icon"></core-icon>
> </template>
>
> <script>
> Polymer({
> login: function(event,detail,sender){
> var username = document.getElementById('loginInput').value;
> console.dir(username);
> }
> });
> </script>
>
> </polymer-element>
>
> index.html :
> [...]
> <login-form></login-form>
> [...]
>
> I am seeking for help, please,
> Thank you in advance.
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/af7b1ac2-98d3-4d04-a6ac-84f23bb8a563%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/af7b1ac2-98d3-4d04-a6ac-84f23bb8a563%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCDGeuJKAfUxLAA2rvng4eoTUs1hhbrUQc3SuLk-KvcToA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
