I have populated a drop down from my MySQL Database successfully. I am now wanting to be able to extracte the value from this dropdown. When ever I extract the value from the dropdown it is only the position value of the value in the list.
Here is the working drop down below:
<?php
include_once("connection.php");
function fill_name($connect)
{
$output = '';
$sql = "SELECT name, id FROM notes";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["id"].'">'.$row["name"].'</option>';
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Patient Notes View</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</script>
</head>
<body>
<br /><br />
<div class="container">
<form action="dropdown_selection.php" method="post">
<select name="name" id="name">
<option value="">Show All Patients</option>
<?php echo fill_name($connect); ?>
</select>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
And here is the page it then refers to:
<?php
$patient_name = $_POST['name'];
echo $patient_name
?>
The output is either 1,2,3,4, but I am wanting it to output what is is selected in the dropdown.
Thnks for your help
You can either change the value of your elements, or remove them. If the element has no value its content will be sent as the value.
The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
So either:
$output .= '<option value="'.$row["name"].'">'.$row["name"].'</option>';
or
$output .= '<option>'.$row["name"].'</option>';
The output is number is correct as you set option value to be ID, not NAME -> <option value="'.$row["id"].'"> therefore you get IDs
Related
I have been trying to get it so that I can assign a variable to the value that the user selects in my drop-down menu of countries. I have done this before with tables, but not drop down lists, so I'm not sure how. Ultimately, I am trying to have a new page return a table for the country selected once the user clicks the submit button, and know I need a varaiable assigned to what the user selects. Here is my code so far:
<html>
<head>
<title>test2</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<?php include("header.php"); ?>
<article>
<!-- This describes the choice of country name selection -->
<h1>Please select your country:</h1>
<form action='processformD.php' method='GET'>
<select name='CountryName'>
<?php
$query = "SELECT * FROM alphabetizedCountryNames;";
$result=mysqli_query($con, $query) or die ("Couldn't execute query.");
// $row = mysqli_fetch_assoc($result);
?>
<?php
while($row = mysqli_fetch_array($result))
{
extract($row);
echo "<option value='$CountryName'>$CountryName\n";
}
?>
</select>
<div class="centerthatshit"><?php echo "<p><input type='submit' value='submit' /></p>\n"; ?></div>
</form>
</article>
<?php include("footer.php"); ?>
</body>
</html>
</body>
</html>
I have this code to pull values and labels from a MySQL DB and populate a drop down box, on change it put the value in a text field, but I want the label not the value.
Any pointers would be good..
<select name="CompanyInternalID" autofocus class="textBox" id="CompanyInternalID" style="width:300px" onchange="document.form1.CompName.value=this.value">
<?php
do {
?>
<option value="<?php echo $row_rsCustomerList['AKA']?>"><?php echo $row_rsCustomerList['CustomerName']?></option>
<?php
} while ($row_rsCustomerList = mysql_fetch_assoc($rsCustomerList));
$rows = mysql_num_rows($rsCustomerList);
if($rows > 0) {
mysql_data_seek($rsCustomerList, 0);
$row_rsCustomerList = mysql_fetch_assoc($rsCustomerList);
}
?>
</select>
<input type="text" name="CompName" class="textBox" style="width:180px" id="CompName" />
Thanks
You can use jQuery to get the selected value and put in the required text field.
Suppose the id of dropdown is "drop" and id of text field is "txt_id" . Now you can use below code:
$("#drop").change(function () {
$("#txt_id").val($(this).val());
});
You can use below code:
You can also learn jQuery at http://www.w3schools.com/jquery/
<!doctype html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<select name="CompanyInternalID" autofocus class="textBox" id="CompanyInternalID" style="width:300px" > <?php do { ?> <option value="<?php echo $row_rsCustomerList['AKA']?>"><?php echo $row_rsCustomerList['CustomerName']?></option> <?php } while ($row_rsCustomerList = mysql_fetch_assoc($rsCustomerList)); $rows = mysql_num_rows($rsCustomerList); if($rows > 0) { mysql_data_seek($rsCustomerList, 0); $row_rsCustomerList = mysql_fetch_assoc($rsCustomerList); } ?> </select> <input type="text" name="CompName" class="textBox" style="width:180px" id="CompName" />
<script>
$("#CompanyInternalID").change(function () { $("#CompName").val($(this).val());
}
);
</script>
</body>
</html>
i made this simple code to update the database row, and i want to show the result of all the echo statement in the same page of the submit form without reloading the page (using ajax).
Form HTML code:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Update Status</title>
</head>
<body>
<form method="POST" action="update.php">
<p>Order ID: <input type="text" name="T1" size="5" required></p>
<p>Status: <select size="1" name="D1">
<option selected value="In Progresss">In Progresss</option>
<option value="Finished">Finished</option>
</select></p>
<p><input type="submit" value="Update" name="B1"></p>
</form>
</body>
</html>
update.php file:
<html>
<head>
<title>Update Status</title>
<?php
$connection = new mysqli("localhost","root","T00r", "sells");
// Check connection
if($connection->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;;
}
//select database to use
$db_select = mysqli_select_db($connection,"sells");
if(!$db_select){
die("Database selection failed: " . mysqli_error());
}
$T1=$_POST['T1']; $D1=$_POST['D1'];
//check if Order ID is available
$check1=mysqli_query($connection,"SELECT Order_ID FROM clients WHERE Order_ID = '$T1' ");
if (mysqli_num_rows($check1) == 0) {
echo " <b> == No Order With This ID == </b>";
}
else {
//insert value into database
$sql=mysqli_query($connection,"UPDATE Clients SET Status = '$D1' WHERE Order_ID = '$T1'");
//check if the Status is Updated
$check2=mysqli_query($connection,"SELECT Status FROM clients WHERE Order_ID = '$T1' ");
//get the value of Satuts to check if it's equal to the input data
while($row = mysqli_fetch_array($check2)){
if($row["Status"] != $D1){
echo " <b> == Status Not Updated == </b>";
}
else echo"<b> == Status Updated == </b>";
}
if(!$sql){
die("Database query failed: " . mysqli_error());
}
}
mysqli_close($connection);
?>
</head>
</html>
True, you should use AJAX. It's not that hard, try this:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Update Status</title>
</head>
<body>
<form method="POST" id="updateForm" action="update.php">
<p>Order ID: <input type="text" name="T1" size="5" required></p>
<p>Status: <select size="1" name="D1">
<option selected value="In Progresss">In Progresss</option>
<option value="Finished">Finished</option>
</select></p>
<p><input type="submit" value="Update" name="B1"></p>
</form>
<div id="ajaxResponse"></div>
<!-- Include the JQuery library !-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
<!-- Add a listener. This will be invoked when the form is submitted, 'submit' is the action, and '#updateForm' is the context it is listening !-->
$(document).on('submit','#updateForm',function(e){
<!-- This stops the original event. So that's the original submit action of the form. !-->
e.preventDefault();
<!-- Get the form data and serialize it into an array. !-->
var data = $('#updateForm').serializeArray();
<!-- The AJAX request. '.post' indicates that it should be a POST request. 'data' add the serialized array in the POST request. 'htmlResponse' is the response you get from the POST request, in your case your echo rules. !-->
$.post('update.php',data,function(htmlResponse){
<!-- The POST request is finished and the response is putted in the htmlResponse variable. So display this by setting the content(html) of the ajaxResponse div to the htmlResponse variable
$('#ajaxResponse').html(htmlResponse);
});
});
</script>
</form>
</body>
</html>
I make a 2 level dependant drop down list and that work fine, but I don't know how to get the 2nd level value with javascript..here is the code I'm using..
dropdownlist.html:
<script type="text/javascript" src="../js/dropdown_list.js"></script>
<select class="level" id="level1" onChange="get_level2(this.value)">
<option selected="selected" value="0">--Choose One--</option>
<?php
$sql_get = mysql_query ("SELECT * FROM ajax_table WHERE pid=0");
while($row_get = mysql_fetch_array($sql_get))
{
echo "<option value='".$row_get['id']."'>".$row_get['category']."</option>";
}
?>
</select>
<span id="level2"></span>
since the dependant work just fine..so I think I can skip the get_level2 () function and another php file to process the 2nd level drop down..
and here is the code where I try to get the value from drop down list when button click..
dropdown_list.js :
function cekForm() {
//the getValue1 work fine but I can't make getValue2 work..
//how to get value from 2nd level drop down list with getValue2??
var value1 = document.getElementById("level1");
var getValue1 = value1.options[value1.selectedIndex].value;
var value2 = document.getElementById("level2");
var getValue2 = value2.options[value2.selectedIndex].value;
if (getValue1 == 0){
alert("Please Choose One");
}
if (getValue1 != 0){
//where I want to pass the dropdown value to post_value.php
window.location= "post_value.php";
}
}
How to get the value of 2nd level drop down list??and how to pass the value to post_value.php??
please help me...
Update :
Here is the code from firefox view page source:
//this is <head> part
<link href="../css/val.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../js/dropdown_list.js"></script>
//end of </head>
//<body> part
<div class="form-div">
<form id="form_level" name="form_level" style="padding-top:0px;">
<div class="form-row" style="padding-top:0px;">
<h3>Choose Drop Down :</h3>
<select class="level" id="level1" onChange="get_level2(this.value)" style="position:relative; top:-40px; left:150px;">
<option selected="selected" value="0">--Choose One--</option>
<option value='1'>BAA</option><option value='2'>BAK</option><option value='3'>BAUK</option></select>
<span id="level2"></span>
</div>
<div class="form-row" style="position:relative; top:100px; left:305px;">
<input class="submit" value="Send" type="button" onClick="cekForm()">
</div>
<br /><br />
</form>
</div>
Pass value using get method through url
<script>
function cekForm() {
var getValue1 = document.getElementById("level1").value;
var getValue2 = document.getElementById("level2").getElementsByTagName("select")[0].value;
if (getValue1.length==0){
alert("Please Choose One");
return;
}
if (getValue1.length>0){
window.location= "post_value.php?level1="+getValue1+"&level2="+getValue2;
}
}
</script>
and receive it in php file
post_value.php
<?php
$level1 = $_GET["level1"];
$level2 = $_GET["level2"];
?>
I am trying to fill a listbox on a webpage and I want the listbox to start blank. Once the button is clicked the listbox should populate. My code below automatically fills the listbox but I would rather have the button do it.
<?php
$dbc = mysql_connect('','','')
or die('Error connecting to MySQL server.');
mysql_select_db('MyDB');
$result = mysql_query("select * from tblRestaurants order by RestName ASC");
?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SEARCH</title>
</head>
<body>
<form method="post" action="1004mcout.php">
<p><center>SEARCH</CENTER></P>
<select name="RestName">
<?php
while ($nt= mysql_fetch_assoc($result))
{
echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>';
}
?>
</select>
<p> SPACE</p>
<p>Click "SUBMIT" to display the calculation results</p>
<input type="submit" name="Submit" value="Submit" />
<br />
</form>
</body>
</html>
I would either: Preload the data into the page as some ready but invisible html list (maybe a bit n00b), or save the data as a javascript array and a function will load it into the page (better), or do an ajax call to the same page (for simplicity) (probably best, leaves you the option open for updated data after page initiation).
The Ajax route will have to use jQuery (change this_page.php to whichever page this is called):
<?php
while ($nt= mysql_fetch_assoc($result))
$arrData[] = $nt;
//If you want to test without DB, uncomment this, and comment previous
/*$arrData = array(
array('RestID' => "1", 'RestName' => "Mike"),
array('RestID' => "2", 'RestName' => "Sebastian"),
array('RestID' => "3", 'RestName' => "Shitter")
);*/
if(isset($_GET["ajax"]))
{
echo json_encode($arrData);
die();
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function displayItems()
{
$.getJSON("this_page.php?ajax=true", function(data) {
$.each(data, function(index, objRecord) {
var option=document.createElement("option");
option.value=objRecord.RestID;
option.text=objRecord.RestName;
$("#RestName").append('<option value="' + objRecord.RestID + '">' + objRecord.RestName + '</option>');
});
});
}
</script>
<title>SEARCH</title>
</head>
<body>
<form method="post" action="1004mcout.php">
<p><center>SEARCH</CENTER></P>
<select id="RestName"></select>
<p> SPACE</p>
<p>Click "SUBMIT" to display the calculation results</p>
<button type="button" onclick="javascript:displayItems();">Insert options</button>
<br />
</form>
</body>
</html>
Essentially, what it does, it collects the data, checks if there is a request for the ajax data in the url, if not, it prints the rest of the page (with an empty select). If there is an ajax flag in the url, then the php will encode the data into json, print that and stop.
When the User receives the page with an empty select, it clicks the button which will trigger the displayItems() function. Inside that function, it does a jQuery-based ajax call to the same page with the ajax flag set in the url, and the result (which is json), is evaluated to a valid javascript array. That array is then created into options and loaded into the RestName SELECT element.
A final cookie? You could just print the data as options, into the select anyway, just like the previous answers described. Then, inside the displayItems() function, you clear the select before loading it from the jQuery/ajax call. That way, the user will see data right from the beginning, and will only update this with the most recent data from the DB. Clean and all in one page.
<?php
$dbc = mysql_connect('','','')
or die('Error connecting to MySQL server.');
mysql_select_db('MyDB');
$result = mysql_query("select * from tblRestaurants order by RestName ASC");
?>
<html>
<head>
<script>
function displayResult()
{
var x =document.getElementById("RestName");
var option;
<?php
while ($nt= mysql_fetch_assoc($result))
{
echo 'option=document.createElement("option");' .
'option.value=' . $nt['RestID'] . ';' .
'option.text=' . $nt['RestName'] . ';' .
'x.add(option,null);';
}
?>
}
</script>
</head>
<body>
<select name="RestName">
</select>
<button type="button" onclick="displayResult()">Insert options</button>
</body>
</html>
Read more about adding options to select element from java script here
how about this simple way,
is this what you mean,
its not safe, any one can post show=yes but i think you just like users to be able to simply click and see result
<select name="RestName">
<?php
// if show=yes
if ($_POST['show'] == "yes"){
$dbc = mysql_connect('','','')
or die('Error connecting to MySQL server.');
mysql_select_db('MyDB');
$result = mysql_query("select * from tblRestaurants order by RestName ASC");
while ($nt= mysql_fetch_assoc($result))
{
echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>';
}
}
?>
</select>
<form method="post" action="#">
<input type="hidden" name="show" value="yes" />
<input type="submit" name="Submit" value="Submit" />
</form>
you can also simply use a hidden div to hid listbox and give the button an onclick action to show div, learn how in here: https://stackoverflow.com/a/10859950/1549838