CODEWITHSUNDEEP
javascripthtmlformspolymer
sergi philipsen
sergi philipsen

Reputation: 3

iron-form error when submit button in div

When i try to submit an iron-form I get this error:

VM7938:3 Uncaught TypeError: Polymer.dom(...).localTarget.parentElement.submit is not a function

But this only occures when the submit button is in a div.

This works:

<paper-button onclick="_submit(event)">Submit</paper-button>
<paper-button dialog-dismiss onclick="_reset(event)">Cancel</paper-button>

This doesn't:

<div class="buttons">
  <paper-button onclick="_submit(event)">Submit</paper-button>
  <paper-button dialog-dismiss onclick="_reset(event)">Cancel</paper-button>
</div>

Here is the form with the code under it:

  <form is="iron-form" method="get" action="/" id="basic">
    <paper-input label="Title" name="title" char-counter maxlength="25" required error-message="Fill in a title"></paper-input>
    <paper-textarea label="URL" name="url" required error-message="Fill in an URL"></paper-textarea>
    <div class="buttons">
      <paper-button onclick="_submit(event)">Submit</paper-button>
      <paper-button dialog-dismiss onclick="_reset(event)">Cancel</paper-button>
    </div>

    <div class="output"></div>
  </form>
  <script>
    function _submit(event) {
      Polymer.dom(event).localTarget.parentElement.submit();
    }
    function _reset(event) {
      var form = Polymer.dom(event).localTarget.parentElement
      form.reset();
      form.querySelector('.output').innerHTML = '';
    }
    basic.addEventListener('iron-form-submit', function(event) {
      this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
    });
  </script>

It is located in a dialog. I have downloaded the element with bower and I've linkt it with an import.

Does somebody know how to fix this or how it happens?

Thank you in advance.

Upvotes: 0

Views: 398

Answers (1)

tony19
tony19

Reputation: 138226

In your code, _submit assumes a specific order of elements. Specifically, it assumes that Polymer.dom(event).localTarget.parentElement is the form element, so if you move the submit button, you have to change that code to match the new path. In your case, the form is the parent of the div containing the submit button, so the correct path to the form is:

 Polymer.dom(event).localTarget  // paper-button
   .parentElement                // div.buttons
   .parentElement                // form
   .submit();

A more flexible solution that doesn't require a specific path is to query the document for the form element:

function _submit(event) {
  // <form id="my-form" ...>
  var form = document.querySelector('#my-form');
  if (form) {
    form.submit();
  }
}

codepen

Upvotes: 1

Related Questions