title: Get value from input fields with iFrame
body: <p>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 -</p>
  <p>The issue I am getting is undefined for str1 so it cant find the value inside the iFrame...</p>
  <h3>Form</h3>
  <pre><code>&lt;form id=&quot;findAddressPanel&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;houseNumber&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;postCode&quot;&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <h3>iFrame</h3>
  <pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;&gt;
      &lt;title&gt;Postcode Lookup&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type=&quot;hidden&quot; wicket:id=&quot;postcode&quot; id=&quot;postcode&quot; value=&quot;&quot;/&gt;
      &lt;input type=&quot;hidden&quot; wicket:id=&quot;line0&quot; id=&quot;line0&quot; value=&quot;&quot;/&gt;
      &lt;input type=&quot;hidden&quot; wicket:id=&quot;line1&quot; id=&quot;line1&quot; value=&quot;&quot;/&gt;
      &lt;input type=&quot;hidden&quot; wicket:id=&quot;line2&quot; id=&quot;line2&quot; value=&quot;&quot;/&gt;
      &lt;input type=&quot;hidden&quot; wicket:id=&quot;line3&quot; id=&quot;line3&quot; value=&quot;&quot;/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <h3>Script run at bottom of page</h3>
  <pre><code>$(&quot;#findAddressPanel .btn&quot;).click(function() {
      console.log('button clicked');
  
      String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, &quot;&quot;);
      }
  
      var str1 = $(&quot;#iframe&quot;).contents().find(&quot;#line0&quot;).val();
  
      console.log(str1);
  
      if (str1.trim() == &quot;&quot;) {
        document.getElementById(&quot;unrecognisedPostcodeLookup2&quot;).className = &quot;feedback-panel-error address-error-show&quot;;
        document.getElementById(&quot;findAddressPanel&quot;).className = &quot;address-container-false&quot;;
      } else {
        document.getElementById(&quot;unrecognisedPostcodeLookup2&quot;).className = &quot;feedback-panel-error address-error-hide&quot;;
        document.getElementById(&quot;addressPostCode&quot;).value = $(&quot;#iframe&quot;).contents().find(&quot;#postcode&quot;).val();
        document.getElementById(&quot;addressLine1&quot;).value = $(&quot;#iframe&quot;).contents().find(&quot;#line0&quot;).val();
        document.getElementById(&quot;addressLine2&quot;).value = $(&quot;#iframe&quot;).contents().find(&quot;#line1&quot;).val();
        document.getElementById(&quot;addressLine3&quot;).value = $(&quot;#iframe&quot;).contents().find(&quot;#line2&quot;).val();
        document.getElementById(&quot;addressLine4&quot;).value = $(&quot;#iframe&quot;).contents().find(&quot;#line3&quot;).val();
          address_finder_setter();
  });
  </code></pre>