Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to get dropdown value using javasricpt?

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&#351;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 "-//ittutorialC//DTD HTML 4.01 Transitional//EN" "http://www.ittutorial.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 "-//ittutorialC//DTD HTML 4.01 Transitional//EN" "http://www.ittutorial.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 "-//ittutorialC//DTD HTML 4.01 Transitional//EN" "http://www.ittutorial.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>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link