Get the value of dropdown from parent with in a iframe using jQuery

Question

I have a dropdown outside the iframe

<select id="ModuleDropDown">
     <option>Hello world</option>
</select>

and I have an iframe like this

 <iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 900px;
            width: 1000px" scrolling="auto"></iframe>

the code of UploadTemplate.aspx is:

<asp:Button ID="UploadButton" runat="server" Text="Upload"" />

so now my question is that how can I get the value of dropdown in iframe using jQuery I tried this but it doesn't help me

$("#UploadButton").click(function () {
    alert($("#ModuleDropDown").val());
});

but when I click the button I got undefined instead of value of dropdown please help me

If it on the same domain it can be done. So is it on the same domain? ;-) — Simon Edström, Mar 20 '12 at 16:27
here is a similar question: http://stackoverflow.com/questions/729577/can-javascript-access-iframe-elements-from-the-parent-page — Stefan H, Mar 20 '12 at 16:28
@HaseebKhan While I was mistaken, due to a misunderstanding of what you were asking, that by no means that "nothing is impossible". Additionally the condescension is entirely unnecessary, and is in fact rude. — Stefan H, Mar 20 '12 at 17:06

score 1 · Accepted Answer · answered Mar 20 '12 at 16:29

1

I think this one will to the trick for you:

$("#UploadButton").click(function () {
    alert($("#ModuleDropDown", window.parent.document).val())
})

The extra argument tells jQuery in which context that should be used.

answered Mar 20 '12 at 16:29

Simon Edström

The code should be placed inside the iframe. When the button with ID UploadButton is clicked its seach for element with ID ModuleDropDown in the context of its parent. – Simon Edström Mar 20 '12 at 16:39
please explain this if u can? – Haseeb Khan Mar 20 '12 at 16:40

score 1 · Answer 2 · answered Mar 20 '12 at 16:49

1

Try this:

    $selectedValue=$("#EditorFrame").contents().find("select#ModuleDropDown").val();
    alert($selectedValue);

answered Mar 20 '12 at 16:49

Hearaman

score 0 · Answer 3 · answered Mar 20 '12 at 16:32

0

You could try

$('#EditorFrame').contains().find("body").on("click", "#UploadButton", function(){
   alert($("#ModuleDropDown", window.parent.document).val());
});

answered Mar 20 '12 at 16:32

Nicola Peluchetti

3 Answers3