Question

所以，我的页面以隐藏的iframe开头，我必须在提交表单后显示。虽然看起来很简单，但我完全不知道为什么它不起作用，如果你能提供帮助，我会很高兴。以下是iframe的代码：

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

这是我用来隐藏和显示它的JS函数。

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

这个功能实际上做了更多的事情，但我相信它们与这个问题无关，所以我选择把它拿出来。最后，这是调用Onclick事件的按钮：

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

我很感激帮助！

Answer 1

表单在您提交时刷新页面。将type=submit更改为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/

参考文献：

Form Refresh

Handle POST outside form tag

Answer 2

如果您的功能也提交表格数据，您可以修改

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

和

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

我需要显示一个隐藏的Iframe

2 个答案: