Fancybox Passing Values to Pop Up Box

Question

I have a SQL query that lists the quotations for a company which then echos into a table which is saved into $quote as an array.

I don't really want to use an iframe if I can get away with it..

foreach($quote as $i) {
<td>
<a href="#" id="send_email"><img style="font-align:center;" width="32px"    src="/media/img/icons/email.png" alt=""></a>                        
</td>
}

Upon clicking the link to e-mail, it then pops up a FancyBox window to select the contact of the company you wish to contact.

<script type="text/javascript">
$(document).ready(function() {
    $('#send_email').click(function() {
        $.fancybox($('#contacts').html(), { });
        return false;
    });


});
</script>

<div id="contacts" style="display:none;">
<form action="/email.php" method="get" />
    <p>
        <label>Contact:</label>
        <select name="contact_id">
        <?php
        foreach($company->getContacts($item['id']) as $contact){
        ?>
            <option value="<?php echo $contact['id'] ?>"><?php echo $contact['firstname'] ." ". $contact['lastname']?></option>
        <?php
        }
        ?>
        </select>

    </p>
   <input type="submit" value="Go" />
</form>

I'm wondering how to pass the quote ID in question over to the fancybox from the original loop ($i['id']) and then to e-mail.php to know which quote the contact of the company is after.

I've been stuck for a few hours now and would really appreciate the help.

Answer 1

Render the anchor tag with the quote id in it as an attribute:

foreach($quote as $i) {
<td>
<a href="#" id="send_email" data-quote-id="<?php echo $i['id'] ?>"><img style="font-align:center;" width="32px"    src="/media/img/icons/email.png" alt=""></a>                        
</td>
}

Then get the quote id in javascript like this:

<script type="text/javascript">
$(document).ready(function() {
    $('#send_email').click(function() {
        var quoteId = $(this).attr("data-quote-id");
        // do something with quoteId..
        $.fancybox($('#contacts').html(), { });
        return false;
    });
});
</script>