Joomla! component form and jQuery to add/remove subset of fields dynamically

Question

I have a Joomla component for managing workshops, called com_workshops with its corresponding table, jos_workshops.

Then I have the core com_users component, with its jos_users table.

I have a link table, jos_works_users in order to associate users to workshops (N,N).

I know how to add a form field type="user" so I can select from the users modal view a user.

But I would like the form to be able to add as many form field types like this one as I

want, and to remove them dynamically. I'm thinking about

jQuery (append(), clone(), remove() functions)

But don't know if it's possible inside a Joomla! form, and how to do it.

Answer 1

I have made a similar field, although I used mootools. If I were you I'd create a new field type ( Joomla docs ) and add some javascript to the page using JHTML::script(). You need to use a input name like jform[userids][] so that the browsers can pass a array of user ids.

My case was not exactly like yours, but this is pretty much how I did it:

My HTML looked like this (note that it has two text fields per row):

<div id="ingredientList1">
    <div class="ingredient-row">
        <div class="delete"></div>
        <input type="text" class="amountField" style="display: block; " name="jform[ingredientAmounts][]">
        <input type="text" class="nameField" style="display: block; " name="jform[ingredients][]">
    </div>
    <div class="ingredient-row">
        <div class="delete"></div>
        <input type="text" class="amountField" style="display: block; " name="jform[ingredientAmounts][]">
        <input type="text" class="nameField" style="display: block; " name="jform[ingredients][]">
    </div>
    <div class="ingredient-row">
        <div class="add"></div>
        <input type="text" class="amountField" style="display: none; ">
        <input type="text" class="nameField" style="display: none; ">
    </div>
</div>

Your javascript should:

1. Remove a row (in mootools: row.dispose()) when user clicks the delete button.
2. Make the last row visible and create a new hidden one when add button is clicked.
3. Have a method that can load previous data from DB.
4. Add code to your table in load (to select your user ids) and store (to save them to db).