Forums

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

     
<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.

<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