JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
Home » Javascript »
About Javascript
onchange Event
when a user changes the selected option of a <select> element that time Execute a JavaScript onchange event.
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>Select a Name from the select box (Combobox).</p>
<select id="myid" onchange="mychange()">
<option value="Koeilwar">Koeilwar
<option value="Ara">Ara
<option value="Bhojpur">Bhojpur
<option value="Buxer">Buxer
<option value="Patna">Patna
</select>
<p>When you select a data from select option, a function is triggered which outputs the value of the selected option.</p>
<p id="demo"></p>
<script>
function mychange() {
var x = document.getElementById("myid").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
File Name:- index.php
<html><head>
<title>Onchange event example in JavaScript</title>
<script language="Javascript">
function selctcntry(evt, t) {
if (t.selectedIndex > 0)
document.getElementById("Text1").value = t.value;
else
document.getElementById("Text1").value = "";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<input type="text" id="Text1" />
</td>
</tr>
<tr>
<td>
Select the country name from the dropdown
</td>
</tr>
<tr>
<td>
<select onchange="selctcntry(event,this);">
<option value="India">Select</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="Canada">Canada</option>
</select>
</td>
</tr>
</table>
</body>
</html>
how to assign an "onchange" event to an input element.
When you leave the input field, a function is triggered which transforms the input text to upper case.
File Name:- index.php
<!DOCTYPE html><html>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
/* ***************** OR ******************************** */
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname">
<script>
document.getElementById("fname").onchange = function() {myFunction()};
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
how to assign an "onchange" event to an input element.
File Name:- index.php
<!DOCTYPE html><html>
<head>
<script type="text/javascript">
function OnSelectionChange (select) {
var selectedOption = select.options[select.selectedIndex];
alert ("The selected option is " + selectedOption.value);
}
</script>
</head>
<body>
Select an item from the following list:<br />
<select onchange="OnSelectionChange (this)">
<option value="Apple" />Apple
<option value="Pear" />Pear
<option value="Peach" />Peach
</select>
</body>
</html>
How to pass parameters on onChange of html select
File Name:- index.php
function getComboA(sel) {var value = sel.value;
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
/* ************** OR ******************* */
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>