Question

I have a form that can be manipulated on the client’s browser via javascript (i.e. rows can be added, deleted, etc). I would like to somehow send this form data back to the server, but I’m not sure what the best approach would be.

One approach I thought of would be to dynamically generate ids for each row that gets added to the form, but I see this getting really messy when I try to parse the POST data back in my CakePHP controller.

Another approach that came to mind would be to parse the form clientside, generate a JSON or XML structure that can be more easily iterated over, and send that back to the controller. I’m not sure how to go about implementing something like this though.

What do you guys think the best solution for this is?

<?php echo $this->Html->script('jquery-1.7', FALSE); ?>
<h2>Assign Responses</h2>
<a id='addResponseLink' href='#'>Add a Response Action</a>
<?php 
$this->Js->get('#addResponseLink');
$this->Js->event('click', "$('#responseActionsTable').append('<tr style=\'display:none\' id=\'row\'>".
    "<td>".$this->Form->input('trigger_word')."</td>".
    "<td>PROCEED"."</td>".
    "<td>5"."</td>".
    "<td><a id=\'removeLink\' href=\'#\'>Remove</a></td>".
    "</tr>');".
    "$('tr').last().fadeIn();".
    "$('#removeLink').live('click', function() { $(this).closest('tr').fadeOut().delay(1500).queue(function() $(this).remove()); })");
?>
<?php
echo $this->Form->create(array('action' => 'assignResponsesSave'));
?>

<table id='responseActionsTable'>
    <tr>
        <th>Trigger Word</th>
        <th>Action</th>
        <th>Next Question</th>
        <th>Remove</th>
    </tr>

    <?php foreach($responseActions as $responseAction): ?>
        <tr>
            <td><?php echo $this->Form->input('trigger_word', array('default' => $responseAction['responses_actions']['trigger_word'])); ?></td>
            <td><?php echo($responseAction['responses_actions']['action']); ?></td> <!-- This and the next sibling will be inputs -->
            <td><?php echo($responseAction['responses_actions']['next_question']); ?></td>
            <td>Remove</td>
        </tr>
    <?php endforeach; ?>
</table>
<?php echo $this->Form->submit('Save Changes'); ?>
<?php echo $this->Form->end(); ?>

<?php echo $this->Js->writeBuffer(); ?>

Answer 1

If your inputs have names like data[Model][0][field], data[Model][1][field] (corresponding to $this->Form->input('Model.0.field') etc), then in the controller you can give the POST’d data to saveMany (Cake 2.x) or saveAll (Cake 1.x) and it will save multiple records.

It should be straightforward to have jQuery create new form inputs corresponding to this scheme.