Here i will tell you how to change the text box value based on above selected box value. This simple concept will done by using the JavaScript and Jquery. In this example i am taking the state when you selected the state from the drop down list it will display in the below text box. The selected value is passed from the select box to text box. The text box is read only you can't able to change the text box value.
This value will passed the value using ids with the help of javascript. In this example have the live demo link, Please check out the demo and also download the code and use it. I hope this concept is very helpful to you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Change Textbox Value Based on Select Box</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<style type="text/css">
select, input
{ width: 200px;
padding: 12px;
margin:0 auto;
display:block;
}
.sandiv
{
width: 350px;
margin: 0 auto;
display: block;
padding: 40px;
text-align:center;
background-color: #4EAD51;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function() {
$("#state1 option").filter(function() {
return $(this).val() == $("#state").val();
}).attr('selected', true);
$("#state1").live("change", function() {
$("#state").val($(this).find("option:selected").attr("value"));
});
});
});
</script>
</head>
<body>
<div class="sandiv">
<h1 style="color:#fff;">Change Textbox Value Based on Select Box</h1>
<select id="state1" name="state1">
<option value="">Please State...</option>
<option value="Andhra">Andhra</option>
<option value="TamilNadu">TamilNadu</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
</select>
<br/>
<br/>
Your Selected State <input type="text" id="state" name="state" value="" readonly="readonly">
<h3><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></h3>
</div>
<script>
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "nafnR"
}], "*")
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Change Textbox Value Based on Select Box</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<style type="text/css">
select, input
{ width: 200px;
padding: 12px;
margin:0 auto;
display:block;
}
.sandiv
{
width: 350px;
margin: 0 auto;
display: block;
padding: 40px;
text-align:center;
background-color: #4EAD51;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function() {
$("#state1 option").filter(function() {
return $(this).val() == $("#state").val();
}).attr('selected', true);
$("#state1").live("change", function() {
$("#state").val($(this).find("option:selected").attr("value"));
});
});
});
</script>
</head>
<body>
<div class="sandiv">
<h1 style="color:#fff;">Change Textbox Value Based on Select Box</h1>
<select id="state1" name="state1">
<option value="">Please State...</option>
<option value="Andhra">Andhra</option>
<option value="TamilNadu">TamilNadu</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
</select>
<br/>
<br/>
Your Selected State <input type="text" id="state" name="state" value="" readonly="readonly">
<h3><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></h3>
</div>
<script>
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "nafnR"
}], "*")
}
</script>
</body>
</html>
0 Comments