如何使用 javascript 隐藏 CakePHP 表单的各个部分

Question

我正在尝试使用 javascript 根据复选框的值来显示或隐藏 CakePHP 表单的一部分。

我正在增强现有的 CakePHP 表单，该表单已经为表单的一个部分提供了此功能，并且正在向需要类似功能的表单添加另一部分。我是 javascript 编程新手，查看现有代码我不清楚它用于访问 CakePHP 表单字段值的命名约定。

这是已经用于显示或隐藏表单部分的代码：

CakePHP 查看构建表单的代码：

echo $this->Form->create('Book', array('type' => 'file', 'id' => 'BookForm'));
echo $this->Form->input('is_part_of_series', array(
    'label' => __('Part of Series', true),
    'type' => 'checkbox',
    'id' => 'partOfSeries'));
echo '<div class="series">';
echo $this->Form->input('series_title', array(
    'label' => __('Series Name', true)));
echo $this->Form->input('series_sequence', array(
    'label' => __('Series Sequence', true)));
echo '</div>';
echo $this->Form->submit('Submit', array('class' => 'dark button inline', 'div' => false));
echo $this->Form->end();

显示或隐藏“系列”div的Javascript代码：

App.booksAdd = {
    init: function () {
    var self = this;

    if ($('#BookSeriesTitle').val() != "" || $('#BookSeriesSequence').val() != "") {
        $('#partOfSeries').attr('checked', "checked");
    }

    this.hideSeries();

    $('#partOfSeries').click(function() {
        self.hideSeries();
    });

    hideSeries: function () {
        if ($('#partOfSeries').attr('checked')) {
            $('div.series').show();
        } else {
            $('div.series').hide();
        }
    }
}

此代码根据系列标题和系列序列值是否为空来初始化选中状态。我不明白变量名称#BookSeriesTitle 和#BookSeriesSequence 是如何从CakePHP 表单上的series_title 和series_sequence 名称派生的。我在所有代码中搜索了这些名称，但在代码中的任何地方都没有这些名称的其他实例。

这是我要添加的附加代码：

CakePHP 查看构建表单的代码：

$hasAReleaseDate = empty($book['Book']['sales_start']) ? '0' : '1';
echo $this->Form->input('has_release_date', array(
    'label' => __('Specify release date', true),
    'type' => 'checkbox',
    'checked' => $hasAReleaseDate,
    'id' => 'hasReleaseDate'));
echo '<div class="releasedate">';
echo $this->Form->input('sales_start', array(
    'label' => __('Release Date', true),
    'dateFormat' => 'YMD',
    'minYear' => '1980', 
    'maxYear' => date('Y') + 1,
    'type' => 'date'));
echo '</div>;

显示或隐藏“发布日期”div 的新 javascript 代码：

if (document.getElementById("hasReleaseDate").val() == "1") {
    $('#hasReleaseDate').attr('checked', "checked");
}

this.hideReleaseDate();

$('#hasReleaseDate').click(function() {
    self.hideReleaseDate();
});

hideReleaseDate: function () {
    if ($('#hasReleaseDate').attr('checked')) {
        $('div.releasedate').show();
    } else {
        $('div.releasedate').hide();
    }
}

每次单击复选框时，新复选框都可以正常隐藏和显示“发布日期”div。但是，当页面最初显示时，根据数据的初始值，该部分没有正确显示或隐藏。

我相信问题出在：

if (document.getElementById("hasReleaseDate").val() == "1") {

因为它没有正确引用 hasReleaseDate 复选框字段的初始状态。

之前实现系列部分的代码没有使用表单复选框字段初始化 javascript 变量 #partOfSeries 选中状态，而是检查设置复选框时显示的两个字段的值。

对于新代码，这将不起作用，因为如果之前未设置，CakePHP 会将日期字段默认为今天的日期，因此它始终具有非空值。对于新代码，我需要 javascript 根据表单 hasReleaseDate 字段的检查状态初始化其检查状态。

我尝试尝试像现有代码一样使用对表单数据“#BookHasReleaseDate”的类似引用，但由于它不起作用并且我不明白命名的工作原理，然后我切换到看起来是在我发现“document.getElementById("hasReleaseDate")”的代码示例中更常见的命名。我无法让它工作，我无法确定我的问题是正确引用表单复选框的问题，还是尝试比较选中值是否为“1”的逻辑问题。

如果有人了解#BookSeriesTitle 命名约定如何引用 CakePHP 表单 series_title 字段，我将不胜感激学习它是如何工作的，以及帮助编写正确的方法来引用新的 hasReleaseDate 字段以初始化 javascript 的检查状态 $ hasReleaseDate 变量。

Answer 1

只需从您的 Javascript 中删除 if：

this.hideReleaseDate();

$('#hasReleaseDate').change(function() {
    self.hideReleaseDate();
});

hideReleaseDate: function () {
    if ($('#hasReleaseDate').attr('checked')) {
        $('div.releasedate').show();
    } else {
        $('div.releasedate').hide();
    }
}

hideReleaseData 函数可以满足您的需要。如果选中该复选框，则显示发布日期 div。如果没有，请隐藏它。 CakePHP 负责设置复选框的初始选中状态。

另外，您需要监听 change 事件而不是 click。这也捕获了键盘切换（即，切换到元素并点击空格）。

---

CakePHP 命名约定：[Model][FieldName]。所以，对于系列标题：

echo $this->Form->input('series_title', array(
    'label' => __('Series Name', true)));

查看字段名称series_title。我知道标签是“系列名称”，但这不相关。 CamelCase 它，所以它变成了 SeriesTitle。然后，在模型名称前面加上 Book：BookSeriesTitle。这将成为元素的 ID（Javascript 中的#BookSeriesTitle），除非您自己指定 ID。

例如：

echo $this->Form->input('is_part_of_series', array(
    'label' => __('Part of Series', true),
    'type' => 'checkbox',
    'id' => 'partOfSeries'));

通常，此元素的 ID 为 BookIsPartOfSeries，但会指定手动 ID partOfSeries。