Question

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…

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.

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?

What I have is:

$('.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 = 
         '<img src="'+image+'"/>' +
         '<div class="variantsContainer">' +  
         '<h3>' + data.product.fulltitle + '</h3>';
       });

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

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

       contentHtml = contentHtml +   
         '</div>';

     });

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

   });

 }
 });
 return false
 })

My HTML

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

I’m pretty new to jquery and come this far, if anyone give me some advice I would be happy.

Thx.

Answer 1

Since you are using a form, when you submit it with method=”post”, it will send key value pairs of the form key=name value=value for your input fields. For example:

<input type="text" name="quantity" id="formProductQuantity" value="1" />

In your POST you will have [‘quantity’] = 1

In the form action= causes a request to be sent to that url when the form is submitted.