Simplemodal checkboxes and input fields
<p>I have a question, actually two, concerning eric martins simple modal. What I try to do is that when somebody clicks a button the modal pop up and shows the different variants of that particularly product. This are checkboxes, so you can choose a color "green" red etc. Not just red or green. Further there are input fields where you can fill in the amount you want of that particularly color. So 1 or 20 or a million etc...</p>

<p>So far so good.... Problem is now that I need to send the filled in data and checked checkboxes back to the server. I actually don't know how to do that. </p>

<p>So:
1) How can I check if a checkbox is actually checked?
2) How do I get values out of the input fields?
3) How do I send this data to the server?</p>

<p>What I have is:</p>

<pre><code>$('.opener').click(function (event) {

 var url = $(this).attr("href")+'/?format=json';

 $('#formVariants').modal({ 

 onShow:function(dialog) {      

   $.getJSON(url, function(data) {           

     var contentHtml = '';

     $.each(data.product, function(index, product){

       var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(data.product.image) + '/160x120x2/image.jpg';

       contentHtml = 
         '&lt;img src="'+image+'"/&gt;' +
         '&lt;div class="variantsContainer"&gt;' +  
         '&lt;h3&gt;' + data.product.fulltitle + '&lt;/h3&gt;';
       });

     $.each(data.product.variants, function(index, variant){

       //var variantId = ;
       //  " selected="selected"&gt; - €0,00
       contentHtml = contentHtml + 
         '&lt;div class="variants"&gt;' + 
         '&lt;label&gt;&lt;input type="checkbox" name="variant" value="' + variant.id + '"/&gt;' + variant.title + '&lt;/label&gt; ' +
         '&lt;label style="float:right; margin-right:10px;"&gt;Aantal: &lt;input type="text" name="quantity" id="formProductQuantity" value="1" /&gt;&lt;/label&gt;';

       contentHtml = contentHtml +   
         '&lt;/div&gt;';

     });

     $('#formProduct .formProductContent').html(contentHtml);

   });

 }
 });
 return false
 })
</code></pre>

<p>My HTML</p>

<pre><code>    &lt;div id="formVariants"&gt;
  &lt;div class="formVariantsContent"&gt;
    &lt;form class="formProduct" id="formProduct" action="{{ ('cart/add/' ~ product.vid ) | url }}" method="post"&gt;
      &lt;div class="formProductContent"&gt;&lt;/div&gt;
      &lt;a class="button button grey simplemodal-close"&gt;&lt;span&gt;{{ 'Annuleren' | t }}&lt;/span&gt;&lt;/a&gt;
      &lt;a class="button blue opener" href="#" title="{{ 'Add to cart' | t }}"&gt;&lt;span&gt;{{ 'Add to cart' | t }}&lt;/span&gt;&lt;/a&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I'm pretty new to jquery and come this far, if anyone give me some advice I would be happy. </p>

<p>Thx.</p>
