Search code examples
inputpolymer

Polymer Get Paper Input Value


I am using Polymer for a short time and now i want to get the value of a paper input. I don't know how can I do this. This is not working:

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 get the Input for submitting of the e-mail input:

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

For submitting I am using:

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

With normal input fields is this working.


Solution

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

    You can also use polymer's Automatic node finding to get value of an element using its id. In which keep the form/input in custom-element and use this.$.password.value to get the value of an 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 -->