Question

I have an iFrame like so:

<iframe width="100%" frameborder="0" height="470" allowtransparency="true" name="productframe" id="productframe" style="border-bottom:1px solid #eee"></iframe>

The iframe contains several line items drawn from a sql server db, and I can check any of the checkboxes I want to perform a task with – in this case delete them. I have a button in the parent document that says “Delete selected”, and I’d like to be able to click this button and populate a hidden field in my parent page with the values of the selected checkboxes in the child iframe.

My checkboxes look like this:

<input id="Checkbox1" type="checkbox" value="47" title="Select this row" name="selectItem"/>

I have an instance of jquery on my parent page so I can make use of jquery selectors, I just have no clue as to the syntax needed to do this.

Thanks in advance to anyone who can help me on this.

Answer 1

if those checkboxes aren’t in a form, something like

var ifr = $('iframe').contents(),
var chb = ifr.find('input:checkbox');

if(chb.length){
   ifr.find('body').append($('<form/>', {
      id:   'tempform',
      css:  {display:none;} 
   }));
   ifr.find('input:checkbox').each(function(){
       ifr.find('#tempform').append($(this).clone());
   }

   var serializedString = ifr.find('#tempform').serialize();      
   // do something with the serializedString
   ifr.find('#tempform').remove();
}

and you could put the serializedString into a hidden field. Hmm might be overkill, but I was in the mood for it :p
It’s all untested.