Creating form in javascript works in Chrome, not in Edge?

Question

I have interesting case of what the hell is going on that I cannot seem to solve.

I need to programatically create a form and send it as post request. My request then returns some html layout and draws it to window that posted the request. This is why I create new window at the bottom. Solution I have is as follows

// Define params
var path = someRequestPath;
var params = {
    DOCNAME: 'DocumentName',
    FORMAT: 'A4',
    ORIENTATION: 'Landscape',
    HTML: htmlContent
};

// Create form to submit request
var form = document.createElement('form');
form.method = "POST";
form.action = path;

// Set form params
for (var key in params) {
    if (params.hasOwnProperty(key)) {
        var hiddenField = document.createElement('input');
        //hiddenField.type = 'hidden';
        hiddenField.name = key;
        hiddenField.value = params[key];

        form.appendChild(hiddenField);
    }
}

//Create window and submit form
var win = window.open('', 'windowName', 'width=1400,height=1200');
win.document.body.appendChild(form);
form.submit();
win.focus();

Now this solution work perfectly fine in Chrome, but in Edge I get following error Object doesn't support property or method "Symbol.iterator". It happens on line where I attach the form to the newly opened window via appendChild. Since Edge is running Chromium core, I expected that it would behave the same, but obviously it does not.

Any ideas?

Thanks.

What happens if you use `win.document.write()` or `win.document.body.innerHTML=` instead of `appendChild()`? — Michel, Dec 07 '20 at 10:41
Going with `win.document.body.innerHTML = form.outerHTML` bypasses my problem, but then `form` is not attached to child window and calling `form.submit()` in this case causes content of the parent window to be overwritten. But from this point is it correct to assume that there is problem in `form` structure? — RhodryCZ, Dec 07 '20 at 11:04
Take a look at [this answer](https://stackoverflow.com/a/30836244/1685196) — Michel, Dec 07 '20 at 11:10
Okay, didn't know that forms in document can be accessed like this. That works, thanks a lot. Aynway I am still curious as to why `appendChild` does not work. My guess is that structure of about:blank is different in Chrome vs Edge or perhaps that when Edge tries to append to empty `body` it fails, whereas Chrome creates some default structure? — RhodryCZ, Dec 07 '20 at 11:14

score 1 · Accepted Answer · answered Dec 08 '20 at 03:13

From your below description,

It looks like you are assuming that you are using the Edge Chromium browser but as per my test results, it looks like you are using the Edge legacy browser.

I try to test your sample code in both the Edge Chromium browser and the Edge legacy browser.

Your code works fine in the Edge Chromium browser and giving the same result as the Google Chrome browser.

Test result with the Edge Chromium Version 87.0.664.55:

Your code giving the Below error on the same line in the Microsoft Edge legacy version 44.19041.423.0:

Michel has already provided the suggestion to fix this issue in his comment.

So I suggest you can try to check and confirm that which Edge browser you are using on your side for making this test. If you want to move to the MS Edge Chromium browser then you can download it from this link.

Let me know if I have misunderstood anything from your description, I will try to correct myself.

Thanks for your understanding.

Hello Deepak, thanks so much for this answer! I was indeed running Legacy version of Edge. Because of whatever happened in SW department, we developers did not get the Chromium version. Honestly I did not even realize this as I mostly use Chrome, but some of our users run Edge so I had to do testing there this time. — RhodryCZ, Dec 10 '20 at 12:33

score 0 · Answer 2 · answered Dec 07 '20 at 09:58

0

Take a look at this: Edge 15 throws error when using 'for ... of' on a NodeList

It seems to be a problem with Edge not implementing the for ... of/in in NodeList.

Maybe try using for (var key in Array.from(params))

answered Dec 07 '20 at 09:58

Leonard Buhl

86
4

I tried that, didn't help. When my error happens, this iteration is already finished and `form` element is created correctly, contains all necessary inputs. But thanks for the tip. :) – RhodryCZ Dec 07 '20 at 10:35

Creating form in javascript works in Chrome, not in Edge?

2 Answers2