通过电子邮件提交带有动态字段的表单

Question

提前谢谢你。

该代码现在也可以完全按照我的需要工作，但是如果所有输入名称都相同，我不确定如何将每个新行传递给我的 .asp 邮件处理程序。我将在我的代码中的哪个位置索引输入框，以便我可以在提交期间唯一地调用它们并使用 .asp 邮件处理程序通过电子邮件发送它们？

感谢 stackoverflow 社区帮助我解决我迄今为止编写的代码的问题！

HTML

<form role="form" action="/wohoo" method="POST">
    <label>Item</label>
    <div class="catalog-fieldset">
        <div class="catalog-wrapper">
            <div class="catalog-items">
                <ul>
                    <li>Quantity:
                        <input type="text" size="5" name="Qty[]">
                    </li>
                    <li>Width:
                        <input type="text" size="5" name="Width[]">
                    </li>
                    <li>Height:
                        <input type="text" size="5" name="Height[]">
                    </li>
                </ul>
                <button type="button" class="remove-line">Remove</button>
            </div>
        </div>
        <button type="button" class="add-field">Add More...</button>
    </div>
</form>

CSS

ul {
    list-style: none;
    display:inline-block;
    margin:0 0 5px;
}
ul li {
    display: inline-block;
}
.remove-line {
    display:inline-block;
}

我已设置此代码http://jsfiddle.net/KeithDickens/afqh4a5o/2/

$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count    

$('.catalog-fieldset').each(function () {
    var $wrapper = $('.catalog-wrapper', this);

    $(".add-field", $(this)).click(function (e) {
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment        
            $('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
        }
    });
    $('.catalog-items .remove-line', $wrapper).click(function () {
        x = x - 1; //initlal text box count    
        if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove();
    });
});
});

Answer 1

根据您当前的设置读取值将仅基于位置。这是非常脆弱的，因为如果你改变位置，你会破坏代码，但是如果你要添加一个

<button type="button" class="summarise">Summarise</button>

在您现有的“添加更多”按钮下，将您的 javascript 换成下面的内容，这不仅是一个开始。需要应用验证等。

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var x = 1; //initlal text box count    

    function LineItemViewModel() {
       var self = this;
       self.Qty = 0;
       self.Width = 0;
       self.Height = 0;
    }

    function CollectionViewModel() {
      var self = this;
      self.Items = [];
    }
    var collection = new CollectionViewModel();

    $('.catalog-fieldset').each(function () {
        var $wrapper = $('.catalog-wrapper', this);

        $(".add-field", $(this)).click(function (e) {
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment        
                $('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
            }
        });

       $(".summarise", $(this)).click(function (e) {
           var txts = $('.catalog-fieldset input[type=text]');
           var item = new LineItemViewModel();
           txts.each(function () {
               switch($(this).attr("name")){
                   case "Qty[]":
                      item.Qty = $(this).val();
                      break;
                  case "Width[]":
                     item.Width = $(this).val();
                     break;
                  case "Height[]":
                     item.Height = $(this).val();
                     collection.Items.push(item);
                     item = new LineItemViewModel();
                     break;        
                }
             });
             alert(collection.Items.length);
         });

        $('.catalog-items .remove-line', $wrapper).click(function () {
            x = x - 1; //initlal text box count    
            if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove();
        });
    });
});

上面有更简洁/更短/更简洁的方法，但这种方法应该是非常不言自明的。