CODEWITHSUNDEEP
javascriptpolymermaterial-design
Mike
Mike

Reputation: 785

Getting the input value of a Polymer paper-input inside a paper-dialog

I have an paper-input-decorator/input inside a paper-dialog box that I need to get the value from but every time I do it I get back 'null'. This definitely has something to do with the paper-dialog because when I remove the input from the paper-dialog it works fine.

HTML:

<paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
        <div layout horizontal>
            <paper-button raised class="colored" self-center>Upload File</paper-button>
            <paper-input-decorator label="Enter URL for Dataset" floatingLabel error="A URL is required!" flex self-center>
                <input is="core-input" id="graphSource" required>
            </paper-input-decorator>
        </div>
</paper-dialog>
<paper-button affirmative hover onclick="addNewGraph()">Submit</paper-button>

Javascript:

function addNewGraph() {
    console.log(document.getElementById('graphSource'));
    var graphURL = document.getElementById('graphSource').value;
    /* a bunch of other code */
}

I saw a few posts on this but they seemed incomplete and they posted "answer code" didn't seem to work either - Any help on how I can get the value of the input would be really appreciated

Upvotes: 0

Views: 3353

Answers (2)

Mike
Mike

Reputation: 785

Working off of Jimi Dough10's answer I hit an interesting snag in that you have to keep the {{showDiaolg}} inside the polymer-element which makes it impossible (or at least really difficult) to connect it to a button not inside the template.

I ended up pulling the out and coding that into the mail HTML on its own and keeping everything else that was inside of it in the polymer-element. I then placed <test-element></test-element> inside the 

<body unresolved>
  <div layout horizontal center-justified>
    <paper-fab icon="add" role="button" id="openGraphAdd" onclick="document.querySelector('#addGraph').toggle()"></paper-fab>
  </div>
  <paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
    <test-element></test-element>
  </paper-dialog>

</body>

Here's my slightly modified Plunker forked from Jimi's answer - it basically just made the button a bit more flexible:

http://plnkr.co/edit/PLoy4y6y6vUpb7fsHntt?p=preview

Upvotes: 0

jimi dough10
jimi dough10

Reputation: 2016

i worked around with this for a min and i am not sure exactly why i couldn't get things to work as i thought they should.

i copied your code and made a plunker. i was able to get your code to work basically as you have it now. but if i moved the submit paper-button inside the dialog it changed all return data to null. if i wrap it in a custom element i could get everything to work with a submit button inside the dialog or from outside.

i am not sure the reason for this as i haven't had any issue like this as of yet. but i would say the best bet for functionality is to wrap this into a custom element.

this plunker is where i was working on this without a custom element. the button that is showing when dialog is closed will get the value of the paper-input value without issue. but the submit button inside the dialog that is calling the same function returns null still.

http://plnkr.co/edit/X8SHCCBW3usZ5c6BrSmQ?p=preview

here is the plunker i worked up with a working custom element and both buttons returning the value of the input.

<polymer-element name="test-element">
  <template>
    <paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
      <div id="div" layout horizontal>
        <paper-button raised class="colored" self-center>Upload File</paper-button>
        <paper-input-decorator label="Enter URL for Dataset" floatingLabel error="A URL is required!" flex self-center>
          <input is="core-input" id="graphSource" required>
        </paper-input-decorator>
        <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>
      </div>
    </paper-dialog>
    <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>
    <paper-button affirmative hover on-tap="{{showDialog}}">Show Dialog</paper-button>
  </template>
  <script>
    Polymer("test-element",{
      showDialog: function () {
        this.$.addGraph.toggle();
      },
      addNewGraph: function () {
        console.log(this.$.graphSource.value);
      }
    })
  </script>
</polymer-element>

http://plnkr.co/edit/yr1pLc05VYZ6c9OwsvOH?p=preview

Upvotes: 1

Related Questions