使用jQuery选择嵌套在iframe中的表单

Question

我有一个表单，它在一个嵌套在jQuery UI对话框中的iframe内。该表单包含一个文件输入类型。jQuery UI对话框包含一个上传按钮。当点击此按钮时，我希望可以通过编程方式调用提交方法。我的问题是如何使用jQuery选择位于iframe内的表单。以下代码应该能够说明问题：

<div id="upload_file_picker_dlg" title="Upload file">        
    <iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>

frame_src_url 包含：

<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">            
<p>Select a file to be uploaded:</p>
<p>
    <input type="file" name="datafile" size="60">
</p>

jQueryUI对话框的JavaScript代码：

$('#upload_file_picker_dlg').dialog({
    ...
    buttons: {
        'Close': function() { 
            $(this).dialog('close'); 
        },
        'Upload': function() {              
            $('#upload-form').submit(); //question is related to this line
            $(this).dialog('close'); 
        }
    },
    ....
});

从上面的javascript代码片段中，我该如何选择在id为upload_file_iframe的iframe中的id为upload-form的表单？

- Kevin Le - Khnle

Answer 1

访问iframe内的元素有些棘手。

您可以使用以下语法：

$('#iframeID').contents().find('#upload-form').submit();

'iframeID' 显然是您为 iframe 分配的 ID。

希望这是正确的！

- Davide

---

没错，你说得对。我和你同时发布了答案。但是你的答案是100%正确的。我选择了你的答案并投了赞成票。谢谢。 - Kevin Le - Khnle

Answer 2

答案是：

$('#upload_file_iframe').contents().find('#upload-form').submit();

我从http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/学习到的技巧是如何在jQuery中访问iframe。

- Kevin Le - Khnle

Answer 3

就我所知，您可能需要在包含iframe源的文件中添加逻辑。

- zynx

---

也许那样做可以行得通，但我不应该这样做。我只需要知道一个选择器，它可以选择嵌套在 iframe 中的表单（或 id）。 - Kevin Le - Khnle