I am stuck ! How form work ?

[lesp...@gmail.com]

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. 

[Eric Bidelman]

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 :)

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/af7b1ac2-98d3-4d04-a6ac-84f23bb8a563%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.