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
How to get selected value of option box using javascript.
File name : index.php
<script type="text/javascript" src="http://code.jquery.com/jquery 1.11.0.js"></script>
<script>
/* $(document).ready(function() {
$('select[name="status"]').change(function(){
var status = $(this).val();
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: status},
dataType: 'html'
});
});
});
*/
$('select[name="status"]').change(function() {
alert($(this).val());
});
</script>
</script>
<select name="status" id="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
File name : index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery ve AJAX işlemleri</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#series option').click(function() {
var value= $(this).attr('value');
alert(value);
})
})
</script>
</head>
<body>
<select id="series" multiple>
<option value="1" >First</option>
<option value="2" >Second</option>
<option value="3" >Third</option>
<option value="4" >Fourth</option>
<option value="5" >Fifth</option>
<option value="6" >Sixth</option>
</select>
File name : index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
alert($('#combo :selected').text());
});
});
</script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
File name : index.php
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
alert($('#combo :selected').text());
});
});
</script>
</head>
<body>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
<input id="button1" type="button" value="Click!" />
</body>
</html>
File name : index.php
<select id="ddlFruits">
<option value="">--- Select ---</option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlFruits").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
});
});
</script>
<br/>
<hr/>
<select id="ddlFruits" onchange="GetSelectedTextValue(this)">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<script type="text/javascript">
function GetSelectedTextValue(ddlFruits) {
var selectedText = ddlFruits.options[ddlFruits.selectedIndex].innerHTML;
var selectedValue = ddlFruits.value;
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
}
</script>
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jqueryselect").change(function(){
var selectedtext = $('#jqueryselect option:selected').text();
var selectedvalue = $('#jqueryselect option:selected').val();
alert (selectedtext);
alert (selectedvalue);
});
});
</script>
<style>
.jquerysel {
background: #2C5656;
height: 75px;
width:250px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="jquerysel">
<label>Select A Color: </label><select id="jqueryselect">
<option value="MAR">Maroon</option>
<option value="GRE">Green</option>
<option value="YEL">Yellow</option>
<option value="BLU">Blue</option>
<option value="RED">Red</option>
</select>
</div>
</body>
</html>
File name : index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('select').on('change', function()
{
alert( this.value );
});
</script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<script>
function getNewVal(item)
{
alert(item.value);
}
</script>
<select onchange="getNewVal(this);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
File name : index.php
<html>
<head>
<script type="text/javascript">
function takeValue(){
var sel = document.getElementById("selectedReport");
var selectedReport = sel.options[sel.selectedIndex].text;
//put the selected value in the hidden input value
document.getElementById("myReport").value=selectedReport;
}
</script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
$choice = $_POST['myselect'];
$value = $_POST['myvalue'];
echo "Selected text = ".$choice; echo "<br/>";
echo "Selected value = ".$value;
}
?>
<form action="" method="POST">
<input type="text" id="myReport" name="myvalue"/>
<select id="selectedReport" onchange="takeValue()" name="myselect">
<option value="1">Report1</option>
<option value="2">Report2</option>
<option value="3">Report3</option>
</select>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
</html>
File name : index.php
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('coloropt');
if(val=='pick a color'||val=='others'){
element.style.display='block'; }
else {
element.style.display='none';
}
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
<input type="text" name="coloropt" id="coloropt" style='display:none;'/>
</body>
</html>
File name : index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlPassport").change(function () {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
</script>
<span>Do you have Passport?</span>
<select id="ddlPassport">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
<hr />
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
File name : index.php
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function myFunction()
{
alert("Hello");
opt_val = sel.options[sel.selectedIndex].text;
document.getElementById("topic_txt").value = opt_val;
document.getElementById("topic_val").value = opt_val;
alert(opt_val);
return opt_val;
}
</script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
$name = $_POST['fname'];
$opval = $_POST['checkbox'];
$topic = $_POST['topic_txt'];
echo $topic;
//$optext = ''; // here i get selected text by javascript.
$optext = '';
echo $name;
echo "<br/>";
echo $opval;
}
?>
<form action="" name="frm" method="post">
<input type="text" style="display:none" id="topic_val" name="topic_val" />
<input type="text" style="display:none" id="topic_txt" name="topic_txt"/>
<table>
<tr>
<td>Name : <input type="text" name="fname"/></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" id="checkbox" value="100" onclick="myFunction()"/>Mahtab Alam
</td>
</tr>
<tr><td><input type="submit" name="submit" value="Submit" /></td></tr>
</table>
</form>
</body>
</html>
File name : index.php
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function mytext(sel)
{
opt_val = sel.options[sel.selectedIndex].text;
document.getElementById("topic_txt").value = opt_val;
document.getElementById("topic_val").value = opt_val;
alert(opt_val);
return opt_val;
}
</script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
$name = $_POST['fname'];
$opval = $_POST['option'];
$topic = $_POST['topic_txt'];
echo $topic;
//$optext = ''; // here i get selected text by javascript.
$optext = '';
echo "<br/>";
echo $opval;
}
?>
<form action="" name="frm" method="post">
<input type="text" style="display:none" id="topic_val" name="topic_val" />
<input type="text" style="display:none" id="topic_txt" name="topic_txt"/>
<table>
<tr>
<td>Name : <input type="text" name="fname"/></td>
</tr>
<tr>
<td><select name="option" id="option" onChange="mytext(this);">
<option value="100">C</option>
<option value="200">C++</option>
<option value="300">Java</option>
<option value="400">PHP</option>
<option value="500">Android</option>
</select></td>
</tr>
<tr><td><input type="submit" name="submit" value="Submit" /></td></tr>
</table>
</form>
</body>
</html>
How to disable right click of mouse button.
File name : index.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).bind('contextmenu', function (e) {
e.preventDefault();
alert('Right Click is not allowed');
});
/*$('.Container').bind('contextmenu',function(e){
e.preventDefault();
alert('Right Click is not allowed on div');
});*/
});
</script>
</head>
<body>
<div class="Container" style="border:1px solid Red; width:300px;">
<p>Please right Click here for test this example</p>
<input type="text" /><br>
<input type="checkbox" />
</div>
<button id="btnClick">Click</button>
</body>
</html>
File name : index.php
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function mytext(sel)
{
opt_val = sel.options[sel.selectedIndex].text;
document.getElementById("topic_txt").value = opt_val;
document.getElementById("topic_val").value = opt_val;
alert(opt_val);
return opt_val;
}
</script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
$name = $_POST['fname'];
$opval = $_POST['option'];
$topic = $_POST['topic_txt'];
echo $topic;
//$optext = ''; // here i get selected text by javascript.
$optext = '';
echo "<br/>";
echo $opval;
}
?>
<form action="" name="frm" method="post">
<input type="text" style="display:none" id="topic_val" name="topic_val" />
<input type="text" style="display:none" id="topic_txt" name="topic_txt"/>
<table>
<tr>
<td>Name : <input type="text" name="fname"/></td>
</tr>
<tr>
<td><select name="option" id="option" onChange="mytext(this);">
<option value="100">C</option>
<option value="200">C++</option>
<option value="300">Java</option>
<option value="400">PHP</option>
<option value="500">Android</option>
</select></td>
</tr>
<tr><td><input type="submit" name="submit" value="Submit" /></td></tr>
</table>
</form>
</body>
</html>
File name : index.php
File name : index.php
File name : index.php