Question

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.

Answer 1

Change the forms’ ID to a class instead. And then handle the form submit using .submit() instead of capturing click events on buttons. Inside the callback function use $(this) to refer to the form that is being submitted and don’t forget to prevent the default action by calling 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);
        });
    });
});