Selecting a form which is in an iframe using jQuery

Posted by Khnle on Stack Overflow See other posts from Stack Overflow or by Khnle
Published on 2010-06-01T21:22:42Z Indexed on 2010/06/01 21:43 UTC
Read the original article Hit count: 199

Filed under:
|
|

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 ?

© Stack Overflow or respective owner

Related posts about jquery-ui

Related posts about form