0

I have the following code that needs to be duplicated:

<form method="post">
<div id="field-row-container">
    <div id="field-row-1" class="field-row">
        <div class="field-element">
            <label for="Name[1]">Name</label>
            <input type="text" id="Name[1]" name="Name[]" />
        </div>
        <div class="field-element">
            <label for="Email[1]">Email</label>
            <input type="text" id="Email[1]" name="Email[]" />
        </div>
        <hr/>
    </div>
</div>
<div class="form-element">
    <input type="button" class="confirm add-field-row" value="Add" />
    <input type="button" class="danger delete-field-row" value="Delete" />
    <input type="submit" />
</div>

The duplicated / dynamically added elements will have the same names of Name[] and Email[] but their ID's will be incremented.

The JavaScript is below, based from Josiah Ruddell's form duplication script.

var template = $('#field-row-container #field-row-1').clone();
window.addForm = function () {
        var parent = $(this).closest('.dynamic-rows').attr('id');
    var fieldRowCount = countRows(parent) + 1;
    var newFieldRow = template.clone().find(':input').each(function () {
        var newId = this.id.substring(0, this.id.length - 3) + "[" + fieldRowCount + "]";

        $(this).prev().attr('for', newId); // update label for
        this.id = newId; // update id and name (assume the same)
        $(this).closest('.field-row').addClass('new-row');
    }).end()
        .attr('id', 'field-row-' + fieldRowCount)
        .appendTo('#field-row-container');
}
$('.add-field-row').click(addForm);

Whenever I submit the form to CodeIgniter and if there is a validation error, once the controller reloads the multi-part form, the dynamically added elements disappear as well as the values in the initial fields.

How do I go around this problem? I'm at a loss on how to solve this...

Other notes that might help:

  1. This is a component multi-part form with only one form controller
  2. I have multiple instances of this - Addresses, Education Degrees and such
  3. I use CodeIgniter's form_validation library to check server-side each array of posts
Community
  • 1
  • 1

1 Answers1

0

When the page with the form on reloads after the controllers redirects back to it after failing validation, it will only reload the original page, with no DOM manipulations applied.

I would perform the POST request which submits the form via ajax, so you can handle the response without leaving the page. Something like this:

$.post('/locationOfController.php', $('#yourForm').serialize(), function(response){
  if(response.valid){
    window.location.href = '/somewhereAfterFormPosted.php';
  } else {
    $('#yourForm').append("<p>"+response.error+"</p>");
  }
}, 'json');

and change the controller to return a JSON object based on whether validation passed or not. To match up with my example above, you would return something like below when an error occurs:

{valid: false, error: 'Please fill out the whole form'}

Try something like that as a basic example. You could do much more, such as returning several errors if multiple fields are invalid.

james246
  • 1,884
  • 1
  • 15
  • 28
  • Thank you for the enlightening answer. I'll try it now! –  Feb 10 '13 at 12:38
  • Do you know a solid article covering this topic? –  Feb 11 '13 at 15:15
  • I don't use CodeIgniter so I can only offer what a Google search brings up, but this might be useful: http://darrenonthe.net/2011/05/10/get-codeigniter-form-validation-errors-as-an-array/ -- it looks like it shows you how to return your form errors as an array, which you can return as JSON. In your ajax success function, you can then loop through the array and append each error after the relevant input field if you put a naming convention in place to allow you to match up each error with its field. – james246 Feb 11 '13 at 16:20
  • Thank you very much for the heads up. I working through it now. –  Feb 12 '13 at 03:09