دراين مقاله مي خواهيم توضيح دهيم كه چگونه با كد جاوااسكريپت و مبتني بر انتخاب يك دكمه radio يك فيلد را نمايش داد يا پنهان كرد .

در اينجا مراحل اين كار شرح داده شده است :

1 – فرض كنيم براي مثال كامپونت radio شما با نام "radio" با پيكربندي زير داشته باشيم :

آیتم ها :

مقدار1|توصیف 1

مقدار2|توصیف 2

خصوصیات اضافی :

on-click="displayField();"

2. به برگه جاوا اسکریپت بروید و کدهای زیر را وارد نمائید :

<script type="text/j-avascript">

function displayField()

{

if(document.getElementsByName('form[Radio]')[0].checked)

document.getElementById('hide').style.display="none";

if(document.getElementsByName('form[Radio]')[1].checked)

document.getElementById('hide').style.display="";

}

</script>

براي مخفي كردن فيلد دلخواهتان در زمان لود شدن صفحه ، بايد كد زير را به بعد از كدهاي موجود css و جاوا اسكريپت اضافه كنيد .

window.addEvent('domready', function() {

displayField();

});

كد بالا در زمان لود شدن صفحه ، تابع displayField() را لود مي كند و بنابراين فيلد به طور پيش فرض مخفي خواهد بود .

3 - فرض كنيد كه مي خواهيد يك جعبه متن را كه "Textbox" نام دارد نيز مخفي كنيد .براي اينكار بايد يك id به تگ "tr" كه حاوي كامپونت جعبه متن است نسبت دهيد . براي مثال :

<tr id="hide">

<td>{Textbox:caption}</td>

<td>{Textbox:body}<div class="clr"/>{Textbox:validation}</td>

<td>{Textbox:description}</td>

</tr>

4 – براي نمايش فيلد بايد يك تابع ديگر جهت اعتبار سنجی فيلد اضافه كنيد. اسكريپتي كه مي توانيد استفاده كنيد چيزي شبيه كد زير خواهد بود :

<script type="text/j-avascript">

function validateField()

{

if(document.getElementById('hide').style.display=="" && document.getElementById('Textbox').value=="")

{

document.getElementById('component150').className = 'formError';

return false;

}

else

{

document.getElementById('component150').className = 'formNoError';

return true;

}

}

</script>

كه 'component150' در صفحه ي كد فرمتان id كامپونت فرم خواهد بود .خواهيد ديد كه هر فيلد فرمتان داراي يك  span مثل زير است :

<span id="component150" class="formNoError">Invalid Input</span>

هم چنين يك راه انداز بايد براي تابع نوشته شود . اين قسمت را بايد در ناحيه ي" خصوصيات اضافه ي" دكمه ي ارسال در فرمتان اضافه كنيد : on-click="return validateField();"

توجه : اين لايه ي كد در زمانيكه از لايه ي inline استفاده كنيد توليد مي شود .