Отправка нескольких динамических форм

Question

Я пытаюсь отправить несколько форм одновременно, когда нажата одна кнопка. Эти формы генерируются автоматически. У всех есть разные URL-адреса действий, но те же идентификаторы. Так работает система (SaaS).

Проблема в том, что у меня возникают проблемы с получением правильных значений selectbox, а затем отправкой форм. Я не получаю никаких ошибок, но я думаю, что это имеет какое-то отношение к идентификаторам. Я работаю над этим в течение нескольких дней, и я не могу понять этого.

Таким образом, для каждого набора/продукта есть некоторый пустой HTML, например, так:

HTML

<div id="sets" class="clearfix"> 

// first set 
    <div class="set" data-handle="url" > 
    <div class="right"> 
     <div class="products"> 
     <div class="close"></div> 
     <div class="product"> 
      /// in here comes the product data from json /// 
     </div> 
     <div class="set-bestellen"> 
      <div class="link"> 
      <a title="add" class="trigger"><span>add to cart</span></a> 
      </div> 
     </div> 
     </div><!-- .products --> 
    </div><!-- .right --> 
    <div class="image"></div> 
    </div> 

// second set 
    <div class="set" data-handle="url" > 
    <div class="right"> 
     <div class="products"> 
     <div class="close"></div> 
     <div class="product"> 
      /// in here comes the product data from json /// 
     </div> 
     <div class="set-bestellen"> 
      <div class="link"> 
      <a title="add" class="trigger"><span>add to cart</span></a> 
      </div> 
     </div> 
     </div><!-- .products --> 
    </div><!-- .right --> 
    <div class="image"></div> 
    </div> 
// etc... can be as much as 10 sets 

</div><!-- .#sets --> 

Внутри выше HTML .product наступает автоматически генерируется форма. Эта форма генерируется следующим образом:

Jquery

$('#sets .set').each(function(){ 

    $(this).click(function(){ 

     if($(this).hasClass('open')){ 

     $('.close').click(function(){ 
      $('#sets .product').fadeOut(); 

      $('.products',this).animate({ 
      width: 'toggle'},500, function() { 
      ....... 
      }); 
     }); 
     } else { 

     ..... 

     } 

     var url = $(this).data('handle')+'?format=json'; 

     $.getJSON(url, function (data){ 

      var product = data.product; 

      var $container = $('.products .product'); 
      var productsHtml = []; 

      var fullurl = 'http://www.shop.com'; 
      var variants = ''; 
      $.each(product.related, function(index, rel){ 
      var url = ''+fullurl+''+rel.url+'?format=json'; 

      ...... etc ... 
      var productHtml = '<div id="'+rel.id+'" class="p"><form method="post" id="product_configure_form" action="http://www.shop.com/cart/add/'+rel.vid+'/" name="formsub"><div class="foto"><a href="'+fullurl+''+rel.url+'"><img class="rollover" src="'+image+'" hover="'+image2+'" alt="'+rel.fulltitle+'"/></a></div><div class="prijs" data-price="'+rel.price.price_incl+'">€'+rel.price.price_incl+'</div><div class="varianten_'+rel.id+'">'; 


      $.getJSON(url, function (data){ 
       var rel = data.product; 

       var wqsSelectVariants = $('<div class="product-configure-variants tui" />'); 
       var select = $('<select id="product_configure_variants"/>'); 

       $.each(rel.variants, function (index, variant){ 
       select.append('<option value=' + variant.id + '>' + variant.title + '</option>'); 
       wqsSelectVariants.append(select); 
       }); 
       $('.varianten_'+rel.id).html(wqsSelectVariants); 
      }); 

      var price = rel.price.price_incl; 
      sum += price; 

      productHtml = productHtml + '</div></form></div>'; 
      productsHtml.push(productHtml); 
      }); 
      $('.total').text('€'+sum.toFixed(2)); 
      productsHtml = productsHtml.join('') 
      $container.html(productsHtml); 
     }); 

     }  
    }); 

    }); 

    etc.... 


<script type="text/javascript"> 
    $(document).ready(function(){ 

    $(".trigger").on("click", function(e){ 
     e.preventDefault(); 

     $('form[name="formsub"]').each(function(){ 
     var variant = $('#product_configure_variants').val(); 

     var $form = $(this); 

     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action')+variant+'/?quantity=1', 
      data: $form.serialize(), 
      success: function(data, status){ 
      if(status == 'success'){ 

      }else if(status == 'error'){ 

      } 
      } 
     }); 
     }); 


    }); 

    }); 
</script> 

Кто-нибудь знает, что происходит неправильно или дать мне некоторые указания о том, как исправить это?

Answer 1

Попробуйте использовать $('form[name="formsub"]:visible') в качестве вашего селектора. Это должно дать вам только видимые формы, а не все, что есть на странице.