为选择产品和数量实现 HTML 表单答案

【问题标题】：implementing HTML form for select product and quantity为选择产品和数量实现 HTML 表单
【发布时间】：2015-07-27 10:05:38
【问题描述】：

我需要帮助来实现 HTML 表单，用户可以从输入元素（例如下拉菜单）中选择某些产品，然后为每个产品添加数量。表单应该能够订购多种产品。

产品在数据库中，我的存储库有返回 IEnumerable<dynamic> 的方法，我想用它来迭代产品。

我应该如何设计一个html表单？

在服务器端表单将使用在ProcessRequest 方法中继承IHttpHandler 的处理程序类进行处理。

谢谢。

【问题讨论】：

“如何”是什么意思？除了编写 HTML 之外，您已经完成了所有步骤。就这么做？
我不想用无限数量的下拉和文本输入弄乱我的表单，我如何编写一个在用户填写第一个后添加更多下拉和数量输入的表单？以及如何使用“POST”检索该表单？
例如，您可以使用 Javascript 将对象动态添加到 DOM-Tree、编号并稍后在 RequestHandler 中对其进行迭代
谢谢，能给我一个真实的代码示例吗？主要用于js代码。

标签： javascript c# html asp.net

【解决方案1】：

我几乎不做vanilla js，所以下面是from a jQuery-blog。

Javascript 代码：

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
}) 
});

还有 HTML：

<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>

你必须做一些最小的改变：移除限制器，正确设置你想要的 id/name，根据你的 CSS 命名类。

【讨论】：