Getting checkbox-array into a floatbox

Page: 1

Author Post
Kazper
Guest
Hello,

I'm probably missing something obvious, but I'm no javascript wizard (in fact total newbie) and after struggling with this problem for several hours I decided to ask and see if anyone here can help me, since I've now gotten stubborn about making this work ;)

My problem is pretty simple - I have a form on a webpage that includes a variable number of checkboxes:

{foreach from=$data key=k2 item=products}
<tr>
<td width="15"><input type="checkbox" value="{$product.id}" name="items_checked[]" id="{$k2}"></td>
<td>{$products.name}</td>
<td>{$products.price}</td>
</tr>
{/foreach}


(I use the Smarty template system, hence the variables, but they should be pretty obvious, also the table setup is a quick mock-up to test the code, so don't blast me for using a clumsy solution there, please ;) ).

My problem is that I need the user to be able to check off one or more of those checkboxes (the number of which may vary from day to day as new products are introduced or phased out), and I then want to open a floatbox iframe to enter additional details before submitting a final form to the server.

Now if it had been textboxes I could have used the example on the demopage easily enough, but the fact that checkboxes in a form return an array makes me lost on how to make the neccessary javascript to get the info from the parent page into the floatbox form... :(

I realize there are other ways I could work around this server-side, but firstly I've become stubborn and secondly I really want to learn how to make data transferable between floatbox(es) and the parent page, as this may come in handy later in the project as well.

I hope I can get some help and apologize in advance if my questions are stupid.
Administrator
Registered: Aug 2008
Posts: 3382
Sorry it's taken so long to reply.

This doesn't sound like a floatbox support issue. It sounds like you want to know how to access your checkbox values from javascript. Here's a code snippet I use for the set_options form on my demo page. Perhaps you can pull something useful from it. First though, you have to give each of your checkboxes a unique id.

var els = document.getElementsByTagName(&#039;input&#039;);
var i = els.length; while (i--) {
var el = els[i];
if (el.type == &#039;checkbox&#039;) {
strOptions += &#039; &#039; + el.id + &#039;:&#039; + (el.checked? &#039;true&#039; : &#039;false&#039;);
} else {
strOptions += &#039; &#039; + el.id + &#039;:&#039; + el.value;
}
}

The snippet isn't usable as is in your circumstance, but shows that you can iterate over all the input elements, find the checkboxes by looking at the element type, and then read the element's .id and .checked properties.

Hope this helps...
Kazper
Guest
It does indeed - and thanks for the reply despite the stupid question. I guess it was more about javascript than floatbox, but I was also unsure if it could be done at all with Floatbox.

I think I see how to adapt your code to my situation - you've definitely given me something to work with. Thanks a lot :D

Page: 1