I need to show a hidden Iframe

Question

So, my page starts with a hidden iframe, that I have to show after submitting my form. While it seems pretty easy, I have absolutely no idea why it isn't working, and I'd be happy if you could help. Here is the code for the iframe:

        <iframe src="" name= "UpdIframe" id= "UpdIframe" style="display:none"> </iframe>

And here is the JS function that I'm using to hide and show it.

<script>
function submitFrame(){
document.getElementById('UpdIframe').style.display = "block";
}
</script>

This function actually does more things, but I believe they are irrelevant to the question, so I opted to take it out. And finally, here's the button calling the Onclick Event:

                    <tr>
                        <td>
                            <input class="botao" type="submit" value="Update" onclick="submitFrame()" style="width: 120px;">
                        </td>
                    </tr>

I appreciate the help!

I think when you are submitting form the page gets reload in that case it won't capture the JS function that you have made.. Try to submit form with ajax.. — Jaimin, Jun 14 '16 at 12:27
you should try something like : after submit in the other page result display the iframe , no ? — Mimouni, Jun 14 '16 at 12:38

score 1 · Accepted Answer · edited May 23 '17 at 10:29

The form is refreshing the page when you submit it. Change type=submit to type=button.

<input class="botao" type="button" value="Update" onclick="submitFrame()" style="width: 120px;">

<script>
    function submitFrame(){
        document.getElementById('UpdIframe').style.display = "block";
        // Also handle your form submission/POST here
    }
</script>

JSFiddle: https://jsfiddle.net/q3ceto1n/

References:

Form Refresh

Handle POST outside form tag

score 0 · Answer 2 · answered Jun 14 '16 at 12:49

If your function also submits form data you can modify

<input class="botao" type="submit" value="Update" onclick="submitFrame(event)" style="width: 120px;">

and

<script>
function submitFrame(e){
    e.preventDefault();
    document.getElementById('UpdIframe').style.display = "block";
}
</script>

I need to show a hidden Iframe

2 Answers2