Hello,
I have a form with javascript that hide or put visible a div when a input radio is checked
to be more clear, here is the part of the form
and the javascript
1- how can I do that with chronoforms ?
2- the other question is how can the field "raisonsociale" be required only if the input radio named "societe_particulier" is checked for "société" ?
I can't put it in the required, because it is not required if radio is checked for "particulier"
hope my explanations are enough clear
thanx in advance for your reply !
I have a form with javascript that hide or put visible a div when a input radio is checked
to be more clear, here is the part of the form
<td><p>
<label id="labsociete" style="font-weight:bold;">
<input name="societe_particulier" type="radio" value="societe" onclick="fradio(1,this.value);MM_changeProp('rs','','top','','DIV');MM_changeProp('rs','','top','','DIV')" />
Société</label>
<br />
<label>
<input name="societe_particulier" type="radio" value="particulier" onclick="fradio(1,this.value);MM_changeProp('rs','','top','','DIV');MM_changeProp('rs','','top','','DIV')" />
Particulier</label>
</p></td>
<td valign="top"><div id="rs" style="position:absolute; width:316px; height:24px; z-index:1;">
<input name="raisonsociale" type="text" id="raisonsociale" value="" size="50" />
</div></td>
and the javascript
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
1- how can I do that with chronoforms ?
2- the other question is how can the field "raisonsociale" be required only if the input radio named "societe_particulier" is checked for "société" ?
I can't put it in the required, because it is not required if radio is checked for "particulier"
hope my explanations are enough clear
thanx in advance for your reply !
Hi Rose_N,
I'm going to simplify your form html a little to make it easier to see what is happening; and then I will also use a simpler approach to the JavaScript using the MooTools syntax (MooTools will be loaded if you are using the ChronoForms Validation).
Note: I have added ids to the radio fields.
This JavaScript can be added to the Form HTML box (not the JavaScript box) and it will load into the page header
This code just enables and disables the raisonsociale input. You can change the code to hide or unhide a wrapping div if you prefer.
Bob
I'm going to simplify your form html a little to make it easier to see what is happening; and then I will also use a simpler approach to the JavaScript using the MooTools syntax (MooTools will be loaded if you are using the ChronoForms Validation).
Note: I have added ids to the radio fields.
<input name="societe_particulier" id="societe" type="radio" value="societe" />
<input name="societe_particulier" id="particulier" type="radio" value="particulier" />
<input name="raisonsociale" type="text" id="raisonsociale" value="" size="50" />
This JavaScript can be added to the Form HTML box (not the JavaScript box) and it will load into the page header
<?php
$script = "
// line to load the script
window.addEvent('domready', function() {
// main function
var showRaison = function() {
var raisonsociale_validate = new LiveValidation('raisonsociale');
if ( $('societe').checked ) {
// disable raisonsociale
$('raisonsocial').disabled = true;
// disable validation of raisonsociale
raisonsociale_validate.disable;
} else {
// enable raisonsociale
$('raisonsocial').disabled = false;
// enable validation of raisonsociale
raisonsociale_validate.enable;
}
};
// add events to the radio boxes to trigger the functions
$('societe').addEvent('change', showRaison);
$('particulier').addEvent('change', showRaison);
});
";
$doc =& JFactory::getDocument();
$doc->addScript($script);
?>
Note: Not tested and will need debugging!!!This code just enables and disables the raisonsociale input. You can change the code to hide or unhide a wrapping div if you prefer.
Bob
This topic is locked and no more replies can be posted.