Adding a select input dynamically using CakePHP

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.

@Dave: "adding a select input dynamically". The fact that the question is about CakePHP is in the question tags. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented May 2, 2011 at 17:12
@Tom - I didn't realize there were title police. :) My opinion is that "CakePHP" is a relevant portion of the title and will help to explain the nature of the question. If you have the authority to change it, by all means go ahead, but I think you're incorrect. "Select" is also a tag, yet it's ok to leave that in? What about "input"? - that's a tag too. Heck even "dynamic" is a tag I believe. — Dave
– Dave, Commented May 2, 2011 at 18:33
@Dave: Stack Overflow is a community, and as such everyone has the authority to change it. The vast majority [all?] of your 28 questions lead with "CakePHP - ", which is something tags were created in order to avoid, so that this information can be programmatically indexed, and presented in a consistent fashion. Tags and the title go hand-in-hand to provide a summary of what the question is about; the title is not on its own! — Lightness Races in Orbit
– Lightness Races in Orbit, Commented May 2, 2011 at 19:21

Tyler · Accepted Answer · 2011-05-03 02:59:09Z

3

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>

edited May 3, 2011 at 2:59

answered May 2, 2011 at 16:31

Tyler

2,1261 gold badge12 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dave Over a year ago

ooh.. I like this idea... gonna try it out, thanks! Will mark as answer if/when I get it to work, but - sounds like a great way to go!

Dave Over a year ago

the button literally just refreshes the page... :( I think I'm doing everything like what you have above - any thoughts?

Dave Over a year ago

Yah - even on a test page where I copy/paste that code, it's not working.. i verified i'm including the jquery.js (/jquery/1.5/jquery.min.js)

Dave Over a year ago

got it working - using your concept, but changed code around - it won't let me select my own answer for 24 hours after posting, so feel free to change your answer accordingly, and let me know - I'd rather give you credit for the right answer since you led me to it. Thanks again! (will be posting answer shortly)

Tyler Over a year ago

Hey thanks, and glad it put you on the right track. I had written it without testing, but have updated to your working version above.

Collectives™ on Stack Overflow

Adding a select input dynamically using CakePHP

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related