使用 jQuery 选择 iframe 中的表单 [英] Selecting a form which is in an iframe using jQuery

问题描述

我在 jQuery UI 对话框内的 iframe 中有一个表单.该表单包含一个文件输入类型.jQuery UI 对话框包含一个上传按钮.单击此按钮时，我想以编程方式调用提交方法.我的问题是如何使用 jQuery 选择 iframe 中的表单.以下代码应阐明图片:

<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>

frame_src_url 包含:

<p>选择要上传的文件:</p><p><input type="file" name="datafile" size="60"></p>

jQueryUI 对话框 javascript 代码:

$('#upload_file_picker_dlg').dialog({...纽扣: {'关闭':函数(){$(this).dialog('close');},'上传':函数(){$('#upload-form').submit();//问题与这一行有关$(this).dialog('close');}},....});

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

解决方案

访问 iframe 内的元素很棘手.您应该使用以下语法:

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

其中iframeID"显然是您提供给 iframe 的 ID.

希望它是正确的！

I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:

<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 contains:

<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>

The jQueryUI dialog box javascript code:

$('#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'); 
        }
    },
    ....
});

From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?

解决方案

Accessing an element inside an iframe is tricky. You should use the following syntax:

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

where 'iframeID' is obviously an ID you've given to the iframe.

Hope it is correct!

这篇关于使用 jQuery 选择 iframe 中的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！