在CodeIgniter中使用onclick事件存储额外字段数据的问题

我明白你遇到的问题了——在普通PHP里能正常工作的动态字段添加，到了CodeIgniter里用form_input()就失效了。这其实是服务器端代码和客户端代码执行顺序的问题，咱们一步步来解决：

为什么用form_input()的写法不行？ #

PHP是服务器端语言，页面加载时所有PHP代码都会先执行完毕，然后把生成的HTML发送给浏览器。你把<?php echo form_input(['name'=>'bankdetail']);?>写在JS字符串里，服务器只会把这段PHP代码当成普通文本输出到JS里，浏览器执行JS时只会看到这段字符串，不会再去解析执行PHP，所以自然不会生成正确的输入框。

下面给你几个可行的解决方案：

方案1：提前生成字段并隐藏，点击时显示 #

这个方法最稳妥，让CI提前生成好输入框，默认隐藏，点击单选框时再显示出来：

<!-- 单选框部分 -->
<div class="radio">
    <?php echo form_radio('bank', 'Online Payment', FALSE, ['onclick'=>"toggleBankFields(true)"]); ?>
    <?php echo form_label('Online Payment', 'bank');?><br>
    <?php echo form_radio('bank', 'Cash', FALSE, ['onclick'=>"toggleBankFields(false)"]); ?>
    <?php echo form_label('Cash', 'bank');?>
</div>

<!-- 提前用CI生成银行详情字段，默认隐藏 -->
<div id="bankFields" style="display:none;">
    Enter Bank Details<br>
    <?php echo form_input(['name'=>'bankdetail']);?>
</div>

<script>
function toggleBankFields(show) {
    const fields = document.getElementById("bankFields");
    fields.style.display = show ? "block" : "none";
}
</script>

方案2：在JS中直接写原生HTML输入框 #

如果不想提前生成字段，也可以直接在JS里写原生HTML，只要保证name属性和CI后端接收的一致就行：

<div class="radio">
    <?php echo form_radio('bank', 'Online Payment', FALSE, ['onclick'=>"add_fields()"]); ?>
    <?php echo form_label('Online Payment', 'bank');?><br>
    <?php echo form_radio('bank', 'Cash', FALSE, ['onclick'=>"clear_fields()"]); ?>
    <?php echo form_label('Cash', 'bank');?>
</div>

<p id="content"></p>

<script>
function add_fields() {
    const d = document.getElementById("content");
    d.innerHTML = "Enter Bank Details<br /> <input type='text' name='bankdetail' />";
}

function clear_fields() {
    const d = document.getElementById("content");
    d.innerHTML = "";
}
</script>

后端接收数据的时候，和普通字段一样用CI的输入类获取：

$bankDetail = $this->input->post('bankdetail');

方案3：将CI生成的字段HTML存入JS变量 #

如果一定要用form_input()生成字段，可以在页面加载时把生成的HTML存在一个JS变量里，之后JS直接用这个变量：

<script>
// 页面加载时，让CI生成输入框的HTML并赋值给JS变量
const bankInputHtml = "<?php echo addslashes(form_input(['name'=>'bankdetail'])); ?>";

function add_fields() {
    const d = document.getElementById("content");
    d.innerHTML = "Enter Bank Details<br /> " + bankInputHtml;
}

function clear_fields() {
    const d = document.getElementById("content");
    d.innerHTML = "";
}
</script>

这里用addslashes()是为了转义HTML里的引号，避免JS语法错误。

不管用哪个方案，记得测试后端是否能正常接收到bankdetail字段的数据，确保表单的method是POST，并且CI的CSRF保护（如果开启的话）也能正常工作（动态添加的字段不需要额外处理CSRF，只要表单里有CSRF令牌就行）。

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