一个表单页面上动态新增多个子表单,并且希望每个子表单中的日期组件能够正确显示时间,并且确保每个子表单实例的数据都可以独立保存,请怎么设置呢?
这个问题可以通过以下步骤实现:
在表单页面上,使用JavaScript或jQuery动态添加多个子表单。每个子表单都应该有一个唯一的ID。
在每个子表单中,添加一个日期组件。你可以使用HTML5的<input type="date">
元素,或者使用JavaScript库(如jQuery UI的DatePicker)来创建一个日期选择器。
当用户选择一个日期时,将这个日期保存到对应的子表单实例中。你可以通过子表单的ID来获取和设置子表单的数据。
当表单提交时,遍历所有的子表单,并将每个子表单的数据保存到数据库中。每个子表单的数据应该包含子表单的ID和用户选择的日期。
以下是一个简单的示例代码:
<!-- 表单页面 -->
<form id="mainForm">
<!-- 动态添加子表单 -->
<div id="subFormContainer"></div>
<button type="button" id="addSubForm">添加子表单</button>
<button type="submit">提交</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 当用户点击“添加子表单”按钮时,动态添加一个新的子表单
$('#addSubForm').click(function() {
var subFormId = 'subForm' + new Date().getTime(); // 生成一个唯一的ID
var subFormHtml = '<div id="' + subFormId + '"><input type="date"><button type="button" class="removeSubForm">删除</button></div>';
$('#subFormContainer').append(subFormHtml);
});
// 当用户点击“删除”按钮时,删除对应的子表单
$(document).on('click', '.removeSubForm', function() {
$(this).parent().remove();
});
// 当表单提交时,保存所有子表单的数据
$('#mainForm').submit(function(e) {
e.preventDefault();
var subFormsData = [];
$('#subFormContainer > div').each(function() {
var subFormId = $(this).attr('id');
var date = $(this).find('input[type="date"]').val();
subFormsData.push({id: subFormId, date: date});
});
// 将subFormsData发送到服务器...
});
});
</script>
注意:这只是一个基本的示例,实际的实现可能会根据你的具体需求和使用的编程语言/框架有所不同。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。