How to [Add More..]

jrahma

Hi,

In many website, I see a <select> for skills for example and below the <select> there is [Add More] link which will show new <select> below the existing one to add additional skills.

How can I implement such thing using JQuery and PHP?

Thanks,
Jassim

bradgrafelman

Server-side: Use a field name that ends with square brackets (i.e. "skills[]") such that the corresponding index in the $POST array (i..e $POST['skills']) will be an array of the values chosen.

Client-side: Use something like jQuery's .clone() method to clone the <select> elements as needed.

jrahma

bradgrafelman;11035357 wrote:
Server-side: Use a field name that ends with square brackets (i.e. "skills[]") such that the corresponding index in the $POST array (i..e $POST['skills']) will be an array of the values chosen.

Client-side: Use something like jQuery's .clone() method to clone the <select> elements as needed.

sorry I didn't understand the POST part. I have member_skill field which wll recieve the skill <select> value... How can I do it if that might have have multiple skills? shall I create member_skill1, member_skill2, etc? is that what you mean?

johanafm

jrahma;11035373 wrote:
sorry I didn't understand the POST part.

name="posted_as_array_due_to_brackets[]"

if (isset($_POST['posted_as_array_due_to_brackets']))
    foreach ($_POST['posted_as_array_due_to_brackets'])

jrahma;11035373 wrote:
shall I create member_skill1, member_skill2, etc? is that what you mean?

No, creating var1, var2, var3 or varA, varB, varC is almost certain to be very bad. That's when you are supposed to use arrays or some other data structure designed with aggregation in mind. Or normalizing your schema if you're dealing with it in a relational database.

How you actually go about doing it in a browser is up to you. One single select with multiple attribute set is one way. "Moving" selected choices from one select box into some kind of list (another multiple select box, several text inputs or whatever you please) is another. Adding a new select box for each desired choice is a third.