Develop Reference

Trigger JS function on pageload when populating select box from database

I have the following js script that triggers onChange of the select box below.
It then retrieves data from a table and returns some input fields populated with the data (using PHP code below). Then saves the data.
This part works fine.
However, if I run the script again, and it populates the selected option from DB and shows as a selected option, but it does not display the populated input fields returned from the PHP code/DB query since I am not triggering the onChange again.
I tried to add 'window.onload = showAgentOne;' under the JS for the onChange function, assuming it would see the value in (str) from the select box, but I am probably missing something as it does not work.
New to JS - I hope this makes sense.
JS:
function showAgentOne(str) {
if (str == "") {
document.getElementById("agent1").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("agent1").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "user_agent1.php?q=" + str, true);
xmlhttp.send();
}
window.onload = showAgentOne; // trigger function on pageload - not working
HTML:
<select name="narid" onchange="showAgentOne(this.value)" class="form-control">
<option selected="selected" disabled value="">select agent</option>
<?php
$sql = "select last_name, first_name, active, nrds_id from ft_form_2 ORDER BY last_name";
$sql_result = mysqli_query($mysqli,$sql);
while ($row = mysqli_fetch_array($sql_result)) }?>
<option value="<?php echo $row[" nrds_id "]; ?>" <?php if($narid_agent1==$ row[ "nrds_id"]) { echo ' selected '; } ?> >
<?php echo strtoupper($row["last_name"]) . ' > ' . $row["first_name"] . ' ' . $row["last_name"] . ' ['.$active.']'; ?>
</option>
<? } ?>
</select>
<div id="agent1"></div>
PHP (user_agent1.php) ------------------------- $q=$_GET["q"]; $sql="SELECT pay_to_name,nrds_id FROM ft_form_2 WHERE nrds_id = $q"; $result = mysqli_query($mysqli,$sql); while($row = mysqli_fetch_array($result)) { ?>
<input type="text" name="narid_agent1" value="<?php echo $row['nrds_id']; ?>">
<input type="text" name="pay2_agent1" value="<?php echo $row['pay_to_name']; ?>">
<?php } ?>

'window.onload = showAgentOne;' is a good try but it is expecting a str param, otherwise it returns and do nothing. That's why nothing happens.
You will have to try something like
window.onload = function (event) {
let str = 'ADD_YOUR_VALUE_HERE';
showAgentOne(str);
}
But I can't help you with what str should be.

Put dropdown selection in variable and use in search query

I have 2 pages I am working with, index.php and dropdown-display.php. I have a dropdown in index.php that sends the selection to dropdown-display.php and filters my HTML table. I also have a search box, and if a dropdown selection has already been made, I want it to search the already filtered results by using the dropdown value in the query as well.
So how can I incorporate the variable $q below (if a dropdown selection has been made) into my search query?
This is what I currently have...
Index.php:
<?php
if(isset($_POST['search-species'])) {
// variable that brings in search value
$speciesToSearch = $_POST['SpeciesToSearch'];
// query used to filter results based on search
$sql = "SELECT *
FROM Example_Final_Structure
WHERE [Species] LIKE '%".$speciesToSearch."%'
ORDER BY [Current-SKU] ASC";
} else {
$sql = "SELECT *
FROM Example_Final_Structure
ORDER BY [Current-SKU] ASC";
}
?>
HTML in index.php:
<script>
// function that gets the value of the dropdown and sends it to display-dropdown.php to get results
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
var newTableObject = document.getElementById('millwork_table');
sorttable.makeSortable(newTableObject);
}
};
xmlhttp.open("GET","dropdown-display.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<form name="myForm" action="">
<section id="supp_name_dropdown" onchange="hide2()" align="center" >
<select id="selectsupp" class="supp-name" data-attribute="supp" onchange="showUser(this.value)">
<option value="" selected disabled>Supplier Name</option>
<?php foreach($drop->fetchAll() as $dropdown) { ?>
<option class="sku-<?php echo $dropdown['Supplier-Name'];?>" value="<?php echo $dropdown['Supplier-Name'];?>"><?php echo $dropdown['Supplier-Name'];?></option>
<?php } ?>
</select>
</section>
</form>
<section id="search-species">
<form method="post" action="index.php">
<input name="SpeciesToSearch" class="search" type="text" placeholder="Species">
<span class="arrow"></span>
<button type="submit" class="button" name="search-species" value="Search">Search</button><br>
</form>
</section>
Dropdown-display.php:
<?php
$q = ($_GET['q']); //variable that holds dropdown selection value
$sql="SELECT *
FROM Example_Final_Structure
WHERE [Supplier-Name] = '$q'";
?>

In your search form you could add a <input type="hidden" id="searchsupp" name="searchsupp" value=""/>
then en your showUser function, inject the value received to the hidden input. document.getElementById("searchsupp").value = str;
Then you can use this value in your search by adding it to your query
"SELECT *
FROM Example_Final_Structure
WHERE ".($searchsupp != "" ? "[Supplier-Name] = '".$searchsupp."' AND ")."[Species] LIKE '%".$speciesToSearch."%'
ORDER BY [Current-SKU] ASC"
Where $searchsupp is the variable you make from the posted data.

Fetching column value from DB for a Select Option

I've a drop-down list for selecting an Id on a php page, the values of which is getting fetched from the database(1st Column).
There's a text-field next to the drop-down in which I want to display the name of the member (2nd Column) from the database.
The code is below -
<?php
include ('connection.php');
$query = "SELECT Member_id FROM member_db ORDER BY Member_id ASC";
$result = mysqli_query($conn, $query) or die(mysqli_error($conn)."[".$query."]");
?>
<Select id="st_id" placeholder="Enter Member id" name="ist_id" required class="styled-select green semi-square onChange="showMember(this.value)"">
<option selected ="true" disabled="disabled">Select Member Id</option>
<?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){?>
<option value=" <?php $row['Member_id']; ?> ">
<?php echo $row['Member_id'];?>
</option>
<?php }?>
</Select>
<input style="min-height:30px" type="text" id="st_name" placeholder="Member name" name="ist_name" disabled/>
The JavaScript code I'm calling is this -
function showMember(str) {
if (str == "")
{
document.getElementById("txtHint").innerHTML = "";
return;
}
else {
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getMember.php?q="+str,true);
xmlhttp.send();
}
}
The getMember.php is another php file in which I'm firing a query to get the Member_name based on the value of Member_id.
But the problem is that somehow, that onChange, the page doesn't call the showMember() function.

1) Missing echo in value attribute <option value="<?php $row['Member_id']; ?> "> <?php echo $row['Member_id'];?>
2) onchange should be outside the class attribute .<Select id="st_id" placeholder="Enter Member id" name="ist_id" required class="styled-select green semi-square" onChange="showMember(this.value)">
simple use jquery ajax
function showMember(str)
{
$.ajax({
url:'getMember.php',
type:'post',
data:{q:str},
success:function(data)
{
$('#st_name').val(data);
}
});
}
Note :don't forgot to include jquery

Using AJAX, PHP and MySQL to display table data

I would like to display one column of data, [pin], based on the [plan] and [order_id] values. plan=9 and order_id=0. Would like to load data without reloading page, using ajax.
Here is my HTML/Script:
<script>
function showPins(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getPins.php?q="+str,true);
xmlhttp.send();
}
}
</script>
HTML:
<div align="center">
<h3>View PIN's</h3>
<form>
<select name="users" onchange="showPins(this.value)">
<option value="">Select Plan Type:</option>
<option value="1">Plan1</option>
<option value="2">Plan2</option>
<option value="3">Plan3</option>
</select>
</form>
<br/>
<div id="txtHint"></div>
</div>
This is my PHP file (getPins.php):
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('myHost','myUsername','myPw','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"my_db");
$sql="SELECT * FROM attPins WHERE (order_id=0, plan=9 and id = '".$q."')";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>PIN's</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['pin'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
This is based off the tutorial shown here: http://www.w3schools.com/php/php_ajax_database.asp
Trying to make it work for showing the correct pins for plan type chosen.

your query would be wrong read manual where
$sql="SELECT * FROM attPins WHERE (order_id=0, plan=9 and id = '".$q."')";
It would be
WHERE (order_id=0 and plan=9 and id = '".$q."')
Or
WHERE (order_id=0 OR plan=9 and id = '".$q."')
according to your requirment

how to get values from mysqldb to dropdownbox using php ajax?

how to get values from mysql db to dropdownbox using php ajax?
what i need is
when i select anyone value from dropdownbox then the corresponding row values(get from db) will be displayed to another dropdownboxes/textboxes?
Thanks
Siva

you will have to use both javascript and php to achieve this
<select id="month" onchange="change()">
<option value="1">January</option value="2">
<option value="1">January</option value="2">
</select>
<div id="result"></div>
<script>
function change(){
var sel_month = $('#month').val();
$.post("url_to_your_php_file", {month:sel_month})
.done(function(data) {
$('#result').html(data);
});
}
on php side...
<?php
$month = $_POST['month'];
//run your query here
//result should be an array...
//populate a select box with the array...
echo '<select>';
foreach($result as $data){
echo '<option value="'.$data['id'].'">'.$data['name/title'].'</option>';
}
echo '</select>';

Suppose this is my select drop down , i want to display data corresponding to a month ,
Is that your question ?
<select name="monthview" onchange="showUser(this.value)">
<option><b>Change Month</b>
<option value="1">January
<option value="2">February
<option value="3">March
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">August
<option value="9">September
<option value="10">October
<option value="11">November
<option value="12">December
</select></td>
<div id="txtHint">YOUR NEW DROP DOWN WITH ROWS FROM DB WILL BE HERE </div >
*** AJAX CALL ***:
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
var x=document.myForm.eid.value;
xmlhttp.open("GET","databasefetch.php?q="+str,true);
xmlhttp.send();
}
</script>
PHP SIDE YOU NEED TO RECEIVE THE MONTH VALUE AND THEN SEND IN THE CORRESPONDING ROWS IN A DROP DOWN AS A RESPONSE TO AJAX CALL , LIKE THIS .
$month_selected = $_GET['q'];
//connect to database
$result ="your sql query"
//create a drop down now
echo "<select>";
echo "<select name='projectassignedto'>";
echo "<option>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['employeeid'] ."'>" . $row['employeeid'] ."</option>";
}
echo "</select>";
echo "";

u can goto w3 and get the code for php-ajax-sql , Your work shall be done if you have little knowledge with php and sql .