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']; }
?>
Related
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
I am workng on a project in which I have to put back button functionality. Unfortunatly I can't seem to work it out. I have created a back button and it works. But if the user wants to edit the previous form and then submit data again, so it edits the query. I have tried it in my project but it adds another record in the database and doesn't update the previous one. I know I am not using any update query here. Now I am stuck how would it works I can't think of a good logic. I have made a simple form for example. It is written below.
<?php
$con = mysqli_connect('localhost','root','','test1');
if (isset($_POST['sub'])) {
$first_name = $_POST['fname'];
$second_name = $_POST['lname'];
$sql = "INSERT INTO `tbl`(`first_name`, `last_name`) VALUES
('$first_name', '$second_name')";
$run = mysqli_query($con, $sql);
}
?>
<!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>
</head>
<body>
<form method="POST" action="nextpage.php">
First_name: <input type="text" name="fname">
Second_name: <input type="text" name="lname">
<input type="submit" name="sub" value="submit">
</form>
</body>
</html>
nextpage.php
<?php
$con = mysqli_connect('localhost','root','','test1');
?>
<html>
<body>
<h1>Next Page</h1>
<p>The query is submitted press ok to forward and back if you want to go back</p>
<button>OK</button>
<button onclick="history.go(-1);">Back</button>
</body>
</html>
Thanks for your expert advice in advance.
If I understand correctly.. ..you have a lot of work to do to be able to to 'UPDATE' a record that you have just created.
Dont bother trying to go 'back' to the original form, go forwards to a new 'edit' form, passing the ID from the record that you have just created.
Use the ID to SELECT that record from the DB and pre-populate the 'edit' form. Add a hidden ID field to the form. Then on submission of the 'edit' form, UPDATE the existing record, using the ID.
I think you are taking the "back" button too literally. you are emulating the browser's back button. Instead, update your link text to "edit the submitted record", and either modify the submit page with the capability of editing it, (eg. a hidden input field with the index value of the last created item), or redirect to a page dedicated to editing the submitted record. the user will see it as going back, but the functionality will be different.
submitform:
<?php
$edit = false;
if(isset($_GET['editid']){
$edit = true;
//get the record, and display it in the fields below
}
$con = mysqli_connect('localhost','root','','test1');
if (isset($_POST['sub'])) {
$first_name = $_POST['fname'];
$second_name = $_POST['lname'];
$sql = "INSERT INTO `tbl`(`first_name`, `last_name`) VALUES
('$first_name', '$second_name')";
$run = mysqli_query($con, $sql);
}
?>
<!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>
</head>
<body>
<form method="POST" action="nextpage.php">
First_name: <input type="text" name="fname" <?=($edit)?"value=\"".$req["fname"]."\":""?>>
Second_name: <input type="text" name="lname">
<input type="submit" name="sub" value="submit">
</form>
</body>
</html>
nextpage.php
<?php
$con = mysqli_connect('localhost','root','','test1');
?>
<html>
<body>
<h1>Next Page</h1>
<p>The query is submitted press ok to forward and back if you want to go back</p>
<button>OK</button>
<button onclick="submitform.php?editid=<?=mysqli_last_return_id()?>">Back</button>
</body>
</html>
Here's the answer to my own question..Hope it would help someone..
test.php
<?php
session_start();
$con=mysqli_connect('localhost','root','','test1');
if(isset($_POST['sub'])){
$first_name=$_POST['fname'];
$second_name=$_POST['lname'];
$sess_username=$_SESSION['user_name'];
$sql="INSERT INTO `tbl`(`first_name`, `last_name`,`sess_username`)
VALUES ('$first_name','$second_name','$sess_username')";
$run=mysqli_query($con, $sql);
header("location:nextpage.php");
}
if(isset($_POST['upd'])){
$first_name=$_POST['fname'];
$second_name=$_POST['lname'];
$id=#$_GET['id'];
$upd="UPDATE `tbl` SET
`first_name`='$first_name',`last_name`='$second_name' WHERE `id`='$id'";
$query=mysqli_query($con, $upd);
header("location:nextpage.php");
}
?>
<!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" />
<script type="text/javascript" src="http://code.jquery.com/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if(window.location.href.indexOf("id") > -1) {
$('.submit').hide();
$('.update').show();
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form method="POST" action="">
First_name:<input type="text" name="fname">
Second_name:<input type="text" name="lname">
<input class="update" type="submit" value="Update" name="upd"
style="display:none;">
<input class="submit" type="submit" name="sub" value="submit">
</form>
</body>
</html>
nextpage.php
<?php
session_start();
$con=mysqli_connect('localhost','root','','test1');
$sql="SELECT * FROM `tbl` WHERE
`sess_username`='".$_SESSION['user_name']."'";
$run=mysqli_query($con, $sql);
while($res=mysqli_fetch_assoc($run)){
$id=$res['id'];
$firstname=$res['first_name'];
$lastname=$res['last_name'];
$sess=$res['sess_username'];
}
?>
<html>
<body>
<h1>Next Page</h1>
<p>The query is submitted press ok to forward and back if you want to go
back</p>
<button >OK</button>
<form method="POST" action="test.php">
<?php echo "<a href='test.php?id=$id;'>Back</a>"; ?>
</form>
</body>
</html>
I Use below html page for tag-it. But when i submit the form, i can't get the value from form.
<!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>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://girlzunderground.com/code/tagit.js"></script>
<script >
$(function() {
$('#demo3').tagit({
tagSource:function( request, response ) {
$.ajax({
url: "http://localhost/test.com/tag/tagdb.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
triggerKeys:['enter', 'comma', 'tab'],
allowNewTags: false
});
});
//http://girlzunderground.com/php/profile-tags.php?t=books&txt=book
</script>
</head>
<body>
<div class="box">
<form action="display.php" method="post">
<ul id="demo3" class="tagit">
<li class="tagit-new" >
<input id="test1" name="test1[]" style="width:200px;" class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
</li>
</ul>
<input type="text" value="qqq" name="q"/>
<input type="submit" value="submit"/>
</form>
</div>
</body>
</html>
But when i submit the form, i can't get input "test1" value. But i can get input "q" value.
This is my display.php page
<?php
$Category=$_POST['test1'];
$q=$_POST['q'];
echo $q;
//exit();
$allCourse=NULL;
$count=0;
foreach($Category as $Cat)
{
$count=$count+1;
$allCourse=$allCourse.'~'.$Cat;
}
$allCourse=$allCourse.'~';
echo $allCourse;
?>
How can i get my tag-it value from html form..
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.