Question

When a user adds an event, they need to be able to add Bands from the “bands” table to the event. It’s already all set up with the HABTM, and I have it working when I hard-code multiple select boxes to the page.

The problem is – I’d like to just have one select box, then an “add another band” button – which would add another select input with the list of bands – and so on – as many as they’d like.

I found this post: Add and remove form fields in Cakephp which explains how to add a field dynamically… my issue is, the list of bands is huge, and changes regularly, so I can’t imagine this working for me.

Any ideas on the best way to go about this? – Adding a select input dynamically that’s populated with a list of bands from my database? Ajax maybe? (I’ve no idea how to do ajax with cake yet) Ajax seems ok, but do I really want to pull a list of bands every time the user clicks the “add a band” button? Maybe that’s ok?

Any help/direction is greatly appreciated. Code example would be GREAT, but if nothing else, a nudge in the right direction would be very helpful.

Answer 1

You could use a single select input with an ‘add band’ button. When the user hits ‘add band’, catch the event with javascript, copy the selected band to a list (visually), and add the id to a hidden input (to be used when the form is submitted). jQuery/CakePHP example below.

<ul id='band_list'></ul>
<?php echo $form->create('Event', array('id'=>'event_form'));?>
<?php echo $form->input('band_ids', array('type'=>'hidden', 'id'=>'band_ids')); ?>
<?php echo $form->input('bands', array('type'=>'select', 'options'=>$bands, 'id'=>'bands_selector')); ?>
<button id='add_band'>Add Band</button>

<script type='text/javascript'>
    var band_count = 0;
    $('#add_band').click(function(event) {
        event.preventDefault();
        $('<li>' + $('#bands_selector option:selected').text() + '</li>').appendTo('#band_list');
        $('<input type="hidden" name="data[Band][Band]['+band_count.toString()+']" value="'+$("#bands_selector option:selected").val()+'">').appendTo('#event_form');
        band_count++;
    });
</script>