[英]customize registration form in joomla 2.5 - enable fields on the fly based on radio button value
I want to customize joomla registration form. 我想自定义joomla注册表格。 I ve added 2 text fields (company name, vat_number) and i ve created a radio button customerType with 2 options(business user, normal user). 我添加了2个文本字段(公司名称,增值税号),并创建了带有2个选项(业务用户,普通用户)的单选按钮customerType。
Now all the fields are visible in the form. 现在,所有字段在窗体中都是可见的。 What i want is, when the user selects business user to enable the 2 text fields and when he selects normal user to disable them on the fly. 我想要的是,当用户选择业务用户启用2个文本字段时,以及当他选择普通用户立即禁用它们时。
I guess i need to add javascript to the form. 我想我需要将javascript添加到表单中。 Can anyone help? 有人可以帮忙吗?
Thank you! 谢谢!
I have done this in here
我在here
做here
# Script to show hide div
<script type="text/javascript">
function show(obj) {
if(obj == 'farmer')
{
document.getElementById('SkiDiv1').style.display = 'block';
document.getElementById('SkiDiv2').style.display = 'none';
}
if(obj == 'landowner')
{
document.getElementById('SkiDiv2').style.display = 'block';
document.getElementById('SkiDiv1').style.display = 'none';
}
if(obj == 0)
{
document.getElementById('SkiDiv2').style.display = 'none';
document.getElementById('SkiDiv1').style.display = 'none';
}
}
</script>
# Selct from dropdown
<select name="siteusertype" class="inputbox1 required" onchange="show(this.value)">
<option id="selectuser" value="0">Select User</option>
<option value="farmer">Are you a Farmer ?</option>
<option value="landowner">Are you a Landowner ?</option>
</select>
# Both div with different IDs
<div id="SkiDiv1"> User 1 field </div>
<div id="SkiDiv2"> User 2 field </div>
1- Make a function on javascript and reference in onClick event of each radio. 1-在javascript上创建函数,并在每个单选的onClick事件中引用。
2- Inside javascript function use getElementById function of javascript to set visible or invisible any html element of form according user selection. 2-在javascript函数内部,使用javascript的getElementById函数根据用户选择设置可见或不可见的任何html形式的元素。
function hideElement()
{
if (user select you want)
document.getElementById("element-to-hide").style.visibility="hidden";
else
//if you want display element
document.getElementById("element-to-display").style.visibility="visible";
}
see example: 参见示例:
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
http://www.w3schools.com/jsref/prop_style_visibility.asp http://www.w3schools.com/jsref/prop_style_visibility.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.