实现了选择产品和数量的HTML表单

本文关键字：HTML 表单 选择 实现 | 更新日期: 2023-09-27 18:05:06

我需要帮助实现HTML表单，用户可以从输入元素(e)选择某些产品。G下拉)，然后为每个产品添加数量。表单应具有订购多种产品的能力。

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

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

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

谢谢。

实现了选择产品和数量的HTML表单

我几乎不做香草js，所以下面是来自jquery博客。

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命名类

相关文章：