I've already created my html form with a drop-list menu of 5 selections
I want a selected option from the drop-list to call php function that will echo a selected option to the screen
<label>Fruits</label>
<select name="Fruits">
<option value="Ap">Apple</option>
<option value="BN">Banana</option>
<option value="OR">Orange</option>
For example, here is your html code
<html>
<head></head>
<title>Static Dropdown List</title>
<body bgcolor="pink">
Employee List :
<select>
<option value="Select">Select</option>}
<option value="Moyed">Moyed Ansari</option>
<option value="Asad">Asadullah</option>
<option value="Usman">Usman Ali</option>
</select>
</body>
</html>
Now You will use the above table in the dropdown list using the following code.
<html>
<head>
<title>Dynamic Drop Down List</title>
</head>
<BODY bgcolor ="pink">
<form id="form1" name="form1" method="post" action="<?php echo $PHP_SELF; ?>">
Employee List :
<select Emp Name='NEW'>
<option value="">--- Select ---</option>
<?
mysql_connect ("localhost","root","");
mysql_select_db ("company");
$select="company";
if (isset ($select)&&$select!=""){
$select=$_POST ['NEW'];
}
?>
<?
$list=mysql_query("select * from employee order by emp_id asc");
while($row_list=mysql_fetch_assoc($list)){
?>
<option value="<? echo $row_list['emp_id']; ?>"<? if($row_list['emp_id']==$select){ echo "selected"; } ?>>
<?echo $row_list['emp_name'];?>
</option>
<?
}
?>
</select>
<input type="submit" name="Submit" value="Select" />
</form>
</body>
php is on the server side
where as all the html is on the user side..
if you want to echo the selected option, then you have to send the selected option to the server side using Ajax Request or using some other technique like POST a form.
// using jquery you can get your selected value
<script>
var selected_value = $("#idOfTheSelectTag").val();
// or you can also do
var selected_value = $("#idOfTheSelectTag :selected").text();
// now you can post it to the php page using AJAX where you can echo it
$.post('page_name.php', {SELECTED_VALUE : selected_value}, function(data){
// on the server side in page_name.php file if you echo the value then it will be returned in the data object in the function
});
</script>
Related
I am trying to put countries flag infront of there respective country code likein gmail registration something like this:
I tried with img src and background but images are not visible.I have a table in mysql with ISO,country name,code. I am trying to use https://ipdata.co/flags api to populate flag.
My code:
<select Emp Name='NEW'>
<option value="">--- Select ---</option>
<?
$list=mysqli_query($con,"select * from country");
while($row_list=mysqli_fetch_assoc($list)){
$display="+".$row_list['phonecode']."-".$row_list['name'];
$flag=$row_list['isosmall'];
?>
<option style="background-image:url(https://ipdata.co/flags/<?php echo $flag;?>.png);"></option>
// <option value="<img src="https://ipdata.co/flags/<?php echo $flag;?>.png"/></option>
// <? echo $display; ?>"</option><? if($row_list['iso']==$select){ echo "selected"; } ?>
// <?//echo $row_list['name'];
//echo $display;?>
</option>
<?
}
?>
</select>
You can do it with this jquery plugin and replace with your data:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
</head>
<body>
<select class="country" name="wcpbc-manual-country" id="country">
<option value="AU" data-iconurl="https://aus.merchnow.com/img/location-aus.png">AU some text</option>
<option value="IN" data-iconurl="https://images0.voylla.com/flags/inr.gif">IN some text</option>
</select>
</body>
</html>
JS:
$("#country").selectBoxIt();
JSFiddle example
I'm trying to insert values input from the user in a form into my database.
I am trying to create 2 drop down lists, with the first deriving the options for the second. For example the first drop down list for Faculty, with the second drop-down list containing the schools within the selected faculty.
I am also then wanting to insert the gathered information into my database however I can focus on that after getting the drop-down's correct first.
My register page is on one page with the getSchool.php on a different file, I have a feeling the connection between the two could be my issue.
The register.php is below. This is the page the form is on
<?php
session_start();
include('dbConnect.php');
$queryStr=("SELECT * FROM faculty");
$dbParams=array();
// now send the query
$results = $db->prepare($queryStr);
$results->execute($dbParams);
?>
<html>
<head>
<TITLE>Faculty & School</TITLE>
<head>
<!-- Help for code to create dynamic drop downs -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
type="text/javascript"></script>
<script>
function getFaculty(val) {
$.ajax({
type: "POST",
url: "getFaculty.php",
data:'facultyID='+val,
success: function(data){
$("#schoolList").html(data);
}
});
}
function selectFaculty(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<div class="frmDronpDown">
<div class="row">
<label>Faculty:</label><br/>
<select name="faculty" id="facultyList" class="demoInputBox"
onChange="getFaculty(this.value);">
<option value="">Select Faculty</option>
<?php
foreach($results as $faculty) {
?>
<option value="<?php echo $faculty["facultyID"]; ?>"><?php echo
$faculty["facultyName"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<form action="addBlood.php" method="post">
<label>Test:</label><br/>
<select name="test" id="test-list" class="demoInputBox">
<option value="">Select Test</option>
</select>
</div>
</div>
<label>Result:</label><input class="input" name="result" type="text"><br>
<label>Date:</label><input class="input" name="date" type="date"><br>
<input class="submit" name="submit" type="submit" value="Submit">
</form>
Below is the getSchool.php which gets all the schools
<?php
include('dbConnect.php');
if(!empty($_POST["facultyID"])) {
$queryStr=("SELECT * FROM school WHERE facultyID = '" . $_POST["facultyID"]
. "'");
$dbParams=array();
// now send the query
$results = $db->prepare($queryStr);
$results->execute($dbParams);
?>
<option value="">Select School</option>
<?php
foreach($results as $school) {
?>
<option value="<?php echo $school["schoolID"]; ?>"><?php echo
$school["schoolName"]; ?></option>
<?php
}
}
?>
Thanks in advance for any feedback and help.
Simon
url: "getFaculty.php",
data:'facultyID='+val,
success: function(data){
$("#schoolList").html(data);
Where is the #schoolList element ? Why getFaculty.php? Should it not be getSchool.php ?
First, just to re-iterate what was already mentioned, update your getFaculty() to get getSchool() and make sure it points to getSchool.php.
Now, you need to create a div following your first drop-down with an id schoolList.
<div class="row" id="schoolList"></div>
Now, update your getSchool.php so that it generates the full form/selection. Something along the lines of:
<?php
include('dbConnect.php');
if(!empty($_POST["facultyID"])) {
$queryStr=("SELECT * FROM school WHERE facultyID = '" . $_POST["facultyID"]
. "'");
$dbParams=array();
// now send the query
$results = $db->prepare($queryStr);
$results->execute($dbParams);
?>
<label>Schools:</label><br/>
<select name="schoolSelect" id="schoolSelect" class="demoInputBox">
<option value="">Select School</option>
<?php
foreach($results as $school) {
?>
<option value="<?php echo $school["schoolID"]; ?>"><?php echo
$school["schoolName"]; ?></option>
Once you've got those ideas down, you'll have to make sure you have the full flow of your page the way you want it. Then follow similar standards for posting any inputs to the php page you use for database manipulation.
As noted in earlier posts, this solution still leaves you vulnerable to injection. That's for another post, another day.
I have a php variable called $photographerNum that i want the value of to change depending upon value in my drop down field on my page, what would the javascript look like for this as well as how to receive the new value to update the php variable?
<!DOCTYPE html>
<html>
<body>
<? $photographerNum = 1; ?>
<p>Select an item from the list.</p>
<select id="photographerNum" onchange="myFunction()">
<option value="Item1">Item1
<option value="Item2">Item2
<option value="Item3">Item3
<option value="Item4">Item4
</select>
<script type="text/javascript">
function myFunction() {
var itemSelected = document.getElementById("photographerNum").value;
document.getElementById("demo").innerHTML = "You selected: " + itemSelected ;
}
</script>
<p id="demo"> - photoNum=<? echo $photographerNum ?></p>
</body>
</html>
Try this, when you select a new item a form is triggered which outputs the value of the selected item, after that, you can send the variable and process it in server-side.
<?php
$photographerNum = 1;
echo 'Initial value photographerNum::' . $photographerNum;
?>
<form name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<select name="photographerNum" id="IdphotographerNum" onchange="myform.submit();">
<option value="0">Selecte an item
<option value="1">Item1
<option value="2">Item2
<option value="3">Item3
<option value="4">Item4
</select>
</form>
<?php
if (isset($_POST['photographerNum'])) {
echo 'New value photographerNum::' . $_POST['photographerNum'];
}
?>
Ok below I will link a screenshot to show you what I'm working with so far.
In the left box I was to fill it with a list of 'EventIDs' which are the primary key on my database table.
When one of these IDs is selected I want the 'EventName' from the same table to appear in the box to the right.
https://gyazo.com/79e5e49bd288838c8ce1ae54fe245494
The problem so far is that the Event name is showing in the left select box and I'm not sure how to make it fetch data from the table when selected and to output in the text box. Hope that makes sense
Here is my code:
<!DOCTYPE html>
<html>
<head> </head>
<body>
<?php include 'login.php';?>
<select name="EventID">
<option value="">Select Event ID</option>
<?php
$result1 = mysqli_query($dbconnect, "SELECT EventID, EventName FROM event");
while($row1 = mysqli_fetch_assoc($result1)) {
?>
<option value="<?php echo $row1['EventID']; ?>"><?php echo $row1['EventName']; ?></option>
<?php
// End while loop.
}
?>
</select>
Event Name: <input name="EventName" type="text">
</body>
<html>
<!DOCTYPE html>
<html>
<head> </head>
<script>
function choice1(select) {
document.getElementById("EventName").value = select.options[select.selectedIndex].value;
}
</script>
<body>
<?php include 'login.php';?>
<select name="EventID" onchange="choice1(this)">
<option value="">Select Event ID</option>
<?php
$result1 = mysqli_query($dbconnect, "SELECT EventID, EventName FROM event");
while($row1 = mysqli_fetch_assoc($result1)) {
?>
<option value="<?php echo $row1['EventName']; ?>"><?php echo $row1['EventID']; ?></option>
<?php
// End while loop.
}
?>
</select>
Event Name: <input name="EventName" id="EventName" type="text">
</body>
<html>
First Select
<Select id="drop1" onchange="drop1(this.value)">
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
<div id = "txtHint1"></div>
Once a value has been selected, the value will be sent to ajax. And corresponding dropdown will be generated on another page and show in div txthint1.
Second Select
<Select id="drop2" onchange="drop2(this.value)">
<option value ='111'>111</option
<option value ='222'>222</option
<option value ='333'>333</option
</select>
<div id = "txtHint2"></div>
As the generated dropdown is another php page, how can I get what the value the user has selected to show on my current page (div txthint2)?
I will be working in php.
$value = $_GET['a'];
There are no submitted button.
Send out the second request on a successful response:
function one() {
$.ajax({
...
success: function() {
two(TheValueFromOne);
}
});
}
function two() {
$.ajax({
...
});
}
What is happening is that once the request has been made successfully, then it is automatically starting the next request right after.
However, if you are jsut passing values around form one page to another you really do not need AJAX.
FOR EXAMPLE:
test1.php:
<form action="test2.php" method="get">
Book Title <br />
<input type="text" name="booktitle" /><br />
<input type="submit" name="submit" value=" - Update Database - " />
</form>
test2.php
<body>
<? echo $_GET["booktitle"]; ?>
</body>
IN YOUR CASE:
test1.php:
<Select id="drop1" name="test1">
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
test2.php
<Select id="drop1">
<option selected = "<? echo $_POST['test1']; ?>"></option>
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
#QUESTION:
<div id = "txtHint2"><? echo $_POST['test1']; ?></div>
#POSTING WITH FORM:
<form method="post" action="test2.php" >
<Select id="drop1" name="test1" onChange="this.parentNode.submit()">
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
</form>