Polymer receives input paper value

Question

I have been using Polymer for a short time, and now I want to get the paper input value. I do not know how I can do this. This does not work:

this.form.password 

I want to get the value of this field:

 <paper-input label="Password" type="password" id="password" name="password" size="25" value=""></paper-input> 

I also want to get Input to send email input:

 <paper-input label="Login" id="email" name="email" size="25" value=""></paper-input> 

For sending, I use:

 <paper-button raised value="Login" type="submit" onclick="formhash(this.form, this.form.password);">Login</paper-button> 

With normal input fields this works.

Answer 1

You can use document.querySelector('#password').value to get the paper-input value with the password id in the formhash() function call or inside the function definition.

You can also use Automatic node search to get the value of an element using id . Where the form / input is stored in the user element and use this.$.password.value to get the value of the element with id password . Like this

 <!-- create a custom component my-form --> <dom-module id="my-form"> <template> <form is="iron-form" id="form" method="post"> <paper-input name="name" label="name" id="name"></paper-input> <paper-button raised on-click="submitForm">Submit</paper-button> </form> </template> <script type="text/javascript"> Polymer({ is: "my-form", submitForm: function() { alert(this.$.name.value); if(this.$.name.value != "") // whatever input check this.$.form.submit(); } }) </script> </dom-module> <my-form></my-form> <!-- use custom-component my-form --> 

Answer 2

Using <form is="iron-form"> allows you to use <paper-input> and other input elements in forms https://elements.polymer-project.org/elements/iron-form

 <form is="iron-form" id="form" method="post" action="/form/handler"> <paper-input name="name" label="name"></paper-input> <input name="address"> ... <paper-button raised onclick="submitForm()">Submit</paper-button> </form> function submitForm() { document.getElementById('form').submit(); } 

Answer 3

If you don't want to use <form> , you can also just save the input values ​​in instance variables and use them later wherever you want.

All you have to do is keep the input inside a value like this:

<paper-input label="Password" type="password" id="password" name="password" size="25" value="{{valueNameToStore}}"></paper-input>

And then access it as follows:

var myPassword = this.valueNameToStore;