页面上第二个表单所需的唯一 id 属性

Unique id attributes needed for second form on page

本文关键字:唯一 id 属性 第二个 表单      更新时间:2023-09-26

我有一个脚本,可以将日期从日期选择器中分隔为日,月和年。当页面上有一个表单时,它工作正常,但当有第二个表单时则不然(可能是由于 id 相同)。如何向我的 id 和名称添加值,使它们成为唯一值?

var now = new Date();
var date = jQuery('.form-date');
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
date.val(today);
jQuery('form').on('submit', function() {

    var newVal = date.val().split('-'), 
        dateParts = {
            year: parseInt(newVal[0], 10),
            month: parseInt(newVal[1], 10),
            day: parseInt(newVal[2], 10)
        };
    jQuery('.anchor').append(jQuery.map(dateParts, function (index, key) {
        var name = 'date_' + key;
        return jQuery('<input>', {
            type: 'hidden',
            name: name,
            id: name,
            value: dateParts[key]
        });
    }));
});

需要声明一个确定当前形式的变量:

(function ($) {
    var now = new Date();
    var date = $('.form-date');
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    var today = now.getFullYear() + "-" + (month) + "-" + (day);
    date.val(today);
    var form = $('form.reservation');
    form.on('submit', function () {
        var currentForm = $(this);
        var newVal = currentForm.find('.form-date').val().split('-'),
            dateParts = {
                year: parseInt(newVal[0], 10),
                month: parseInt(newVal[1], 10),
                day: parseInt(newVal[2], 10)
            };
        currentForm.find('.anchor').append($.map(dateParts, function (index, key) {
            console.log(['date', form.index(currentForm), key].join('_'));
            return $('<input>', {
                type: 'hidden',
                name: ['date', key].join('_'),
                id: ['date', form.index(currentForm), key].join('_'),
                value: dateParts[key]
            });
        }));
    });
})(jQuery);