Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Javascript onchange Event Tutorial to Get Dropdown Value of Select Input Field | Handle Forms in JS

Posted on February 12, 2023

 

 

Welcome folks today in this blog post we will be looking on how to get dropdown value of select input field using the onchange event in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="teams">Select your team:</label>
    <select id="team" onchange="selectTeam()">
        <option value="India">India</option>
        <option value="Australia">Australia</option>
        <option value="England">England</option>
        <option value="New Zealand" selected>New Zealand</option>
        <option value="South Africa">South Africa</option>
    </select>
    <div id="info">
 
    </div>
</body>
<script>
selectTeam()
function selectTeam(){
    let team = document.getElementById('team').value
    document.getElementById('info').innerHTML = `You have selected ${team} team`
}
</script>
</html>

 

 

As you can see we have added the html code where we have the select tag to select the cricket teams. Inside it we have given the id to the select tag so that we can target it’s value inside javascript. And also we have binded onchange event listener where we are attaching the selectTeam() method.

 

And inside this method we are getting the value of the selected team from the dropdown and then we are showing it inside the div tag having the info id attached to it.

 

 

 

Recent Posts

  • Python 3 Tkinter to Show Webcam Video & Capture Image Using OpenCV & Pillow Library GUI Desktop App
  • Node.js Express Github OAuth2 Project to Login With Github Using Access Token & Sessions in Browser
  • PHP 7 OAuth2 Google Login & Logout Script to Store User in MySQL Database and Display in Browser
  • Python 3 Flask Project to Export Multiple PDF Documents to Word Docx Files Using pdf2docx Library in Browser
  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme