Show/Hide Div in Form based on selected option using javascript

Hi Friends,

I am going to write a script to Show/hide div contents using Javascript and HTML.

In this article, I will write codes and you can check it on your localhost/web page.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Owner" />

	<title>Untitled 1</title>
    
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

    $(window).load(function(){
      
$('#dbType').on('change',function(){
    if( $(this).val()==="other"){
    $("#otherType").show()
    }
    else{
    $("#otherType").hide()
    }
});

    });
</script>

</head>
<body>
    <label for="db">Choose type</label>
<select name="dbType" id="dbType">
   <option>Choose Database Type</option>
   <option value="oracle">Oracle</option>
   <option value="mssql">MS SQL</option>
   <option value="mysql">MySQL</option>
   <option value="other">Other</option>
</select>

<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>


</body>
</html>

Leave a Reply Cancel reply