I can't access iron-form inside dom-repeat by using index

Question

I'm loading some records from a cassandra database (using iron-ajax and dom-repeat) and by clicking on one row I'm opening a paper-dialog where values are loaded into an iron-form containing paper-input editable fields. After editing I should be able to do submit in order to update the record in the database but using a paper-button it doesn't work (using a simple button at least is trying to send the content to the REST tough is ending with 415 error). What I tried is something like this:

  <iron-ajax id="get_drafts" auto handle-as="json" last-response="{{drafts}}"></iron-ajax>
  <template is="dom-repeat" items="{{drafts}}" as="item">
  <div>{{item.field1}}</div>
  <span><paper-button title="edit" on-click="openEditDialog"></paper-button></span>
    <paper-dialog id="incidentEditDialog{{index}}" with-backdrop>
       <form is="iron-form" action="/" id="myForm{{index}}" method="post">
         <paper-input value="{{item.field1}}"><paper-input>
         <paper-button raised on-click="submit">Submit</paper-button>
       </form>
    </paper-dialog>  
  </template>

and then tried with all kind of script options which didn't work I think mainly because I was not succeeded to identify the form by using the id - myForm{{index}} . I found all kind of examples but nothing with this twist (forms inside a dom-repeat). Is this something feasible at least? How should I try doing it? thanks! If I use:

 <paper-button raised onclick="clickHandler(event)">Submit</paper-button>

and then the method

 function clickHandler(event) {
       Polymer.dom(event).localTarget.parentElement.submit();
    }

I get the 415 error: There was an unexpected error (type=Unsupported Media Type, status=415). Content type 'application/x-www-form-urlencoded' not supported

Answer 1

The problem is that <form> (even extended with the iron-form) will not work together as seamlessly with paper-button as it does with a native <button> or <input> .

When you do on-click="submit" on paper-button, you will need to define a submit method (the same way as you do with the clickHandler in your example).

If you don't want to do that, a good workaround is to wrap the paper-button in a native button:

<button tabindex="-1"> <paper-button>Submit</paper-button> </button>

The negative tabindex is there so the wrapper can't get focus.

The Unsupported Media Type error is a separate issue, but adding content-type="application/json" to your <form> might help there.