在使用 CodeIgniter 的输入类处理输入名称时，如何克服重用输入名称的需要？

Question

我有一个名为 Volunteer_edit 的视图。在volunteer_edit 中，我使用jQuery 循环访问项目ID 数组，并为每个项目ID 创建一个选项卡。 jQuery 选项卡插件将无序列表项中的每个链接转换为一个选项卡，其中填充了链接指向的 html：

/** Print the li elements that gets turned into tabs by jQuery **/
<ul>
<?php foreach ($projects as $project): ?>

    <li><a href="project_edit/<?php echo $project['id'] ?>"><?php echo $project['name'] ?></a></li>

<?php endforeach ?>
</ul>

在我的例子中，每个链接将不同的项目 id 作为参数发送到名为 project_edit 的视图。在project_edit中有一个表单：

<!-- Form contained within a typical tab -->
<form id="proj_form">
    <label for="title">Title:</label><input type="text" value="Comm. Ag. Ext." name="title" />
    <label for="project">Project:</label><input type="text" value="Agriculture" name="project"/>
    ...
    <br/><button type="button" name="proj_submit">Update Project</button><br/>
</form> 

提交表单时，我使用$this->input->post()来获取表单输入元素的内容，以便我可以将它们提供给我的数据库：

/** I handle the form's submit and send the form contents to an 'update' method of the project_edit class **/
$(function(){
    $('button[name="proj_submit"]').click(function(){
        vol_params = $('#proj_form').serialize();
        $.post('project_edit/update', vol_params, function(data) {
            console.log(data);
        });
    });
});

/** Inside the project_edit model **/
$data = array(
    'title' => $this->input->post( 'title', true ),
    'project' => $this->input->post( 'project', true ),
    ...
    );

$this->db->update( 'projects', $data, array( 'id' => $this->input->post( 'proj_id', true ) ) );

这一切都在第一个选项卡上完美运行。但是，在每个后续选项卡上，当提交表单时，第一个选项卡的内容将提供给 $this->input->post()。我认为这是因为，在选项卡之间切换时，非活动选项卡保留在页面上，并将其“显示”属性设置为“无”。因此，只有 name 属性与 $this->input->post() 的第一个参数匹配的第一个元素才会进入 post 数组（第一个输入的 name="title" ，第一个输入为 name="project" 等）。

我怎样才能克服这个限制？我希望仅提交活动的（当前显示的）选项卡。

Answer 1

将表单的 ID 更改为类。然后使用 .submit() 处理表单提交，而不是捕获按钮上的点击事件。在回调函数内部使用 $(this) 引用正在提交的表单，并且不要忘记通过调用 preventDefault() 来阻止默认操作

$(function(){
    $('form.proj_form').submit(function(e){
        e.preventDefault();
        vol_params = $(this).serialize();
        $.post('project_edit/update', vol_params, function(data) {
            console.log(data);
        });
    });
});

Answer 2

每页只能有一个带有名称的 ID，并且 POST 请求会帧名称，而不是 ID。

最好发布您的代码，以便我们可以看到 HTML 是如何组合在一起的。