模态框弹出后表单视图数据丢失/重置问题求助

我的表单包含一个状态下拉列表，选择新选项时会通过onchange属性调用函数弹出模态框用于收集用户额外文本输入。但关闭模态框提交表单后，控制器无法检测到已变更的状态值，选中的状态值似乎丢失了。下拉框可正常触发函数弹出模态框，目前函数仅用于显示模态框，无其他操作。原本无模态框时，选择新值后提交表单，控制器可正常识别状态变更；添加模态框后则出现问题。

以下是视图中表单、模态框及函数的代码：

<?php $form = ActiveForm::begin([
    'id'=>'formSave',
    "class"=>"ph-form__inline", 'method' => 'post',
    'fieldConfig' => [
    'template' => "{input}",
    'options' => [
    'tag' => false,
    ],
    ],
]); 
?>  

<?= $form->field($model, 'status')->dropDownList($model->listAllowedStatuses($model->status),["prompt" =>'Select Status', "class" => "ph-form__inline", "id"=>"selStatus", "name"=>"selStatus", "onchange"=>"inputReason()"])->label(false)?>

<!-- Modal -->
<div class="modal fade" id="inputModal" tabindex="-1" aria-labelledby="input" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Please input (optional) reason for change:</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <?= $form->field($model, 'status_update_message')->input("text",["class" => "ph-form__input__field", "name"=>"textInput", "id"=>"textInput"])?> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="save()", id="save" name="save">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
    function inputReason(){
        $("#inputModal").modal('show');
    }
</script>
<?php ActiveForm::end(); ?> 

问题原因及修复方案 #

• 问题根源：手动为下拉框和模态框输入框指定了name属性，破坏了Yii ActiveForm与模型的绑定逻辑。ActiveForm默认会生成带模型前缀的字段名（如ModelName[status]），控制器正是通过这个前缀来匹配模型属性获取值，手动覆盖name后，控制器无法正确识别字段。

• 修复步骤：

  1. 移除下拉框的name属性，让ActiveForm自动生成正确的字段名：

     <?= $form->field($model, 'status')->dropDownList($model->listAllowedStatuses($model->status),["prompt" =>'Select Status', "class" => "ph-form__inline", "id"=>"selStatus", "onchange"=>"inputReason()"])->label(false)?>
     

  2. 移除模态框中文本输入框的name属性，保留自动生成的绑定名称：

     <?= $form->field($model, 'status_update_message')->input("text",["class" => "ph-form__input__field", "id"=>"textInput"])?>
     

  3. 修改save()函数，确保关闭模态框后提交表单：

     function save(){
         $("#inputModal").modal('hide');
         $("#formSave").submit();
     }
     

修改后，ActiveForm会维持正常的模型字段绑定，控制器就能通过$model->status和$model->status_update_message获取到对应的表单值。

内容的提问来源于stack exchange，提问作者Raul Rocamora