How to send "full request" on submit (instead of xhr)?

[ghost]

I've got such code:

    <form is="iron-form" id="filter-form2" method="get" action="/back_office/backofficeasset/">                                                                                                                                     
      <input name="imei" value="333" />                                                                                                                                                                                             
      <button>save</button>                                                                                                                                                                                                         
    </form> 

But when I click "save" xhr request is sent instead of document request.

[notwaldorf]

What do you mean by the document request? At the moment, iron-form only submits a form with an XHR.

[ghost]

I was speaking in Chrome-dev-tools terms, which categorize networks requests by: XHR, js, css, img, media font, doc(ument), etc.

Actually I soved it by:

<script>                                                                                                                                                                                                                            
var form = document.querySelector('#filter-form');                                                                                                                                                                                  
form.addEventListener('iron-form-response', function(event) {                                                                                                                                                                       
  console.log('reload-after-ajax', event.detail.url);                                                                                                                                                                               
  window.location = event.detail.url;                                                                                                                                                                                               
});                                                                                                                                                                                                                                 
</script>

But I'm not 100% satisfied, because:

• it's extra code which has to be put always along with iron-form (when I want reload)
• it's extra request (one from form, another is redirection)

[suddenlyGiovanni]

I'm having a similar problem, I'm working on a project which is developed using Keystone.js on top of Node.js which is based on MongoDB and communicates with it throught the mongoose dependency. I'm trying to build a form to post the data to the database using iron-form, but when I try to submit it using the POST method, the data dosen't reach the backend cause it incapsulates into an XHR request that is not understood by the server. I tried to figure out how to send a DOCUMENT request instead of the XHR one, but, reading the Polymer docs, I can't figure out how to do it. Any help will be appreciated, even some suggestions or workarounds. Thanks

[thomashigginbotham]

The only way I see to get around the XHR request is to intercept it in the "iron-form-presubmit" event and create a new form with the same fields/values as the iron-form. Then submit the new form.

I'm not sure why iron-form doesn't do something similar by default. It's not at all intuitive that the form will be sent via XHR. Here's some sample code.

(function () {
    'use strict';

    var ironForm = document.querySelector('form[is=iron-form]');

    if (ironForm) {
        ironForm.addEventListener('iron-form-presubmit', function(event) {
            var vals = ironForm.serialize();
            var form, hiddenField;

            event.preventDefault();

            // Create new form
            form = document.createElement('form');

            form.action = ironForm.action;
            form.method = ironForm.method;
            form.style.display = 'none';

            // Create hidden fields in form
            for (var key in vals) {
                if (vals.hasOwnProperty(key)) {
                    hiddenField = document.createElement('input');

                    hiddenField.type = 'hidden';
                    hiddenField.name = key;
                    hiddenField.value = vals[key];

                    form.appendChild(hiddenField);
                }
            }

            // Add form to DOM and submit it
            document.body.appendChild(form);
            form.submit();
        });
    }
}());

[skyred]

https://github.com/PolymerElements/iron-form/issues/105#issuecomment-243545532 can be a perfect workaround for now.