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();
        });
    });
});

有更清洁/更短/更简洁的方法来完成上述工作，但这种方式应该是非常自我解释的。

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

1 个答案: