0

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.

Quy
  • 1,343
  • 9
  • 11
  • Are you trying to spam a site? – blex Jun 26 '14 at 19:36
  • @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 Jun 26 '14 at 20:59
  • 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](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) :) – blex Jun 26 '14 at 21:59

2 Answers2

1

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.

Community
  • 1
  • 1
blex
  • 24,941
  • 5
  • 39
  • 72
  • While I did go with this suggestion, I'm still curious why selecting all frames and manually submitting each frame's document's form does not work in firefox and if there is a general work around for it. – Quy Jun 30 '14 at 14:49
  • @Quy Thank you for accepting this answer. While I'm not sure why you had this problem, I thought it would be better for you to avoid using multiple iframes. They are often considered bad practice, and should be used in specific cases, or if there are no other options available. However, I hope that someday, you'll find an answer to this mysterious bug! – blex Jun 30 '14 at 18:17
  • Agree with @blex its easier to see each iframe as a self contained component. it makes it easier to maintain your application too. – alcedo Sep 27 '15 at 08:29
1

I had the same problem. I solved it by adding a class to the iframe (notsendiframe). if($(".notsendiframe").length) { // renaming the class of the iframe // sending the first iframe $(".notsendiframe")[0] } in the in the Posted Page of the iframe i added a JS that starts the JS from the parent again. (so the next iframe will be sent) maybe you need to show the iframe first, before submitting it.

tryitdifferent
  • 11
  • 1