提交多个动态表单

时间:2014-10-22 11:52:07

标签: javascript jquery html forms

单击一个按钮时,我尝试一次提交多个表单。这些表单都是自动生成的。他们都有不同的动作网址,但身份相同。这就是系统(SaaS)的工作原理。

问题是我在获取正确的选择框值时遇到问题,然后发送表单。我没有收到任何错误,但我认为它与标识符有关。我现在在这个工作了几天,我无法解决这个问题。

因此,对于每个集合/产品,都有一些空的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>

有谁知道出了什么问题,或者就如何解决这个问题给我一些指示?

1 个答案:

答案 0 :(得分:1)

尝试使用$('form[name="formsub"]:visible')作为选择器。这应该只给你可见的表格而不是页面上的所有表格。