CODEWITHSUNDEEP
javascriptpolymerweb-componenthtml-inputpaper-elements
Un1
Un1

Reputation: 4132

How to submit iron-form and trigger form's action?

I have this form that is supposed to post the input values to the formspree API using the form's action attribute on submit. After I added is="iron-form", it just posts the values out but doesn't trigger the action attribute for some reason.

<form is="iron-form" action="https://formspree.io/MY_EMAIL_HERE" method="post">

  <paper-input type="email" name="email" label="Your email" required></paper-input>    
  <paper-textarea name="message" label="Your message" required char-counter maxlength="2000"></paper-textarea>

  <input type="hidden" name="_next" value="{{baseUrl}}contact_form_sent" />

  <paper-button class="sendButton" on-click="_submit">Send</paper-button>
</form>

...

<script>
  Polymer({
    is: 'my-contact',
    _submit: function() {
      this.$.form.submit();
    }
  });
</script>

Upvotes: 2

Views: 2196

Answers (2)

Un1
Un1

Reputation: 4132

SOLUTION:

According to the last example on this page https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html&active=iron-form I have to use 2 forms, so I could redirect the page to the specified URL in the action attribute, so I changed it accordingly:

  <form is="iron-form" id="redirectDemo">
      <paper-input type="email" name="email" label="Your email" required></paper-input>
      <paper-textarea name="message" label="Your message" required char-counter maxlength="2000"></paper-textarea>

      <input type="hidden" name="_next" value="{{baseUrl}}contact_form_sent" />
      <input type="text" name="_gotcha" style="display:none" />

      <paper-button class="sendButton"  on-click="_nativeSubmit">Send</paper-button>
  </form>

  <form method="post" action="URL HERE" id="nativeForm"></form>

  <script>
    Polymer({
      is: 'my-contact',

      _nativeSubmit: function() {
         redirectDemo = this.$.redirectDemo;
         nativeForm = this.$.nativeForm;
          if (redirectDemo.validate()) {
            // For each element the iron-form wants to submit, create a hidden
            // input in the submission form.
            var serializedItems = redirectDemo.serialize();
            for (var name in serializedItems) {
              var input = document.createElement('input');
              input.hidden = true;
              input.name = name;
              input.value = serializedItems[name];
              nativeForm.appendChild(input);
            }
            nativeForm.submit();
          }
      }

    });
  </script>

Upvotes: 0

tony19
tony19

Reputation: 138286

this.$ is a map of IDs to nodes in the current Polymer element (see Polymer's automatic node finding). So, this.$.form is trying to access the element with an ID of "form", but there are no elements with that ID, so the value would be undefined.

You can fix this by giving your <form> an ID of "form":

<form id="form" ...>


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _submit: function() {
      this.$.form.submit();
    },
    _onResponse: function(e) {
      this._response = JSON.stringify(e.detail.response, null, 2);
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.8.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-form/iron-form.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <form id="form"
            is="iron-form"
            action="//httpbin.org/post"
            on-iron-form-response="_onResponse"
            method="post">
        <input type="text" name="test" value="foo"/>
        <paper-button raised on-tap="_submit">Submit</paper-button>
      </form>
      <pre>[[_response]]</pre>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 4

Related Questions