Breaking up a Matrix Field for use in a SafeCracker Form

Recently I built a SafeCracker form that will never see the light of day. It was beautiful but the client didn't want to use it... But I digress. This for had your basic sign up form and then allowed you to add an additional attendee. The form was designed so that if a parent was bringing children they could add them by filling in a couple of fields and then clicking on Add Row for any additional children. Initially I created this functionality in the normal way by just adding the following to my code:

{field:cf_registration_add_attendees}

But that did not give me the custom look that I wanted. Plus, my matrix field actually have 8-9 fields in it so I wanted to break apart the Matrix field so that I could lay out the fields in a way that would make more sense for the user. I searched and searched the Matrix forum for hints on how to do this and found some info. In an effort to make this easier for my future self, here is an example of how you would do that:

Additional Attendees:

Add Row Remove Row

Notice that in the name of the fields there is a slight change from the normal parameter that you use to pass values to SafeCracker. In these you have cf_registration_add_attendees[row_new_0][col_id_7]. The col_id_7 points to the column ID of that particular field in the Matrix Field. I believe I went old school and used Firebug to inspect the Matrix Field when I was displaying the whole field in the SafeCracker form (for testing purposes).

This next part was provided by Carl Crawley of Made By Hippo. I could not, for the life of me, figure out why my Add Row code was not working. Carl thought to add the Div around the form with a class of Attendee and hook the javascript into that. He also worked out the bits where row_new_X where X gets incrementally higher with each added row. The javascript code is as follows:

Which attaches itself to the add/remove links from above.

So that's it. This example should be enough to get you to a working version on your SafeCracker form. Just make sure to include {safecracker_head} so all of the supporting javascript files are available and you should be good.