asp.net javascript getelementbyid in iframe

Question

I am trying to populate my form in iframe. I need to input a value in textbox and select a value from dropdown menu.

webform1

<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="admin-lte/js/app.min.js"></script>
    <script src="Scripts/jquery-2.1.3.min.js"></script>

</head>
<body>
    <style type="text/css">
    body {scrolling:no;
}
    iframe {position:absolute;
    z-index:1;
    top:0px;
    left:0px;
}
</style>
    <form id="form1" runat="server">

    <iframe id="frame1" src="WebForm4.aspx" width="100%" height="100%" frameborder="0">
</iframe>

    <script>
        function getElementWithinIframe() {


            var iframe = document.getElementById('frame1');
            var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

            var quantity = innerDoc.getElementById("txtQuantity");
            quantity.value = "5";

            var submit = innerDoc.getElementById("btnQuantity");
            submit.click();
        }
    </script>

    </form>
</body>
</html>

webform4

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:DropDownList ID="ddlProd" runat="server">
            <asp:ListItem>Product1</asp:ListItem>
            <asp:ListItem>Product2</asp:ListItem>
            <asp:ListItem>Product3</asp:ListItem>
            <asp:ListItem>Product4</asp:ListItem>
            <asp:ListItem>Product5</asp:ListItem>

        </asp:DropDownList>
        <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

    </div>
    </form>
</body>
</html>

this doesn't work. What am I missing.?

I've gone through multiple articles but I think I'm not getting it.

Javascript - Get element from within an iFrame

How to pick element inside iframe using document.getElementById

Any help is appreciated.

-- Thanks

VDWWD · Answer 1 · 2017-03-04T21:11:32.507

0

In the javascript in the parent you use btnQuantity, while the button in WebForm4.aspx has the ID btnSubmit. So change the script to:

var submit = innerDoc.getElementById("btnSubmit");

Then call the function somewhere, either on a button click or on page load.

<input type="button" onclick="getElementWithinIframe()" value="ClickMe">

<script>
    $(document).ready(function () {
        setTimeout(function () { getElementWithinIframe(); }, 250);
    });
</script>

edited Mar 04 '17 at 21:11

answered Mar 04 '17 at 19:27

VDWWD

35,079
22
62
79

Ok that was my mistake. But still it doesn't work. I changed the script as you mentioned. Textbox(txtQuantity) is not getting populated. – Mashhoor Gulati Mar 04 '17 at 19:44
It does on my test environment. Do you clear the contents of `txtQuantity` in the code behind of `WebForm4` perhaps since you are also doing a form post. – VDWWD Mar 04 '17 at 19:48
And you have to call `getElementWithinIframe` somewhere. – VDWWD Mar 04 '17 at 19:49
– Mashhoor Gulati Mar 04 '17 at 20:12

asp.net javascript getelementbyid in iframe

1 Answers1