Forums

On my form there are a checkbox, a couple of text box and a file upload item enclosed in a custom DIV, finally a submit button.
I have an ajax action that, triggered by a checkbox, output the above described DIV with a different file select (upload) item, if I deselect the checkbox the ajax action return the div output as before.

All working fine.

The problem start when I check the 'required' validation on the file upload item in the preview pane of the form , in this case, if I submit the form as soon as loaded all is fine, if I check and unchecked the checkbox (form return as previous, double checked with chrome inspecting page output in both situation)the validation always fail and a tooltip is shown in the very upper left corner of the page (very far from the file upload item).

I'm running out of ideas...

Michele

Hi Michele,

I can't follow exactly what is happening with the hiding and un-hiding (are you really using Ajax or just JavaScript?). It sounds to me as if there is still a copy of the required upload that has been moved off the page.

In general if you hide elements you should disable and clear them at the same time.

Bob

Hi Bob,

the form has a div named 'ccms_form_element' with a file upload inside

I'm using Ajax to clear/output html in this div, toggle with a original file upload and a new one with a different name.

As Ajax clear the div with :
$('ccms_form_element').empty();
I think there's must be no more trace of the previous file upload, am i right ?

Michele

here is the javascript at the beggining of the form

window.addEvent('load', function() {
				$('campo1').addEvent('change', function(){
					var load_req = new Request({
						url: 'index.php?option=com_chronoforms&chronoform=aggiungi_allegato&event=carica',
						method: 'get',
						onRequest: function(){
							$('ccms_form_element').empty();
							new Element('div', {'value': '', 'text': 'Loading...'}).inject($('ccms_form_element'));
						},
						onSuccess: function(responseText){
							$('ccms_form_element').empty();
							$('ccms_form_element').set('html', responseText);
						},
						onFailure: function(){
							$('ccms_form_element').empty();
							new Element('div', {'value': '', 'text': 'Loading failed.'}).inject($('ccms_form_element'));
						}
					});
load_req.send($('campo1').get('name')+'='+$('campo1').get('checked'));

				});
			});

and this is the action :

<?php
$mainframe =& JFactory::getApplication();
header("Content-Type: text/html; charset=UTF-8");

$cliente = JRequest::getVar('cvcliente', 'default_value');

if ($cliente=="true") {
echo '<div class="ccms_form_element cfdiv_header" id="autoID-6a485ab7306ce2872146601ea0f82fc4_container_div" style=""><p><strong>Tipo allegato</strong> : CV Cliente</p><div class="clear"></div></div>' ;

echo '<div class="ccms_form_element cfdiv_file" id="autoID-d3c55e276214dfe0fc565df70ce0d845_container_div" style=""><label>Seleziona il CV cliente</label><input type="hidden" name="filecliente" value="" alt="ghost" /><input class="" title="" type="file" container_id="0" name="filecliente" />
<div class="clear"></div><div id="error-message-file"></div></div>' ;

echo '<input type="hidden" name="all_tipo" value="CV Cliente" />' ;

}

else {

echo '<div class="ccms_form_element cfdiv_text" id="autoID-a0a75abd3d2eb75bf117ba87813e15e5_container_div" style=""><label>Tipo allegato</label><input maxlength="150" size="30" class="" title="" type="text" container_id="0" value="CV" name="all_tipo">
<div class="clear"></div><div id="error-message-all_tipo"></div></div>' ;

echo '<div class="ccms_form_element cfdiv_file" id="idfile_container_div" style=""><label for="idfile">Seleziona il file</label><input type="hidden" name="file" value="" alt="ghost">
<input id="idfile" class title="erroretipofile" type="file" container_id="0" name="file">
<div class="clear"></div><div id="error-message-file"></div></div>' ;
}
echo '<input type="hidden" name="file" value="" />' ;
$mainframe =& JFactory::getApplication();
$mainframe->close();

?>

Hi Michele,

I can't see where the problem is from the code here. I suspect that it is because you are not unsetting the validation when you delete the input.

Looking at the code it looks as though this is quite a complicated way of doing this task. I can't see that you need Ajax at all; just hiding and displaying the elements should be enough.

Please see this FAQ for a similar example.

Bob

Hi Bob,

Thank you for your help, I will switch the implementation to hide method, BTW if is not too complicate can you give me some hints about unset the validation ? I was using Ajax more for get used to this tecnology that for real need

Michele

Hi Michele,

Please see the FormCheck documents here. The functions you want are register() and dispose().

Bob