I have a requirement that based on the drop down selection I should fill data for the next input tag.
For example in drop down box, if I give values like NETWORK1, NETWORK2, NETWORK3. If I select NETWORK1 from dropdown textbox should fill with 127.0.0.1, if it is NETWORK2 it will be 127.0.0.2 and so on.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body> <pre>
UserName : <input type="text" name=uname>
Password : <input type="password" name=upwd>
Confirm Password : <input type="password" name=cpwd>
Network : <select>
<option value="N1">Network1</option>
<option value="N2">Network2</option>
<option value="N3">Network3</option>
</select>
IP address : <input type="text" name=ipaddress>
</pre>
</body>
</html>
This would be a lot cleaner with JQuery but in plain javascript you can do it like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body> <pre>
UserName : <input type="text" name=uname>
Password : <input type="password" name=upwd>
Confirm Password : <input type="password" name=cpwd>
Network : <select id="network" onchange="setIP(this)">
<option value="N1">Network1</option>
<option value="N2">Network2</option>
<option value="N3">Network3</option>
</select>
IP address : <input type="text" name=ipaddress id=ipaddress>
</pre>
<script language="javascript">
function setIP(networkSelect) {
var val;
switch (networkSelect.options[networkSelect.selectedIndex].value) {
case 'N1': val = '127.0.0.1'; break;
case 'N2': val = '127.0.0.2'; break;
case 'N3': val = '127.0.0.3'; break;
}
document.getElementById('ipaddress').value = val;
}
setIP(document.getElementById('network'));
</script>
</body>
</html>
you can do like this gives addess in the value of option like this
<select id="network">
<option value="127.0.0.1">Network1</option>
<option value="127.0.0.2">Network2</option>
<option value="127.0.0.3">Network3</option>
</select>
IP address :
and select value as
<script language="javascript">
$("#network").change(function(){
var temp = $("#network option:selected").val();
$("#ipAddress").val(temp);
});
</script>
and add header file of jquery
Related
I am working on this form where it has drop down and text box.
When value selected in one drop-down should change value in text-box dynamically.
for eg if I select a value "3" in select box then
select ename from emp where eid ='3';
and result should be in text box
Similarly form has multiple drop-down list with respective text-box.
Please suggest. Thanks in advance.
Try this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#empID').change(function(){
$.get('getEmpInfo.php',{empId:$(this).val()},function(data){
$('#emp_id').val(data);
});
});
});
</script>
</head>
<body>
<select name="empID" id="empID">
<option value="">Select Emp</option>
<option value='1'>Emp1</option>
<option value='2'>Emp2</option>
<option value='3'>Emp3</option>
<option value='4'>Emp4</option>
</select>
<input type="text" name="emp_id" id="emp_id" />
</body>
</html>
AT getEmpInfo.php PAge
<?php
if(isset($_REQUEST['empId'])){
// connection should be on this page
$sql = mysql_query("select ename from emp where eid =".$_REQUEST['empId']);
$res = mysql_fetch_assoc($sql);
echo $res['ename'];die;
}
?>
Try this,
Live Demo
$(document).ready(function() {
$("#name option").filter(function() {
return $(this).val() == $("#firstname").val();
}).attr('selected', true);
$("#name").live("change", function() {
$("#firstname").val($(this).find("option:selected").attr("value"));
});
});
My Be Duplicate : Duplicate
For this solutions you can try:
//set textbox value change dynamic after dropbox had changed.
$('#' + yourDropBoxId).change(function ()
{
var dropDownValue = $('#'+ yourId).val();
// set new value for textbox
$('#' + yourTextBoxId).val(dropDownValue);
});
Try this code which contains two textboxes :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $('#empID').change(function(){ $.get('1.php',{empId:$(this).val()},function(data){ $('#emp_id').val(data);});});});</script>
<script type="text/javascript"> $(document).ready(function(){ $('#d1').change(function(){ $.get('1.php',{d1:$(this).val()},function(data){ $('#t1').val(data);});});});</script>
</head>
<body>
<?php
$bdd = mysqli_connect('127.0.0.1', 'root', '', 'member');
$r= mysqli_query($bdd, "select * from info");
?>
<br>تشكيلة مباراة :<select name="empID" id="empID">
<option value="">Select name from List...</option>
<?php
while ($d=mysqli_fetch_assoc($r))
{
?>
<option value="<?=$d["prenom"];?> <?=$d["nom"];?>"><?=$d["prenom"];?> <?=$d["nom"];?></option>
<?php
}
?>
</select>
<input type="text" name="emp_id" id="emp_id" /><br><hr>
<br>تشكيلة مباراة :<select name="d1" id="d1">
<option value="">Select name from List...</option>
<?php
$r1= mysqli_query($bdd, "select * from info");
while ($d1=mysqli_fetch_assoc($r1))
{
?>
<option value="<?=$d1["prenom"];?> <?=$d1["nom"];?>"><?=$d1["prenom"];?> <?=$d1["nom"];?></option>
<?php
}
?>
</select>
<input type="text" name="t1" id="t1" />
</body>
</html>
PHP page :"1.php"
<?php
if(isset($_REQUEST['empId'])){ echo $_REQUEST['empId']; }
if(isset($_REQUEST['d1'])){ echo $_REQUEST['d1']; }
?>
In Chrome browser, when you click on CloudCover on this web page, a description is revealed below. In IE the description is not revealed. Any suggestions to make this work in IE?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>min test</title>
<script type='text/javascript'>
function showDescription (sel) {
var myVarDescip, myVarTEXT;
var myVar = (sel.value);
document.getElementById('putDescriptionHere').innerHTML = "";
myVarDescip = (myVar + "Descrip");
myVarTEXT = document.getElementById(myVarDescip).innerHTML;
document.getElementById('putDescriptionHere').innerHTML = myVarTEXT;
}
</script>
</head>
<body>
<select id="destSelect" size="3" multiple="multiple">
<option value="CloudCover" onclick="showDescription(this);">Cloud Cover</option>
</select>
<div id="CloudCoverDescrip" style="display: none">
<b>Cloud Cover:</b> The percentage of sky occluded by clouds.
</div>
<div id="putDescriptionHere"></div>
</body>
</html>
You can't attach mouse events on options in IE, so the click never fires.
Use the onchange event on the select instead
<select id="destSelect" size="3" multiple="multiple" onchange="showDescription(this);">
FIDDLE
I would like to obtain the original selected value of a <select> element as it was written by the initial HTML and defined by selected="selected". For instance, the original value of mySel is 2 no matter what the user selects. Or in other words, I would like to get the default value of the <select> element similarly as I am doing with the below <input> element. Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#click').click(function(){
console.log($("#myInput").val(),$("#myInput").attr('value'));
console.log($("#mySel").val(),$("#mySel").attr('value'),$('#mySel option:selected').val());
});
});
</script>
</head>
<body>
<button id="click">Click</button>
<input type="text" value="Default Value" id="myInput" name="myInput" class="valid">
<select id="mySel" name="mySel">
<option value="1">Value 1</option>
<option value="2" selected="selected">Value 2</option>
<option value="3">Value 3</option>
</select>
</body>
</html>
Since this is specified as an attribute, you can select that:
$('#mySel option[selected]');
or even
$('#mySel [selected]');
This will select the original selected value no matter what the user has changed it to.
http://jsfiddle.net/mblase75/szT4w/
Use to get select option of a select element like this:
$("#mySel option[selected]").val();
It will do the magic :)
html code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body bgcolor="#FFFFCC">
<center>
<form>
<select id="newLocation">
<option value="1.jpg">index</option>
<option value="script.js">posts</option>
<option value="2.jpg" selected="selected">blog</option>
</select>
</form>
javascript :
window.onload = startInit;
function startInit() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");// what does this statement return ?
var newPage = newLoc.options[newLoc.getSelectedIndex].value;
if(newPage != "")
window.location = newPage;
}
Why don't get to to new page i.e the value when i select an option from the combo box ?
Also what does document.getElementById("newLocation"); this statement (the first statement of the function jumpPage) return ?
You can try
var newPage = newLoc.options[newLoc.selectedIndex].value;
The statement
var newLoc = document.getElementById("newLocation");
just finds the DOM (HTML) element <... id="newLocation" ...>, i.e. your <select id="newLocation"> .
document.getElementById("newLocation") will return you the SELECT object (i.e., the reference to your drop-down).
Regarding the JS, it has an error. You should change newLoc.getSelectedIndex to newLoc.selectedIndex.
In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`