Get value from input fields with iFrame

Question

I have the following iframe which is empty until the click of a submit button which then find a persons address and pupulates the input fields, I then have some javascript thats takes thes values out of the iframe to populate some input fields on my page -

The issue I am getting is undefined for str1 so it cant find the value inside the iFrame...

Form

<form id="findAddressPanel">
    <input type="text" id="houseNumber">
    <input type="text" id="postCode">
    <button>Submit</button>
</form>

iFrame

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Postcode Lookup</title>
</head>
<body>
    <input type="hidden" wicket:id="postcode" id="postcode" value=""/>
    <input type="hidden" wicket:id="line0" id="line0" value=""/>
    <input type="hidden" wicket:id="line1" id="line1" value=""/>
    <input type="hidden" wicket:id="line2" id="line2" value=""/>
    <input type="hidden" wicket:id="line3" id="line3" value=""/>
</body>
</html>

Script run at bottom of page

$("#findAddressPanel .btn").click(function() {
    console.log('button clicked');

    String.prototype.trim = function() {
      return this.replace(/^\s+|\s+$/g, "");
    }

    var str1 = $("#iframe").contents().find("#line0").val();

    console.log(str1);

    if (str1.trim() == "") {
      document.getElementById("unrecognisedPostcodeLookup2").className = "feedback-panel-error address-error-show";
      document.getElementById("findAddressPanel").className = "address-container-false";
    } else {
      document.getElementById("unrecognisedPostcodeLookup2").className = "feedback-panel-error address-error-hide";
      document.getElementById("addressPostCode").value = $("#iframe").contents().find("#postcode").val();
      document.getElementById("addressLine1").value = $("#iframe").contents().find("#line0").val();
      document.getElementById("addressLine2").value = $("#iframe").contents().find("#line1").val();
      document.getElementById("addressLine3").value = $("#iframe").contents().find("#line2").val();
      document.getElementById("addressLine4").value = $("#iframe").contents().find("#line3").val();
        address_finder_setter();
});

Looks like a duplicate of http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — Michael Sanchez, Aug 14 '14 at 10:12
There are alot of these questions on here but this isnt working for me, so I am asking if there is anything wrong with my code... — Dan Mitchell, Aug 14 '14 at 10:18
It's a security constraint for you not being able to access iframe content of a page that's not part of the parent domain. — Michael Sanchez, Aug 14 '14 at 10:20

Get value from input fields with iFrame

Form

iFrame

Script run at bottom of page

0 Answers0