0

I have a view called volunteer_edit. Within volunteer_edit, I use jQuery to loop through an array of project ID's and, for each project ID, create a tab. The jQuery tabs plugin turns each link within an unordered list item into a tab that is filled with the html to which the link points:

/** 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>

In my case, each links sends a different project id as a parameter to a view called project_edit. Within project_edit there is a form:

<!-- 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>

When the form is submitted I use $this->input->post() to get the contents of the form's input elements so I can supply them to my database:

/** 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 all works perfectly on the first tab. However, on every subsequent tab, when the form is submitted, the first tab's contents are supplied to $this->input->post(). I assume this is because, when switching between tabs, the inactive tabs remain on the page and have their "display" property set to "none". Therefore, only the first element with the name attribute matching the first parameter of $this->input->post() makes it into the post array (the first input with name="title", the first input with name="project", etc).

How can I overcome this limitation? I would prefer that only the active (currently displayed) tab be submitted.

4

2 回答 2

0

每页只能有一个带有名称的 ID，并且 POST 请求来自框架 a name，而不是 ID。

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

于 2012-02-03T13:58:56.740 回答
0

改为将表单的 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);
        });
    });
});
于 2012-02-04T01:30:28.663 回答