Iframe not working with label in form

Question

Problem

I want to check a checkbox when an iframe is clicked. Normally I would just use an label around the input. And this works for images, text and others. But it doesn't seem to work for iframes?

Here is a fiddle

Here's my code

<form>
  <label>

      <iframe src="http://yx-ads6.com/banner_show.php?section=General&amp;pub=836169&amp;format=468x60&amp;ga=g" frameborder="0" scrolling="no" width="468" height="60" marginwidth="0" marginheight="0"></iframe

    <input type="checkbox">
  </label>
</form>

I would prefer use an span at top to make this work like I did into http://jsfiddle.net/VdJ9m/146/ the previus one was not updated, if fixed the link. — Roger Russel, Feb 16 '16 at 17:20

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

Basically the click event is within the iframe not the label, so the input is not checked.

You can do this with JS. Look at this answer: https://stackoverflow.com/a/32138108/4556503

edited May 23 '17 at 11:50

Community

1
1

answered Feb 16 '16 at 16:52

hopkins-matt

2,763
2
15
23

I'm not great at JavaScript, but how would I get it to check the checkbox after the script detects the click? – Tom Buxton Feb 16 '16 at 16:57

score 0 · Accepted Answer · answered Feb 16 '16 at 17:25

I would make using an element above the iframe like this:

HTML

<form>
  <label>
    <span></span>
      <iframe frameborder="0" scrolling="no" width="468" height="60" marginwidth="0" marginheight="0" style="background-color: #fff"></iframe>
    <input type="checkbox">
  </label>
</form>

CSS

span {
  width: 468px; 
  height: 60px; 
  position: absolute;
  opacity: 0;
}

here a jsfiddle about this code.

Iframe not working with label in form

2 Answers2