Show or Hide text box on dropdown selected index change event using HTML and JavaScipt

display textbox on dropdown selection javascript

This HTML tutorial we will discuss, how to handle the dropdown selected index change event using JavaScript. Here we will see how to show or hide a comment box based on dropdown selected index change event using HTML and JavaScipt.

Show or Hide Comment box on dropdown selected index change event using HTML and JavaScipt

In one of the requirement, we had one drop-down list which has options like:

SharePoint deveopment training course
  • Happy
  • Satisfied
  • Sad

As per our requirement, we need to show a comment box when the user selects Sad from the dropdown list. Else the comment box should be hidden in the HTML form.

First, we are creating an HTML file. The HTML file contains the following code:

<!DOCTYPE html>
<html>
<scriptsrc="https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/SiteAssets/HtmlJsCssFiles/file.js"></script>
<body>
<h1>Suggestion Box</h1>
Choose an Option:   <select id="ddlSuggestion" onchange="GetSelectedTextValue(this)">
<option value="0">Happy</option>
<option value="1">Satisfied</option>
<option value="2" >Sad</option>
</select>
</br>
<textarea rows="4" cols="50" id="txtComments" style="display: none;" >
</textarea>
</body>
</html>

In script tag using src attribute, we have to give the path of JS file. In select option, we are giving the id named as”ddlSuggestion”

“GetSelectedTextValue(this)” is a function which is present in js file. When an item is selected in dropdown list, the “GetSelectedTextValue(this)”method will execute . We pass the current object (this) as a parameter in the function.

Below is the javascript function which we have written inside the .js file. And we are calling in the onchange event.

functionGetSelectedTextValue(ddlSuggestion) {
varselectedValue = ddlSuggestion.value;
if(selectedValue=="2")
{
document.getElementById("txtComments").style.display = ";
}
else
{
document.getElementById("txtComments").style.display = ‘none’;
}
}

First, we are retrieving the dropdown list selected value by using the below line.

var selectedValue = ddlSuggestion.value;

Then we are comparing and if the condition satisfies we are displaying the comment box like below:

document.getElementById("txtComments").style.display = ";

else we are hiding the comment box like below:

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

You may like following JavaScript tutorials:

In this article, we are discussing how to handle the dropdown selected index change event in HTML using JavaScript. We saw how to show or hide textbox based on dropdown selected index change event in HTML form.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 8+ years of SharePoint experience as well as in .Net technologies . I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools . Now exploring more in SharePoint 2016 :) Hope here I can contribute and share my knowledge to the fullest. As I believe "There is no wealth like knowledge, and no poverty like ignorance"

View all posts by Bhawana Rathore →