Adding Dynamic Field to Forms (Chronoform) - php

Question

I am using the popular ChoronoForm plugin for Joomla. I have created a form which contain dynamic fields. A javascript function is used to add multiple "items". A User clicks on the button "Add another item" and the item field is redisplayed for them to insert additional "items". Similar to the form on this website http://www.unclesmoney.co.uk/home3.php (Fill in the Item Details Section and click on "add another item"). When the form is submited the information is sent via email. The problem, only the item that was inserted last is sent and other itens are ignored (not sent) e.g. if I fill out the form with 2 or more items only he detail of the last item that was filled out is sent. Assume I have to write some php or javascript to pass these values to the html template or is there a more simple way? either way I can do with some pointers on how to do acheive this. There is a similar thread on this forum which was a great help but it doesnt show how to modify the html template. Thanks
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Item Type:</label>
<select class="cf_inputbox validate-selection" id="select_19" size="1" title="" name="select_19">
<option value="">Choose Option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Detail</label>
<textarea class="cf_inputbox required" rows="3" id="text_2" title="Please enter Item Detail" cols="30" name="text_2"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">File</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_3" name="file_3" type="file" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">File 2</label>
<input class="cf_inputbox required validate-number" maxlength="150" size="30" title="Must contain a value" id="text_4" name="text_4" type="text" />
</div>
<div class="cfclear"> </div>
</div>
</div>
<span id="writeroot"></span>
<input type="button" value="Add Another Item" onclick="moreItems()" />
.....
Javascript
var counter = 0;
function moreItems() {
counter++;
var newFields = document.getElementById('readRoot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

Answer 1

Chronoforms does a simple replacement in the email template to fill in the form values. Unless you've some code to manipulate that, it is only expecting a single value. What you need to do is add some PHP in the "On Submit Code - before sending email" area in the Form Code tab. A quick loop through the all of the extra fields to combine them in to the single variable name that Chronoforms is expecting should fix your problem.