How to repopulate form table rows that were generated dynamically with java script

[eluser]iamzvonko[/eluser]
I have an input form that’s used to specify information about a “volunteer”. The volunteer can be a single person or a group of people. At the bottom of the form there is a checkbox that’s selected when the information is about a group of people. When it’s selected, I use jquery to show a DIV that has a table (initially just 1 row) where information about the other members of the group can be entered.

The user can click an image to trigger a jquery script function that will dynamically add a row to the table.

My problem is that I can’t figure out how to repopulate the values in the row(s) if the form has to be redisplayed because of a validation error. Since I’m generating the HTML with script, I can’t put in PHP code because it gets interpreted at the time the page is loaded.

Maybe there is a better way to do this whole thing (and I’m open to suggestions) but here’s what I have now.

Thanks in advance for any help.

Here’s the jQuery script to add new row:

Code:

function addMember() {  
  var $counter = parseInt($("#rowCounter").val());
  if ($counter > 1) {
    var $firstName = "#firstName"+$counter;
    var $lastName = "#lastName"+$counter;
    var $email = "#email"+$counter;
    if ($($firstName).val() == "" && $($lastName).val() == "" && $($email).val() == "") {
     alert("You must fill out member row before adding another!");
     return false;
    }
  }
   $memberRowNum = $counter;
    $counter+=1;
    var $appendVal = '<tr><td>'+$memberRowNum+'&lt;input type="hidden" name="volID'+$counter+'" id="volID'+$counter+'"&gt;&lt;/td>';
    $appendVal += '<td>&lt;input type="text" name="firstName~~" id="firstName~~" size="15" &gt;&lt;/td>';
   $appendVal += '<td>&lt;input type="text" name="lastName~~" id="lastName~~" size="20" &gt;&lt;/td>';
   $appendVal += '<td>&lt;input type="text" name="email~~" id="email~~" size="25" &gt;&lt;/td>';
   $appendVal += '<td align="center">&lt;input type="checkbox" name="student_~~" id="student_~~"  /&gt;&lt;/td>';
   $appendVal += '<td><select name="grade_~~" id="grade_~~"><option value=""></option><option value="13">College</option></option><option value="12">12th</option><option value="11">11th</option><option value="10">10th</option><option value="9">9th</option><option value="8">8th</option><option value="7">7th</option><option value="6">6th</option><option value="5">5th</option><option value="4">4th</option><option value="3">3rd</option></select></td>';
    $appendVal += '</tr>';
   $appendVal = $appendVal.replace(/~~/g,$counter);  
   $appendVal = $appendVal.replace(/@@/g,"?");  
   $(".groupMembers > tbody:last").append($appendVal);
    $("#rowCounter").val($counter);
}

Here’s the HTML/PHP snippet after which, the row(s) are appended:

Code:

<li><label>Are you registering as Group?</label>&lt;?php echo form_checkbox($asGroup);?&gt;
<span id="handleGroupInfo">
  <br>Group Name:&lt;?php echo form_input($groupName);?&gt;
  <br><br>List names and emails of all group members below. Click plus sign to add more members to group<br>
  <table class="groupMembers">
   <tbody>
    <th>&nbsp;&nbsp;<img id="add_row" alt="Add Group Member"
     src="&lt;?php echo base_url();?&gt;assets/images/green-plus-sign-tiny.png" />&nbsp;&nbsp;</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>email</th>
    <th>Student?</th>
    <th>Grade</th>
  </tbody>
  </table>
</span>
</li>
</ul>

[eluser]InsiteFX[/eluser]
CodeIgniter User Guide - HTML Table Class

[eluser]iamzvonko[/eluser]
Thanks for the quick reply. Yet another cool feature of CI that I didn't know about.

I'll definitely use that in the future when generating tables of data. However, I still don't understand how I can use it to build input fields AND repopulate the values of those fields when I have to re-load the form after validation errors.

Can you point me to an example?

Thanks again

[eluser]InsiteFX[/eluser]
You will need to use the CI form_helper and create a function to clear out all your data, thats why I showed you the HTML Table Class, it has a method to clear out all the table data.

[eluser]Aken[/eluser]
Insite, I don't think you get what he's asking.

iamzvonko, your controller that accepts the POST values should be going through them, checking for any additional fields generated dynamically, and then passing something to the view specifying how many fields to generate. It should be pretty easy if your fields are in array notation, because then you can just generate an array of field values, pass it to the view and then loop it to display the repopulated fields.

[eluser]iamzvonko[/eluser]
Insite - thanks again for the info about the HTML table class. It wasn't exactly what I was looking for this time but I will definitely use it in the future.

Aken - I suspected that's what I'd have to do but I was hoping there would be some cleaner way that CI provided behind the scenes. Oh well, that's what I did and it's working just great.

Thanks again.

z