Friday, 2 August 2013

Onclick the selectbox values and shown in textbox

Nowdays we can see in all online application form there would be select your college names or qualification option and  if your college name is not available in that option values we can use others option. on clicking that others option we get the textbox, in that text box we can enter our college name or qualification.Lets see the live demo.

Live Demo :

Select Ur Qualification : 

Lets see how it works,



Index :

<form name="codetruster">
<div align="center" class="tbl">
<span style="color: #990000;"><span style="font-size: 18px;">Select Ur Qualification&nbsp;:</span>&nbsp;</span>
<select id="on" name="country" onchange="ShowTB(this,'click');">
<option id="count">-------select-------</option>
<option id="count">B.E</option>
<option id="count">MBBS</option>
<option id="count">BA</option>
<option id="count">Bcom</option>
<option id="count">other</option>
</select>
<input id="click" placeholder="Please Enter Your Qualification" style="font-size: 14px; margin-left: 180px; margin-top: 20px; visibility: hidden; width: 50%;" type="text" />
</div>
</form>


Style :

<style type="text/css">
.tbl
{
    width:400px;
    height:55px;
    border:0 solid red;
    margin:5% auto;
    padding:15px 5px;
    background: rgb(237,237,237);
    background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(222,222,222,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(100%,rgba(222,222,222,1)));
    background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    box-shadow:inset 0 0 2px 2px #CCC;
    line-height:2px;
}
</style>

Script :


<script language="JavaScript" type="text/javascript">

function ShowTB(obj,id){
 txt=obj.options[obj.selectedIndex].text;
 if (txt.match('select')){
  document.getElementById(id).style.visibility='hidden';
 }
 if (txt.match('other')){
  document.getElementById(id).style.visibility='visible';
 }
}

</script>