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

Question

提前致谢。

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

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

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

有更清晰/更短/更简洁的方法来执行上述操作，但这种方法应该很容易解释。

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

submitting form via email with dynamic fields

javascript

asp.net

email