Search code examples
javascriptiframewufoo

Referencing a Field Input in an Iframe

Currently my page: http://www.sagu.edu/spec-home

Specifically the footer form.

I'm currently trying to access the email field Field121.

Currently I have this:

var trackcmp_email = wufooFormm73jde715tzew1.document.getElementById("form227").Field121.value;

But it shows errors saying wufooFormm73jde715t

<div class="custom">
  <div id="wufoo-m73jde715tzew1">
    <iframe id="wufooFormm73jde715tzew1" class="wufoo-form-container" height="383" allowtransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="https://sagu.wufoo.com/embed/m73jde715tzew1/def/embedKey=m73jde715tzew1327047&amp;entsource=&amp;referrer=">&lt;a href="https://sagu.wufoo.com/forms/m73jde715tzew1/" title="html form"&gt;Fill out my Wufoo form!&lt;/a&gt;</iframe>
  </div>
  <script type="text/javascript">
    var m73jde715tzew1;
    (function(d, t) {
      var s = d.createElement(t),
        options = {
          'userName': 'sagu',
          'formHash': 'm73jde715tzew1',
          'autoResize': true,
          'height': '1022',
          'async': true,
          'host': 'wufoo.com',
          'header': 'show',
          'ssl': true
        };
      s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
      s.onload = s.onreadystatechange = function() {
        var rs = this.readyState;
        if (rs)
          if (rs != 'complete')
            if (rs != 'loaded') return;
        try {
          m73jde715tzew1 = new WufooForm();
          m73jde715tzew1.initialize(options);
          m73jde715tzew1.display();
        } catch (e) {}
      };
      var scr = d.getElementsByTagName(t)[0],
        par = scr.parentNode;
      par.insertBefore(s, scr);
    })(document, 'script');
  </script>
  <script type="text/javascript">
    var trackcmp_email = wufooFormm73jde715tzew1.document.getElementById("form227").Field121.value;
    alert(trackcmp_email);
    var trackcmp = document.createElement("script");
    trackcmp.async = true;
    trackcmp.type = 'text/javascript';
    trackcmp.src = '//trackcmp.net/visit?actid=609412436&e=' + encodeURIComponent(trackcmp_email) + '&r=' + encodeURIComponent(document.referrer) + '&u=' + encodeURIComponent(window.location.href);
    var trackcmp_s = document.getElementsByTagName("script");
    if (trackcmp_s.length) {
      trackcmp_s[0].parentNode.appendChild(trackcmp);
    } else {
      var trackcmp_h = document.getElementsByTagName("head");
      trackcmp_h.length && trackcmp_h[0].appendChild(trackcmp);
    }
  </script>
</div>

zew1 is not defined.

Here is the iframe that I'm trying to access:

<div id="wufoo-m73jde715tzew1"><iframe id="wufooFormm73jde715tzew1" class="wufoo-form-container" height="383" allowtransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="https://sagu.wufoo.com/embed/m73jde715tzew1/def/embedKey=m73jde715tzew1327047&amp;entsource=&amp;referrer=">&lt;a href="https://sagu.wufoo.com/forms/m73jde715tzew1/" title="html form"&gt;Fill out my Wufoo form!&lt;/a&gt;</iframe></div>

I'm trying to utilize the email field in the wufoo iframe into the active campaign found here:

<script type="text/javascript">


var trackcmp_email = wufooFormm73jde715tzew1.document.getElementById("form227").Field121.value;
alert(trackcmp_email);
var trackcmp = document.createElement("script");
trackcmp.async = true;
trackcmp.type = 'text/javascript';
trackcmp.src = '//trackcmp.net/visit?actid=609412436&e='+encodeURIComponent(trackcmp_email)+'&r='+encodeURIComponent(document.referrer)+'&u='+encodeURIComponent(window.location.href);
var trackcmp_s = document.getElementsByTagName("script");
if (trackcmp_s.length) {
    trackcmp_s[0].parentNode.appendChild(trackcmp);
} else {
    var trackcmp_h = document.getElementsByTagName("head");
    trackcmp_h.length && trackcmp_h[0].appendChild(trackcmp);
}
</script>
Solution

  • You will need to reference the iFrame as follows:

    window.frames['myIFrame'].document.getElementById('myIFrameElemId');

    So in your case:

    window.frames['wufooFormm73jde715tzew1'].document.getElementById('form227')