Question

所以我在页面上有多个表单。每个表单都是相同的，除了它们可能包含的数据。我正在侦听应该修改其相同形式的其他元素的特定元素的更改，但是我无法确定如何在自己的形式内调整这些操作的范围。这是我到目前为止所得到的：

var ContactSponsor = new function(){

    this.init = function(){
        $('#SponsorStatus_ID').change(SponsorStatusChanged);
    };

    var SponsorStatusChanged = function(){

        var $form = $(this).closest('form');
        var selectedValue = $(this).find('option:selected').text();

        if (selectedValue == 'Executed Contract') {
            markFieldRequired('#NumVAPs', $form);
            markFieldRequired('#SponsorWebsiteLevel_ID', $form);
            autoFillFieldWithCurrentDate('#ContractDate', $form);
        } else {
            markFieldNotRequired('#NumVAPs', $form);
            markFieldNotRequired('#SponsorWebsiteLevel_ID', $form);
        }
    };

    var markFieldRequired = function(fieldID, $form){
        $(fieldID, $form).siblings('label').addClass('required');
    };

    var markFieldNotRequired = function(fieldID, $form){
        $(fieldID, $form).siblings('label').removeClass('required');
    };

    var autoFillFieldWithCurrentDate = function(fieldID, $form){
        if ($(fieldID, $form).val() == '' || $(fieldID, $form).val() == '0000-00-00') {
            $(fieldID, $form).val(getCurrentDate());
        }
    };
};

另外，我将表单传递给每个方法。不确定我是否有办法在没有每次传递的情况下做到这一点。

Answer 1

看起来你正在使用重复的ID。这可能会导致问题。不是让每个FORM都包含id=NumVAPs的输入，而是删除ID，然后按名称定位字段，例如$form.find('[name=NumVAPs]')。

嘿，虽然我们正在使用它，但您可能希望将markFieldRequired和markFieldNotRequired函数合并到一个setFieldRequired中，该var SponsorStatusChanged = function(){ var $this = $(this); if($this.val() == 'Executed Contract') { $this.closest('form').addClass('executed'); } }接受一个布尔值，指示是否需要该字段或不。

此外，如果根据需要标记字段纯粹是装饰性的，您可能需要考虑使用某些CSS来处理它。 E.g：

form.executed label.required-for-executed {
    /* whatever rules are conferred by .required */
}

然后，添加这个CSS：

.required

或者将该选择器添加到required-for-executed块。此外，您必须将类{{1}}添加到标记中的每个相应标签（即不要使用javascript）。

jQuery：如何将表单元素上的事件监听器范围扩展到自己的表单？

1 个答案: