Edit a CodeIgniter + AJAX multi-part form by showing all inputs to be changed

Question

Overview

This is my first time to create a complicated multi-part form with CodeIgniter.

I have a CodeIgniter multi-part form that relies on AJAX Post for submission (using jQuery Form Plugin ). I preview the form after successful validation for the user to check if their answers are all okay. They can submit it to the database via a Submit to database button or an Edit Form button to go back and change whatever they want to check and the cycle begins again!

Problem

My multi-part form has file inputs and dynamically added DOM elements (for example, a user can declare multiple addresses so four textboxes will be added via JavaScript) and I want these to be intact one Edit is hit.

I have several methods to attack but none works so far:

1. Simulate the browser back button - seems effective but I remembered that my controller's index() loads the new form view so it's useless.
2. Take all the data from the preview form, put them in an array, carry the array to the index() , count the occurrences of the dynamically added element and just show all of them - this one is pretty tedious and complicated for me. Plus I'm not sure if carrying all the $_POST data to an array is safe but it's the best one I can think of.

Do you guys have any suggestions or better methods to attack this kind of process?

Any help would be appreciated. Thank you.

Answer 1

You probably need to implement a solution based around your second option - and yes, it is tedious, but there's no other way of doing it. Some things to remember:

You need to think of a concise way to store your data. Addresses should be stored as one array element like this:

<input type="text" name="addresses[1][street]">
<input type="text" name="addresses[1][city]">
<input type="text" name="addresses[1][county]">

This will allow you to iterate succinctly over your data structure for front-end presentation:

<? foreach ($data['addresses'] as $number => $address): ?>
   <? foreach ($address as $address_item => $value): ?>
      <input type="text" name="addresses[<?=$number?>][<?=$address_item?>]" value="<?=$value?>">
   <? endforeach; ?>
<? endforeach; ?>

This will provide full control over your layouts, reducing the amount of JavaScript you'll have to use to stock your DOM (which is not as quick or efficient).