title: JavaScript Confirm Leave Once User Interacts with Object in Iframe
body: <p>I currently have a webpage in a format similar to this, with a sidebar and iframes with sources pointing to other pages on my website.</p>
  
  <p><img src="https://i.stack.imgur.com/avMbh.png" alt="enter image description here"></p>
  
  <p>I have the following code to offer user a confirm box for if they wish to leave the page:</p>
  
  <pre><code>window.onbeforeunload = function(e) {
      return 'All unsaved data will be lost.';
  };
  </code></pre>
  
  <p>In the iframes, I have various HTML elements, such as textfields, input boxes, buttons, etc. I don't want the user to get the <code>onbeforeunload</code> function <strong>unless</strong> they have clicked on one of these input elements first. </p>
  
  <p>Of course, I could go in and code each textfield, button, etc, manually using by creating a variable such as <code>shouldPopup</code>, then using <code>onclick</code> to set <code>shouldPopup</code> to <code>TRUE</code>, and finally using an <code>onbeforeunload</code> if statement, but this is inconvenient and, if I were to perhaps make more changes in the future, I would potentially have to go in and modify each element one by one again.</p>
  
  <p>What is a better way to get the same results? Any input as to how to simplify the code is greatly appreciated! :)</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Some more information about my Iframes. I am using the jQuery library for some basic functions (nothing fancy). There's quite a bit of PHP in them, as well as a few database requests, but nothing out of the ordinary. Hopefully this information is helpful to anyone looking to make any suggestions</p>