iron-form body data malformed

[tjsavage]

POST requests using iron-form and sending JSON as request body, is misinterpreted by requesting URL. My test shows a simple nodejs server that accepts POST requests and prints out body using body-parser API. I'm using Polymer 1.0 with iron-form inside a custom component.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<dom-module id="app-bear-form">
    <style>
        #submit {
            background-color: #4CAF50;
            color: white;
            float: right;
        }
    </style>
    <template>

        <p>Create a bear</p>
        <form is="iron-form" id="form" method='POST' action="http://192.168.63.133:8080/api/bears">
            <paper-input label="Bear Name" name="name" required="true"></paper-input>
            <paper-input label="Bear Age" name="age"></paper-input>
        </form>
        <br/>
        <paper-button onclick="submitForm()" label="Create Bear" id="submit" raisedButton>Create</paper-button><br/>

    </template>
    <script>
    onclick="submitForm()"

        function submitForm() { 
            document.getElementById('form').submit();
        }

        Polymer({
            is: 'app-bear-form',
            ready: function() {

            },
            createBear: function() {
                this.$.form.submit();

            },
        });
    </script>
</dom-module>

The request body json data:

[kolarski]

try using <form content-type="application/json" /> described here: https://elements.polymer-project.org/elements/iron-form

[notwaldorf]

We've had a fix recently that sents the contentType correctly. Would you mind giving this another try and see if it's fixed for you?

[jsilland]

This is still an issue in 1.0.4 and I believe also in the master branch— I think the relevant block of code is below, the logic doesn't make a lot of sense to me:

      var json = this.serialize();
      […]
      this._requestBot.contentType = this.contentType;
      if (this.method.toUpperCase() == 'POST') {
        this._requestBot.body = JSON.stringify(json);
      } else {
        this._requestBot.params = json;
      }

What I'm reading is that the content type is indeed sent correctly but that the form will send a serialized JSON body (JSON.stringify(json)) regardless of the content-type that was set by the developer of the page. In my case, the server endpoint that I am targeting does not accept JSON data — I'm relying on the encoding which is specified as the default in the documentation of this element, i.e. application/x-www-form-urlencoded.

[tschnoelzer]

I think it is a type in the documentation, which kolarski stated:

I use "content-type" instead oof the stated "contentType" and works now.