Simplemodal复选框和输入字段

时间:2012-07-31 23:34:23

标签: jquery

我有一个问题,实际上有两个,关于埃里克·马丁斯的简单模态。我尝试做的是当有人点击按钮时弹出模态并显示特定产品的不同变体。这是复选框,因此您可以选择颜色“绿色”红色等。不仅仅是红色或绿色。此外,还有输入字段,您可以在其中填写特定颜色所需的数量。所以1或20或100万等...

到目前为止一直很好....现在问题是我需要将填好的数据和选中的复选框发送回服务器。我实际上不知道该怎么做。

所以: 1)如何检查是否实际检查了复选框? 2)如何从输入字段中获取值? 3)如何将此数据发送到服务器?

我拥有的是:

$('.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
 })

我的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>

我对jquery很新,到目前为止,如果有人给我一些建议,我会很高兴。

THX。

1 个答案:

答案 0 :(得分:1)

由于您使用的是表单,因此当您使用method =“post”提交表单时,它将为您的输入字段发送表单key = name value = value的键值对。例如:

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

在您的POST中,您将['quantity'] = 1

在表单中,action =会在提交表单时将请求发送到该URL。