Removal of an iFrame after internal submit has been clicked

Question

Hope people can help - been using 'Stack Over Flow' for reference for many years now, but this is the first time I'm stuck on some coding. Below is the iFrame, what I would like to happen is when the submit button on the form has been clicked is for it to disappear, but instead the iFrame is still there and within the iFrame it goes to 'How can we help you today?'

Also, when the iFrame disappears a line of text should appear.

<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("myIframe");
frame.parentNode.removeChild(frame);
}
</script>

<div style="overflow: hidden;position: relative;height: 970px; width:150%;" onclick="removeIFrame();">
<iframe id="myIframe" src="https://sheersense.freshdesk.com/support/tickets/new" scrolling="no" width="100%" height="1125px" frameborder="0" style="position: absolute; top:-150px"></iframe>

<div id="text_display" style="">Thank you for your ticket, a member of the Sheersense team will be in touch with you shortly.</div>
</div>

Many thanks for the help!

i believe the submit button is inside the iframe ? if YES then why do you have the `removeIframe` on the div's `click` where is the submit button or the form ? — Muhammad Omer Aslam, Dec 07 '17 at 09:47
also the domain that iframe points to is local our outside the localdomain where you are loading the iframe ? — Muhammad Omer Aslam, Dec 07 '17 at 09:49
Thanks Muhammad, the iFrame is pulling in from a support system that they have externally which can't be accessed or changed. — Ian.Sheard, Dec 07 '17 at 10:37
and the form that has the submit button is inside that fram if that is the case , you can do much about it i am afraid. — Muhammad Omer Aslam, Dec 07 '17 at 10:38

score 0 · Answer 1 · answered Dec 07 '17 at 10:29

You can find the possible answer in this post- https://stackoverflow.com/a/3690896/8438534

As mentioned in that answer, if the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.

score 0 · Answer 2 · answered Dec 07 '17 at 11:16

try this

function removeIFrame() {
        var frame = document.getElementById("myIframe");
        frame.remove();
    }

    window.onload = function() {
            var frame = window.myIframe;
            var innerDocument = (frame.contentWindow || frame.contentDocument);
            if (innerDocument.document) innerDocument = innerDocument.document;
            innerDocument.onclick =function() {
                 removeIFrame();
            }
    }

Removal of an iFrame after internal submit has been clicked

2 Answers2