Hi
I have a form with dynamic fields. A javascript function used to add multiple "items". 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
Form
Javascript
I have a form with dynamic fields. A javascript function used to add multiple "items". 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
Form
<div class="form_item">
<div class="form_element cf_heading">
<h2 class="cf_text">Online Quote</h2>
</div>
<div class="cfclear"> </div>
</div>
<div id="readRoot">
<div class="form_item">
<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);
}
Hi apprentice,
Hard to say without seeing the form in action but my guess is that the new inputs have the same name (or ID) as the earlier ones. That would explain why only the last is being recorded.
I see that you have code to increment the counter var - perhaps that isn't working correctly??
Turn Form Debug on so that you can see exactly what is being submitted.
Bob
Hard to say without seeing the form in action but my guess is that the new inputs have the same name (or ID) as the earlier ones. That would explain why only the last is being recorded.
I see that you have code to increment the counter var - perhaps that isn't working correctly??
Turn Form Debug on so that you can see exactly what is being submitted.
Bob
Any ideas folks?
Here is the debug output. As you can see the array only contains a single record, when there should be multiple e.g. [select_19] => Article [text_2] => Description 3 [text_4] => 14 [text_15] => Name 2....
1. Form passed first SPAM check OK
2. Form passed the submissions limit (if enabled) OK
3. Form passed the Image verification (if enabled) OK
4. Form passed the server side validation (if enabled) OK
5. $_POST Array: Array ( [select_19] => Jewellery [text_2] => Description 2 [text_4] => 13 [text_15] => Name [text_6] => 12 [text_7] => email@email.com [text_14] => 01/02/1979 [text_13] => bg1 3rt [text_10] => line 1 [text_11] => line 2 [text_12] => admin [text_16] => testing1 [text_17] => testing1 [check1] => Array ( [0] => Terms & Conditions ) [button_18] => Submit [2467682067a590a5d7f65523e7dc3839] => 1 [1cf1] => 13521b98aadda52e62480684338dfe98 [chronoformname] => inquiryform1 )
6. $_FILES Array: Array ( [file_3] => Array ( [name] => 376591423_c0b3889fc6.jpg [type] => image/jpeg [tmp_name] => C:\WINDOWS\Temp\php1EB.tmp [error] => 0 [size] => 74927 ) )
7. Upload routine started for file upload by : file_3
8. C:\www\kash\components\com_chronocontact\uploads\homepageform\20110203174618_376591423_c0b3889fc6.jpg has been uploaded OK
9. Form passed the plugins step (if enabled) OK
10. An email has been SENT successfully from (Admin)email@hotmail.com to email@hotmail.com
11. Debug End
Hi apprentice,
The problem here is that when you add another item you are cloning the inputs that already exist in the form. The new inputs have exactly the same name and id as the existing ones and so the results are over-written.
You can get round this either by changing the script so that it adds a distinguishing marker to the names and ids e,g, select_19_1, select_19_2, etc. But this is a bit messy with the colinign approach.
Alternatively you can make the inputs into array names like select_19[]. This should return all the results but you'll need to add some code in the onsubmit box to regroup them into item sets.
Bob
The problem here is that when you add another item you are cloning the inputs that already exist in the form. The new inputs have exactly the same name and id as the existing ones and so the results are over-written.
You can get round this either by changing the script so that it adds a distinguishing marker to the names and ids e,g, select_19_1, select_19_2, etc. But this is a bit messy with the colinign approach.
Alternatively you can make the inputs into array names like select_19[]. This should return all the results but you'll need to add some code in the onsubmit box to regroup them into item sets.
Bob
OK I did what you suggested, pass the values as arrays e.g. select_19[]. Seems to work with the exception of the FileUpload Field. When I change this feild from file_3 field to file_3[] all i get is a blank page upon submission, without the array it works. Any suggestions?
<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Submit Photo</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_3" name="file_3" type="file" />
$_FILES Array: Array ( [file_3] => Array ( [name] => 376591423_c0b3889fc6.jpg [type] => image/jpeg [tmp_name] => This topic is locked and no more replies can be posted.
