Dynamically adding more input text fields for Tabular Input


I am using the Tabular Input to batch insert/delete/update multiple items (Well, it’s just an AR save(); ). Let’s say I have one product name field and one price field (so it’s a little bit simpler than the example).

With the help of jQuery I’d like to add more input text fields and also be able to remove text fields if the entry should be deleted.

So I was thinking of simply counting how many existing product name field (or price fields) there are and then to generate a new text field in the format:

<input name="ModelName[>>NEW-INT<<][price]" id="ModelName_>>NEW-INT<<_price" type="text" maxlength="11" value="10">

Is this something you’d recommend or do you have a better solution to accomplish this task?

Also, I think I am running into a problem if I remove a productName/price pair since this particular INT will be missing and running the foreach loop would throw an error, right?

foreach($items as $i=>$item)




            $valid=$item->validate() && $valid;


Please let me know your thoughts :)


For the jQuery part, I guess it depends on your items. Let me tell you a real use case I had:

I have a model A, and linked model B (1 A has many B). Model B are uploadable documents. I use jQuery (and Valums uploader) to handle that, and since the user can delete a document before saving the model A, I don’t rely on counting DOM items since it can be misleading particularly when we are in the model’s update scenario (new records are not as sensitive).

Well I don’t know if what I say above make sense to you. Anyway, my solution was to handle the number of related models in a hidden field. That way, I only increment that field value. So technically I can end up with 100 as that field value, while there are only 10 documents left in the DOM.

As I said in the beginning, that is helpful in the update scheme, as I start the field value with the count of related models. So, if it’s a new record, the hidden field value will have 0.

Since I deal with a related model, I have to save the main model first, and deal with the related model in the afterSave method. I use a standard foreach loop like you did using if(isset(…)).

Btw, I don’t delete the DOM nodes in the update scheme, they’re still present in the $_POST array, so I can still check if they are supposed to be deleted from the DB or not, because I set some attribute to some value when the user deletes a node, then I hide that node.

I’m sorry if that’s too mixed up and/or confusing.

That’s awesome! It sounds like this is exactly the same thing what I am trying to do. Not necessarily with documents but still - the logic should be the same. I will follow your idea and have a hidden input field for removed elements. So I will not remove them from the DOM but just hide them. Sounds like a plan :)

Thanks bennouna!!

Check out my 'improved jRelcopy extension. Does everything you are looking for.

I just use jQuery’s clone() if I am duplicating existing inputs (or input sets).

I’m currently working on a music application and when it comes to adding tracks to a release, I start with one set of inputs, then if another set is required for the next track a click will clone the lot. You need to make sure you update ID’s, since Yii will always attach an ID to form inputs and empty any new text inputs.