CodeIgniter编辑页笔记模块点击保存按钮数据未传入数据库问题

问题原因汇总 #

1. 表单验证规则缺失导致新增/编辑笔记请求直接被拦截
   你写的savenotes和updatenote方法里都加了if($this->form_validation->run() == TRUE)的判断，但你没有为这两个接口定义任何表单验证规则，验证永远不通过，接口直接返回空，所以逻辑走不进数据写入的部分。
2. 编辑笔记的保存按钮没有绑定点击事件
   你页面里已有笔记的保存图标按钮（fa-save那个a标签）根本没有写对应的点击事件监听，点击后没有阻止默认行为，直接触发页面跳转/表单提交导致刷新。
3. 部分场景下e.preventDefault()未生效
   如果你的整个笔记区域是包裹在form标签内的，按钮type为submit，一旦JS出现执行报错（比如你代码里调用的leadnotesdocs方法没有定义），会导致e.preventDefault()没生效，表单直接提交刷新页面。
4. updatenote接口参数不匹配
   你updatenote里接收的是$this->input->post('leadnote')，但你编辑的时候根本没有把textarea的name设为leadnote，也没有写对应的提交逻辑，参数传空导致更新失败。

修复步骤 #

第一步：给两个笔记接口补充表单验证规则 #

在Controller的对应方法开头加上验证规则：

public function savenotes($id){
    // 新增验证规则
    $this->form_validation->set_rules('note', '笔记内容', 'required|trim');
    if($this->form_validation->run() == TRUE)
    {
        $maindata = array('contacts_id'=>$id,'note'=>$this->input->post('note'),'added_by'=>$this->session->userdata('clientsessuserid'));   
        $insid= $this->contacts_model->save_notes($maindata); 
        $contacts= $this->contacts_model->load($id,"refno");
        $this->contacts_model->saveactivity(array('object_ref'=>$contacts->refno,'object_id'=>$insid,'activity'=>'Note Added','action'=>'Added'));   
        echo $insid;exit; 
     } 
     // 验证失败返回0让前端提示
     echo 0;exit;
}

updatenote同理补充规则，同时修复原有查询逻辑错误：

public function updatenote($id){
    $this->form_validation->set_rules('leadnote', '笔记内容', 'required|trim');
    if($this->form_validation->run() == TRUE)
    {
        $maindata = array('note'=>$this->security->xss_clean($this->input->post('leadnote')));   
        $insid= $this->contacts_model->update_notes($maindata,array('notes_id'=>$id)); 
        // 修复原逻辑错误：$id是笔记ID，需要先查询对应联系人ID
        $note = $this->db->get_where('crm_contacts_notes', ['notes_id'=>$id])->row();
        $c= $this->contacts_model->load($note->contacts_id,"refno");
        $this->contacts_model->saveactivity(array('object_ref'=>$c->refno,'object_id'=>$insid,'activity'=>'Note Updated','action'=>'Updated'));  
        echo $insid;exit; 
    } 
    echo 0;exit;
}

第二步：补全编辑笔记的交互和点击事件 #

首先给编辑按钮、保存按钮加类名方便绑定事件，修改视图里的已有笔记行：

<td width="1%" align="center">
    <a class="edit-note"><i class="fa fa-pencil"></i></a>
    <a class="save-edit-note" data-url="<?php echo site_url('contacts/updatenote/'.$val['notes_id']) ?>" style="display:none"><i class="fa fa-save"></i></a>
</td>

然后在JS里补充编辑和保存的逻辑：

// 点击编辑按钮切换为编辑状态
$("#tableobj1").on("click", ".edit-note", function(e){
    e.preventDefault();
    const tr = $(this).closest('tr');
    const noteText = tr.find('.textnote').text().trim();
    // 把纯文本替换为可编辑textarea
    tr.find('.textnote').html(`<textarea name="leadnote" class="form-control">${noteText}</textarea>`);
    // 切换按钮显示状态
    $(this).hide();
    tr.find('.save-edit-note').show();
});

// 点击保存编辑按钮提交更新
$("#tableobj1").on("click", ".save-edit-note", function(e){
    e.preventDefault();
    const btn = $(this);
    const tr = btn.closest('tr');
    const noteVal = tr.find('[name="leadnote"]').val().trim();
    if(!noteVal) return;
    $.ajax({
        url: btn.data('url'),
        type: "post",
        data: {leadnote: noteVal},
        success: function(res){
            if(res > 0){
                // 替换回文本展示
                tr.find('.textnote').html(noteVal.replace(/\n/g, '<br>'));
                btn.hide();
                tr.find('.edit-note').show();
            }
        }
    });
});

第三步：修复页面刷新问题 #

• 把笔记相关的按钮type改成button避免触发默认表单提交：<button type="button" class="btn-sm savenotes"...>
• 确认leadnotesdocs方法已正确定义，方法报错会导致JS逻辑中断，页面直接刷新
• 可以打开浏览器控制台看是否有JS报错，快速定位异常点

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