Disable Multiple Form Items on Radio Button Click

[Total: 0    Average: 0/5]

This example shows how to have multiple form components disabled on a radio button click.

Body Code:

Either the items next to Option 1 will be available for editing
or the ones next to the Option 2.
<form Name="frmInvoiceSearch" ID="frmInvoiceSearch" Action="" Method="post">

Option 1 
<input type=radio value="Toggle Disable" checked onclick="lockIt(_F)" id=radio1 name=radio1> 
<select name="cboVendorName" ID="cboVendorName"  onfocus="if(isDis())blur();"> 
          <option value="0" selected>Getronics</option> 
          <option value="1">FileNet</option> 
          <option value="2">Staffware</option> 
          <option value="3">Documentum</option> 
        </select>

<select name="cboVendorSite" ID="cboVendorSite" onfocus="if(isDis())blur();"> 
          <option value="0" selected>UK</option> 
          <option value="1">USA</option> 
          <option value="2">France</option> 
          <option value="3">Germany</option> 
        </select>
        
 <select name="cboInvoiceCurrency" ID="cboInvoiceCurrency" onfocus="if(isDis())blur();"> 
          <option value="0" selected>GBP</option> 
          <option value="1">DOL</option> 
          <option value="2">EUR</option> 
          <option value="3">DEM</option> 
          </select>
<INPUT id=txtInvoiceNumber name=txtInvoiceNumber onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtDateFromD name=txtDateFromD  size=2 maxLength=2 onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtDateFromM name=txtDateFromM  size=2 maxLength=2 onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtDateFromY name=txtDateFromY  size=4  maxLength=4 onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtDateToD name=txtDateToD  size=2 maxLength=2 onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtDateToM name=txtDateToM  size=2 maxLength=2 onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtDateToY name=txtDateToY  size=4  maxLength=4 onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtInvoiceAmountFrom name=txtInvoiceAmountFrom onfocus="if(isDis())blur();">&nbsp;
<INPUT id=txtInvoiceAmountTo name=txtInvoiceAmountTo onfocus="if(isDis())blur();">&nbsp;

<BR><BR>

Option 2 
<input type=radio value="Toggle Disable" onclick="lockIt(_T)" id=radio1 name=radio1>

Voucher Number 
<INPUT id=txtVoucherNumber name=txtVoucherNumber onfocus="if(!isDis())blur();">&nbsp; 

<input type=hidden name="lck" value="unlocked"> 
</form> 

<script Language="JavaScript"> 

var _T = "locked";
var _F = "unlocked";
function lockIt(_P) 
 {
   var _L = 
   document.frmInvoiceSearch.lck.value;
   if(_L==_P)return;
 
document.frmInvoiceSearch.cboVendorName.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T;
document.frmInvoiceSearch.cboVendorSite.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T;
document.frmInvoiceSearch.cboInvoiceCurrency.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T;
document.frmInvoiceSearch.txtInvoiceNumber.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T;
document.frmInvoiceSearch.txtDateFromD.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmInvoiceSearch.txtDateFromM.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmInvoiceSearch.txtDateFromY.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmInvoiceSearch.txtDateToD.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmInvoiceSearch.txtDateToM.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmInvoiceSearch.txtDateToY.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmInvoiceSearch.txtInvoiceAmountFrom.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T;  
document.frmInvoiceSearch.txtInvoiceAmountTo.disabled=(document.frmInvoiceSearch.lck.value=(_L==_F)?_T:_F)==_T;
}

function isDis() { 
return (document.frmInvoiceSearch.lck.value==_T); 
}

</script>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *