Submitting forms from Multiple Iframes in Firefox

Question

I have a page that contains multiple iframes. All iframes reference the same page. Each iframe page contains a form that I want to submit to the server. There's a "Submit All" button on the page containing the iframes that when clicked calls this function:

    function submitAll() {
    var fs = d3.selectAll('iframe')[0];
    for (var i = 0; i < fs.length; i++) {
        try {
            var el = fs[i];
            var doc = el.contentDocument;
            var root = el.contentWindow['root'];
            var f = doc.getElementById('submit-form');
            removeParentNodeReference(root);
            doc.getElementById('POST-name').value = document.getElementById('name').value;
            doc.getElementById('POST-email').value = document.getElementById('email').value;
            doc.getElementById('POST-phone').value = document.getElementById('phone-number').value;
            doc.getElementById('POST-json').value = JSON.stringify(root);
            doc.getElementById('POST-submit-info').click();
        }
        catch (e) {
            console.log(e.message);
        }
    }

The function grabs the content document from each iframe. With the iframe's document, it'll proceed to fill in some form values for the form in the iframe page. The function will then grab the button of the form and click it. This calls off a function in the iframe that does some processing and submits the form.

In chrome, all iframes' forms are submitted. However, in firefox, the form submission will only happen for the first form. I've went into the debugger and see that even though it's looping through for all the iframe pages, only one submission actually happens.

Anyone have any ideas?

Thanks.

@blex not at all. The page in the iframe is located on my web server. I'm not sure if this is the best implementation for the use case (using one or more iframes) or not. I have a page that creates a tree using d3. A user may or may not create several of these trees. If they do, they'll create a new iframe each time (and a tab to go along with it). In the case where they create several trees, I want to submit each tree they've made to the server to store in a database to process later. — Quy
oh, ok, I did not notice the d3 there was for the pluging. Well, I don't know how d3 works, but instead of using several iframes, you should look at Ajax (you can post as many forms as you wish, without leaving the page, and without any iframes) -> Take a look here :) — blex

blex blex · Accepted Answer · 2014-06-27T00:30:20

Instead of using iframes, you could use Ajax, which will not need to set up multiple iframes. Ajax allows you to make requests to pages in order to either get their content, or submit data.

Example

In this example, I am going to use jQuery, which has an easier syntax than pure javascript to do this. Make sure to include jQuery in your page for this to work.

As I do not know the way you define the number of submits to be made, I'll assume you give it as a parameter to the following function:

function submitAll(n){
    /* Get the values from your form
       --> they need to have the same name as in
       your php code (e.g "POST-name", etc) */
    var values = $("#myForm").serialize();

    /* Submit them n times */
    for(var i = 1; i <= n; i++){
        $.ajax({
            url: "yourpage.php",
            type: "post", // or get
            data: values, // declared above
            success: function(){
                console.log("Request "+i+"/"+n+" sent successfully.");
            },
            error: function(){
                console.log("Request "+i+"/"+n+" failed.");
            }
        });
    }
}

Good to know

Ajax is asynchronous, which means that the javascript code located after it keeps executing while the ajax request is waiting for an answer from your server. If, for example, you put this line at the end of the function:

console.log("End of submitAll");

It will probably be executed before you receive any of the n responses.

I hope this helps, if you try this and run into a problem, let us know.

Submitting forms from Multiple Iframes in Firefox

2 Answers

Example

Good to know