CakePHP 3：根据下拉选择隐藏表单字段

Question

您好，我有一张申请表，如图所示，其中有一个国籍的下拉列表。该表格供本地和国际申请人使用。

我想实现的是：案例 1：当本地申请人选择国籍（芬兰）时，应显示 NRC 和 Passport 字段，但仅显示 NRC 应该强制 CASE 2: when any other nationality is selected, the NRC field should be hidden and Passport field should be made mandatory.

我已经成功解决了案例 1，卡住的是案例 2。如何从控制器通过 JavaScript 函数实现案例 2？

这是我的表格

<div class="applicants form  content">
<h3><?= __('Personal Details') ?></h3>
<?= $this->Form->create($applicant, ['type' => 'file']) ?>
<?= $this->Form->hidden('new_applicant', ['value' => '1']) ?>
<fieldset>
    <h4><?= __('My Personal Details') ?></h4>
    <h6><i>Fields Marked With (*) Are Mandatory</i></h6>
    <div class="row">
        <div class="col-sm-4">
            <?= $this->Form->control('title', ['type' => 'select', 'options' => $titles, 'disabled' => $disabled]) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('portrait', ['type' => 'file']) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('first_name', ['required' => 'required', 'placeholder' => __('First Name'), 'disabled' => $disabled]) ?>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <?= $this->Form->control('other_names', ['placeholder' => 'Other Names', 'disabled' => $disabled]) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('last_name', ['required' => 'required', 'placeholder' => 'Last Name', 'disabled' => $disabled]) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('date_of_birth', ['id' => 'date_of_birth', 'required' => 'required', 'type' => 'text', 'placeholder' => 'YYYY/MM/DD', 'value' => $this->Time->format($applicant->date_of_birth, 'YYYY/MM/dd'), 'disabled' => $disabled]) ?>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-4">
            <?= $this->Form->control('marital_status', ['type' => 'select', 'required' => 'required', 'options' => $maritalStatus]) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('nation_id', ['options' => $nations, 'required' => 'required', 'label' => __('Nationality'), 'disabled' => $disabled]) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('gender', ['type' => 'select', 'required' => 'required', 'options' => $gender, 'disabled' => $disabled]) ?>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <?= $this->Form->control('nrc', ['id' => 'nrc', 'required' => 'required', 'type' => 'numeric', 'placeholder' => '000000/00/0', 'label' => 'NRC', 'disabled' => $disabled]) ?>
        </div>
        <div class="col-sm-4">
            <?= $this->Form->control('passport', ['placeholder' => 'Passport No.', 'disabled' => $disabled]) ?>
        </div>
    </div>
    <?= $this->Form->control('staff', ['type' => 'checkbox', 'label' => __('Member of Staff / Staff Dependent / Staff Spouse'), $checked]) ?>
    <div class="staff-form" <?= empty($checked) ? '' : 'style="display:block;"' ?>>
        <hr />
        <h4><?= __(' Member of Staff / Staff Dependent / Staff Spouse') ?></h4>
        <p>If you are either spouse, child or dependent of a member of staff, please fill-in the details below</p>
        <div class="row">
            <div class="col-sm-6">
                <?= $this->Form->control('staff_man_no') ?>
                <b>How are you related to Member of Staff?</b>
                <select>
                    <option value="child">CHILD</option>
                    <option value="spouse">SPOUSE</option>
                    <option value="memberOfStaff">MEMBER OF STAFF</option>
                </select>
            </div>
            <div class="col-sm-6">
                <?= $this->Form->control('staff_nrc_filename', [
                    'type' => 'file', 'class' => 'form-control', 'label' => __('Scanned copy of Staff NRC'),
                    '_file' => [
                        //
                        'deleteLink' => $this->Html->link(__(' [Delete]'), ['action' => 'deleteFile', 'staff_nrc_filename'])
                    ]
                ]) ?>
                <?= $this->Form->control('staff_personnel_data_filename', [
                    'type' => 'file', 'class' => 'form-control', 'label' => __('Latest Staff Personnel Data Form'),
                    '_file' => [
                        //'object' => $applicant,
                        'deleteLink' => $this->Html->link(__(' [Delete]'), ['action' => 'deleteFile', 'staff_personnel_data_filename'])
                    ]
                ]) ?>
                <?= $this->Form->control('birth_certificate_filename', [
                    'type' => 'file', 'class' => 'form-control', 'label' => __('Birth Certificate / Adoption Order'),
                    '_file' => [
                        //'object' => $applicant,
                        'deleteLink' => $this->Html->link(__(' [Delete]'), ['action' => 'deleteFile', 'birth_certificate_filename'])
                    ]
                ]) ?>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <?= $this->Html->link(__('<i class="glyphicon glyphicon-home"></i>Go To Dashboard'), ['controller' => 'Applications', 'action' => 'close'], ['class' => 'btn btn-primary', 'escape' => false]) ?>
        <?= $this->Form->button(__('<i class="fa fa-save"></i>Save and Continue'), ['escape' => false, 'class' => 'pull-right btn btn-success']) ?>
    </div>
</fieldset>
<?= $this->Form->end() ?>

这是我在 ApplicantsController.php

中的方法

public function edit()
{
    $applicant = $this->Applicants->findById(
        $this->request->session()->read('Auth.User.id'))
        ->contain(['Nations', 'Students'])->first();
    if(empty($applicant) && empty($this->request->getData('new_applicant')))
        return $this->verifyStudent();

    $applicant = empty($applicant) ? $this->Applicants->newEntity() : $applicant;

    if ($this->request->is(['patch', 'post', 'put']) && count($this->request->getData()) > 2) {
        $toSave = $this->Applicants->patchEntity($applicant, $this->request->getData());
        foreach ($this->fileFields as $field=>$name) {
            $toSave->set($field, empty($applicant->$field) ? null : $applicant->$field);
        }
        $toSave->set('id', $this->request->session()->read('Auth.User.id'));
        $toSave->set('completed', 1);

        if ($this->Applicants->save($toSave)) {
            $this->loadComponent('FileUpload');
            foreach ($this->fileFields as $field => $filename) {
                $this->_saveFile($toSave, $field, $filename);
            }
            if ($this->Applicants->save($toSave)) {
                $this->Flash->success(__('The applicant has been saved.'));
                $applicant = $toSave;
                if ($this->request->session()->check('Online.Application.id')) {
                    return $this->redirect(['controller' => 'ApplicantContacts', 'action' => 'edit']);
                } else {
                    return $this->redirect(['controller' => 'Applications', 'action' => 'add']);
                }
            }
        } else {
            $this->Flash->error(__('Failed to save, if problem persists, contact System Administrator.'));
        }
    }
    $nations = $this->Applicants->Nations->find('list', ['limit' => 300, 'valueField' => 'nationality'])
        ->where(['nationality is not'=>'TBA'])->orderAsc('nationality');

    /**$nations = $this->Applicants->Nations->find('list', ['limit' => 300, 'valueField' => 'description'])
        ->where(['code is not'=>' null'])->orderAsc('description');*/

    $titles = Utility::getTitles();
    $maritalStatus = Utility::getMaritalStatus();
    $gender = Utility::getGender();
    $this->set(compact('applicant', 'nations', 'disabilities', 'applicantContact', 'imagePath', 'gender', 'titles', 'maritalStatus'));
    $this->set('_serialize', ['applicant']);
    $this->viewBuilder()->setLayout('application');
}

这是 applicants.js 中的一个 javascript 函数，我一直在尝试创建它，它不完整

$('input[type=radio]').on('change', function(){
    if(tmp !== null) {
        tmp.hide();
    }
    tmp = $($(this).val()).show();
});

$('#nation_id').on('change',function(){
    alert('The text has been changed.');
});

我怎样才能实现我的目标，我们将不胜感激。

Answer 1

好吧，经过深思熟虑，我注意到 Cakephp 在 /webroot/js/ 文件夹中定义了它的 JavaScript 文件具体控制器。我所要做的就是创建一个 applicants.js 文件并修改我之前共享的 JavaScript 函数如下

$('#nation_id').change(function () {
    if ($(this).val() == 42) {
        $("#nrc_div").show();
        $('#passport_div').show();
        document.getElementById("nrc").required = true;
        document.getElementById("passport").required = false;
    } else {
        $("#nrc_div").hide();
        $('#passport_div').show();
        document.getElementById("nrc").required = false;
        document.getElementById("passport").required = true;
    }
});

值 42 是芬兰的 ID。然后我在 edit.ctp 表格中将 id 添加到我的 nrc div 和护照 div 中，如下所示：

NRC div

<div id="nrc_div" class="col-sm-4" style="display:none;">
            <?= $this->Form->control('nrc', ['id' => 'nrc', 'type' => 'numeric', 'placeholder' => '000000/00/0', 'label' => 'NRC', 'disabled' => $disabled]) ?>
        </div>

和护照 div

<div id="passport_div" class="col-sm-4" style="display:none;">
            <?= $this->Form->control('passport', ['placeholder' => 'Passport No.', 'disabled' => $disabled]) ?>
        </div>

CakePHP 3：根据下拉选择隐藏表单字段

CakePHP 3: Hide form field based on dropdown selection

javascript

cakephp

drop-down-menu

cakephp-3.0