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 checked状态，而是检查了设置复选框时显示的两个字段的值。

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

我尝试使用与表单数据“#BookHasReleaseDate”类似的引用，就像现有的代码一样，但由于它不起作用，我不明白命名是如何工作的，然后我切换到看似似乎是在代码示例中更常见的命名我发现“document.getElementById（”hasReleaseDate“）”。我无法以任何方式使其工作，并且我无法确定我的问题是否正确引用表单复选框的问题，或者如果检查的值为“1”则尝试比较的逻辑问题。 / p>

如果有人理解#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。

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

1 个答案: