javascriptを使ってCakePHPフォームのセクションを非表示にする方法

Question

Javascriptを使用して、チェックボックスの値に基づいてCakePHPフォームのセクションを表示または非表示にしようとしています。

私はフォームの1つのセクションですでにこの機能が動作している既存の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(); 

JavaScriptコードDIV：

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>; 

新javascriptの "RELEASEDATE" のdivを表示したり隠しコード：

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(); 
    } 
} 

を

新しいチェックボックスが正常に機能しているので、チェックボックスをクリックするたびに "releasedate" divを非表示にして表示します。しかし、ページが最初に表示されるとき、セクションはデータの初期値に基づいて適切に表示されないか隠されません。

私はこの問題は、ライン上にあると信じて：

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

それが適切にhasReleaseDateのチェックボックスフィールドの初期状態を参照されていないため。

シリーズセクションを実装する前のコードでは、フォームチェックボックスフィールドを使用してjavascript変数#partOfSeriesチェック状態を初期化せず、チェックボックスが設定されたときに表示される2つのフィールドの値を確認しました。

CakePHPでは、日付フィールドがデフォルトでは設定されていない場合は今日の日付にデフォルト設定されているため、新しいコードでは機能しません。新しいコードでは、hasReleaseDateフィールドのチェックされたステータスに基づいて、チェックされたステータスを初期化するためのjavascriptが必要です。

私は、以前のコードのようにフォームデータ "#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は、チェックボックスのチェック状態を初期設定します。

さらに、clickの代わりにchangeイベントを聞きたいと思うでしょう。これは、キーボードのトグルをもキャッチします（つまり、要素へのタブ移動とスペースの打ち込み）。

---

CakePHPの命名規則[モデル] [フィールド名]。ですので、シリーズタイトルは

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

フィールド名はseries_titleです。私はラベルが "シリーズ名"であることを知っていますが、それは関係ありません。 CamelCaseそれで、それはSeriesTitleになる。次に、モデル名Book：BookSeriesTitleの前に追加します。あなた自身でIDを指定しない限り、これは要素のID（#BookSeriesTitleがJavascriptにあります）になります。例えば

：

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

通常、この要素はID BookIsPartOfSeriesが、マニュアルID、partOfSeriesが、代わりに指定されなければなりません。