Get data from multiple input boxes in polymer

Question

I have a list of "card" element; each one has a paper input element and a button element; each element takes some datas from an external JSON (in the my-post-service element I have a core-ajax embedded). My goal is that, when user writes something in a text box and clicks in the relative button, infos of the specific card and text inserted by user are sent to another function. Here is the code of this polymer element:

<polymer-element name="template-list">
<template>
    <my-post-service id="service" posts="{{posts}}" url="http://localhost:9111/v3/objects/templates">
    </my-post-service>
    <div id="pcId" layout horizontal wrap>
        <template repeat="{{post in posts}}">
            <my-post-card>
                <img src="http://localhost:9111/v3/resources/{{post.representation[0].icon}}" width="70" height="70">
                <h2>{{post.name}}</h2>
                <p>{{post.description}}</p>
                <paper-input name="paper-input" id="paperInputId" inputValue="{{value}}" label="Insert new object name..." floatingLabel="false"></paper-input>
                <add-object-button on-click="{{fetchName}}" template="{{post.name}}" name="{{objName}}"></add-object-button>
            </my-post-card>
        </template>

    </div>
    <style>
        :host {
            display: block;
            width: 100%;
        }
        my-post-card {
            margin-bottom: 30px;
        }
    </style>
</template>

<script>

    var objName;

    Polymer({
        fetchName: function () {
            objName = this.$.pcId.querySelector('#paperInputId').value;
        },
        get objName() {
            return objName;
        },
    });
</script>

At the moment, when I click on some button, I'm always able to get specific card infos (through template attribute) but I can only retrieve text from the first paper input element (the one of the first card).

Ps I'm new on polymer so maybe I'm missing something stupid...!

jimi dough10 jimi dough10 · Accepted Answer · 2014-11-29T00:10:03

objName = this.$.pcId.querySelectorAll('paper-input').value;

i think is what you are looking for.

Get data from multiple input boxes in polymer

1 Answers