How to enable or disable some parts of the form?

Hello,
I would like to get some information about disabling or enabling, or hiding-unhiding parts of a form through options (like choosing from dropbox or check box-radio button). I already tried some js commands but they didn't work. I disabled an inputbox by simply writing disabled="true" and on the javascript column I wrote a function enabled() and on html column of the form in the dropbox codes I wrote <option value="other" onclick="javascript:form.other.disabled="false"">Other</option> also tried <option value="other" onclick="javascript:enabled()">Other</option>; but both of them didn't work. I've looked to javascript codes that I've written before in an html code and it works (only in ie not in firefox) because of that I've tried it here in chronoform. Could anybody help me through solving this problem...How can I enable-disable textboxes, etc or hide-unhide them?🤨 THX!!

Hi dduygushh,

I'm not sure that you can reliably attach events to dropdown option tags. Try attaching an onChange event to the drop down itself (use the select tag id), then check the value and set the disabled values from that.

Bob

Thx for the quick reply. Do you have a form structure example which has made by chronoform? (suggestion: for the newer versions of chronoform this kind of a property can be added)

can I use

disable(element) -> HTMLElement

?

Here are my codes. Would you please help me? On the option value="diger" changed, I would like to enable "Diger" inputbox.

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label">Konu</label>
    <select class="cf_inputbox" id="select_22" size="1" title=""  name="konu">
    <option value="-" selected="selected">Seçiniz</option>
                    <option value="1">1-Nuclear Energy: Present Status and perspectives </option>
                    <option value="1a">a-Nuclear reactors and its fuel cycle</option>
                    <option value="2a">b-Nuclear energy safety</option>
                    <option value="3a">c-Physics of nuclear reactors</option>
                    <option value="4a">d-Non-proliferation activities</option>
                    <option value="diger" onchange="enabled()">Diğer</option>


    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Konu :: Eğer seçenekler altında aradığınız konu yoksa aşağıda "Diğer" olarak yazınız.</div>
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Diğer</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_20" name="konu_diger" disabled="true" type="text" />

Here is my JS. I didn't understand how to write the formula. maybe you can help on that too...

function enabled()
{
form.diger_konu.disabled=false;
}
 

Something like this should do the trick. The event is moved to the select-tag rather than the individual option.
The event simply calls the custom setDiger() function with the value of the current selection. The setDiger() function then tests whether this is "diger" or not, and uses MooTools to add/remove the disabled property to the proper input field...

    <select class="cf_inputbox" id="select_22" size="1" title=""  name="konu" onchange="setDiger(this.options[this.selectedIndex].value);">
                    <option value="-" selected="selected">Seçiniz</option>
                    <option value="1">1-Nuclear Energy: Present Status and perspectives </option>
                    <option value="1a">a-Nuclear reactors and its fuel cycle</option>
                    <option value="2a">b-Nuclear energy safety</option>
                    <option value="3a">c-Physics of nuclear reactors</option>
                    <option value="4a">d-Non-proliferation activities</option>
                    <option value="diger">Diğer</option>

And for javascript:

function setDiger(selected) {
    if (selected == "diger") {
        $('text_20').removeProperty('disabled');
    } else {
        $('text_20').setProperty('disabled', 'disabled');
    }
}

Thx, but I'm afraid it dosen't work 😟 I couldn't solve it yet:?

Hi,

try to enable the validation under the validation tab so that mootools is loaded, if this didn't work either then please post your code again after the modifications posted by Frederik are done!

Regards,
Max

Validation was already enabled with the mootools option. 😑 But ı don't use Server Side validation. My js codes work with normal form that I've made with dreamweaver-html-js but in chronoforms it dosen't...I truely didn't understand...sorry😟 if it is possible I need an example of working code and form; a simple one just to help me to understand the process. THX

The code works fine for me. Or perhaps you were thinking of hiding the input box rather than just disabling it?

Serverside validation shouldn't be needed, as long as the mootools js library is loaded.

/Fredrik

Hi dduygushh,

This code is working OK in FireFox. I've changed the ids of the inputs to match the names and the if clause checks for the last option in the select list.

<?php
$script = "
window.addEvent('domready', function() {
  var digerbox = function() {
    if ( $('konu').selectedIndex == $('konu').length-1 ) {
      $('konu_diger').disabled = false;
    } else {
      $('konu_diger').disabled = true;
    }
  }
  $('konu').addEvent('change', digerbox);
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label">Konu</label>
    <select class="cf_inputbox" id="konu" size="1" title=""  name="konu">
        <option value="-" selected="selected">Seçiniz</option>
        <option value="1">1-Nuclear Energy: Present Status and perspectives </option>
        <option value="1a">a-Nuclear reactors and its fuel cycle</option>
        <option value="2a">b-Nuclear energy safety</option>
        <option value="3a">c-Physics of nuclear reactors</option>
        <option value="4a">d-Non-proliferation activities</option>
        <option value="diger" onchange="enabled()">Diğer</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Konu :: Eğer seçenekler altında aradığınız konu yoksa aşağıda "Diğer" olarak yazınız.</div>
  </div>
  <div class="clear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Diğer</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="konu_diger" name="konu_diger" disabled="disabled" type="text" />

All this code goes into the Form HTML box and Validation should be set to On to make sure that MooTools is loaded.

Bob

Hello,
I've tried the code GreyHead, and it works! Thank You indeed. Sorry for the late answer but I was dealing with other stuff...Anyway... the code is great but I couldn't manage to change the disabled option for only one option value of dropdown box. I mean if user chooses only one option (option value="diger") then konu_diger text box will be enabled; for other options it won't...(Not lenght-1 but I need to write the option value name there..I guess)

How should I change the code? I wrote like below but obviously it dosen't. Help pls? Thx

<?php
$script = "
window.addEvent('domready', function() {
  var digerbox = function() {
    if ( $('konu').selectedIndex == $('konu').value= 'diger' ) {
      $('konu_diger').disabled = false;
    } else {
      $('konu_diger').disabled = true;
    }
  }
  $('konu').addEvent('change', digerbox);
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>

Hi dduygushh,

As far as I remember you can't disable individual options in IE so you eitehr have to remove them and replace them or find another way round.

Bob

Hi dduygushh,
The problem here is that the selectedIndex property of the select-object contains an integer pointing at the selected option, not the value of the selected option. You'll need to use the value property of the Nth options property-array of the select-object. That is pretty much what I did in my earlier post, although I choose to use the "this" relative pointer out of comfort.

To go with Bob's code, it'd look something like this:

<?php
$script = "
window.addEvent('domready', function() {
  var digerbox = function() {
    if ( $('konu').options[$('konu').selectedIndex].value == "diger" ) {
      $('konu_diger').disabled = false;
    } else {
      $('konu_diger').disabled = true;
    }
  }
  $('konu').addEvent('change', digerbox);
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label">Konu</label>
    <select class="cf_inputbox" id="konu" size="1" title=""  name="konu">
        <option value="-" selected="selected">Seçiniz</option>
        <option value="1">1-Nuclear Energy: Present Status and perspectives </option>
        <option value="1a">a-Nuclear reactors and its fuel cycle</option>
        <option value="2a">b-Nuclear energy safety</option>
        <option value="3a">c-Physics of nuclear reactors</option>
        <option value="4a">d-Non-proliferation activities</option>
        <option value="diger" onchange="enabled()">Diğer</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Konu :: Eğer seçenekler altında aradığınız konu yoksa aşağıda "Diğer" olarak yazınız.</div>
  </div>
  <div class="clear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Diğer</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="konu_diger" name="konu_diger" disabled="disabled" type="text" />

/Fredrik