Event to know when a form in an iFrame has been submitted

Question

Ok so I have an iframe on the Contact page of my website.

The src of the iframe points to another file containing a Google Docs form.

Once the Google docs form is submitted, the page is redirected to a Google page saying that "your response has been recorded".

I have this form inside an iframe so that it doesn't redirect viewers away from my entire site, but instead only the iframe document is redirected.

This all works fine, But I want to show my own message instead of the Google "your response has been recorded".

To do this, basically I want to know when the iframe has been redirected and/or (preferably) the form has been submitted.

Things i've tried...

onhaschange="" inside the iframe element
onsubmit="" inside the form element (which is in the iframe src file)

Any other ideas?

An interval checking whether the URL has changed to Google's message page each second or so. — pimvdb, Jul 12 '11 at 19:25
I tried but it won't work since the actual src attribute is not altered during the redirect. In the DOM it stays the same... and thats why I cant tell if it changes or not. — Jacob, Jul 12 '11 at 21:27

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

Look at this answer: iFrame src change event detection?
Create a function to check if the loaded content is from Google and react properly.

edited May 23 '17 at 11:53

Community

1
1

answered Jul 12 '11 at 19:28

Sascha Galley

15,711
5
37
51

I have been trying that method for the last two hours now and still no luck. I have an idea though of what I can try next. Thanks for the help. – Jacob Jul 12 '11 at 21:25
@Jacob this answer is marked as the answer, but you say you couldn't get it to work? It's confusing, please unmark this as the answer to help other users. Or have you worked it out since? – kahlan88 May 06 '21 at 12:54

score 1 · Answer 2 · answered Jun 30 '15 at 13:25

Too late I guess but... here's my answer. I've had the same quiz today.

function getIframe(iframeElement){
    //retrieves the document element inside of an iframe
    return iframeElement.contentDocument;
}

var iframeElem = document.getElementById('iframeId');

iframeElem.onload = function(){
    //onload also catches form post sending
    var iframeDoc = getIframe( iframeTpv );
    //retrieves the height of the content's body
    var contentHeight = iframeDoc.body.scrollHeight;
    //do something ... 
}

Only works for the same domain origin. If it's different domain you cannot retrieves the document inside an iframe. — Aitor Alejandro, Jun 30 '15 at 13:26

score -1 · Answer 3 · answered Oct 23 '19 at 16:18

-1

Old question but I think I found a simple solution:

HTML:

<iframe src="google_form_link" onload="changed()">Loading…</iframe>

JS:

var change_count = 0;

function changed() {
    if (change_count === 1 /* NUMBER OF FORM PAGES */) {

        /* DO SOMETHING */

    }
    else {

        window.change_count += 1;

    }
}

answered Oct 23 '19 at 16:18

mhollingshead

53
4

so you are saying number of pages is the number loading times? So, supposing that the form has 3 pages (incl. the thank you page), if the user decides to go back from page 2 to page 1 to update their answer, then how we decide the loading times, we would never know when the user finally reach the final page and submit their response... – alaswer Jan 11 '20 at 17:59
Not a reliable method. – Mahesh Samudra May 01 '20 at 08:18

Event to know when a form in an iFrame has been submitted

3 Answers3