Im new to php and ajax and wanted to display a table that's filled with content of a database. I succeeded doing it but now I'm trying to change the tables content with a select. I know there are many sites explaining how to do it, but I somehow don't get it. The best solution for me is by changing the table without a reload of the page or reloading it with a separate button.
I read about doing it with ajax / javascript but, as I mentioned, Im not familiar with those things.
Below is my code thats already workin.
PHP:
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
mysql_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users";
$db_query = mysql_query($sql);
?>
<table cellpadding="1" cellspacing="3" border="1">
<tr>
<td>ID</td>
<td>Mail</td>
</tr>
<?php
while ($adr = mysql_fetch_array($db_query)){
?>
<tr>
<td><?=$adr['id']?></td>
<td><?=$adr['user_email']?></td>
</tr>
<?php
}
?>
</table>
My selects:
<select name="Choose" title="chose">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
Id really appreciate some code or hints how to do it.
Here is the code:
html:
<table id="tableid"> //mention id for a table
......
......
</table>
// create an event for select
<select name="Choose" title="chose" onchange="getajax(this.value)">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
javascript:
function getajax(value){
$.ajax({
type: "GET",
url: "Ajaxpage.php",
data: {text:value},
success: function(data) {
$("#tableid").html(data);
}
});
}
Ajaxpage.php:
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysqli_connect($mysqlhost, $mysqluser, $mysqlpwd); //use mysqli instead of mysql
mysqli_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users where someid='".$_GET['text']."'";
$query = mysql_query($sql);
while($row= mysql_fetch_array(query)){
echo "<tr><td>".$row['id']."</td><td>".$row['user_email']."</td></tr>";
}
?>
<script>
function reloadWithOptionValue(){
document.FilterFrom.submit();
}
</script>
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
mysql_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users";
if(isset($Choose) && !empty($Choose)){
$sql.=" where id like '%$Choose%' or user_email like '%$Choose%'";
}
$db_query = mysql_query($sql);
?>
<form method="post" name="FilterFrom">
<table cellpadding="1" cellspacing="3" border="1">
<tr>
<td>ID</td>
<td>Mail</td>
</tr>
<?php
while ($adr = mysql_fetch_array($db_query)){
?>
<tr>
<td><?=$adr['id']?></td>
<td><?=$adr['user_email']?></td>
</tr>
<?php
}
?>
</table>
<select name="Choose" title="chose" onchange="reloadWithOptionValue()">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
</form>
try this one
Related
I am using two drop down lists first for category and second for sub category. I want to use Javascript's onChange(); to fetch the values of sub categories but am not able to make out how to use it in the code. Plz guide.
<th>Category</th>
<td>
<select name="category" class="frm" onChange="fun()">
<?php
include("data_connect.php");
$data=mysqli_query($con,"select * from `category`");
while($row=mysqli_fetch_array($data))
{
echo "<option value=".$row['c_id'].">".$row['name']."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<th>Sub-Category</th>
<td>
<select name="sub_category" class="frm">
<?php
if(isset($_POST['sub']))
{
include("data_connect.php");
$data=mysqli_query($con,"select * from `sub_category` where c_id=".$_POST['category']."");
while($row1=mysqli_fetch_array($data))
{
echo "<option value=".$row1['s_id'].">".$row1['name']."</option>";
}
}
?>
</select>
</td>
</tr>
I'm going to ignore for a moment your invalid table structure as I'm not really sure how you're wanting it to look. I'll just wrap what you have in a form for now so you at least have something to work from.
Also, your sub-category query is open to SQL injection attacks. You should use bound parameters to address this. You can continue to use mysqli to do that, but I personally suggest switching to PDO.
<form method="post" id="categoryForm">
<th>Category</th>
<td>
<select name="category" class="frm" onChange="document.getElementById('categoryForm').submit();">
<?php
include("data_connect.php");
$data=mysqli_query($con,"select * from `category`");
while($row=mysqli_fetch_array($data))
{
// check to see if we should re-select this value because it was submitted
$isSelected = (!empty($_POST['category']) && $_POST['category'] == $row['c_id'] ? " selected" : "");
echo "<option value='".$row['c_id']."'" . $isSelected . ">".$row['name']."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<th>Sub-Category</th>
<td>
<select name="sub_category" class="frm">
<?php
// only if we've submitted the main category selection
if(!empty($_POST['category']))
{
// no need to include data_connect.php again, it was already included above
$data=mysqli_query($con,"select * from `sub_category` where c_id='".$_POST['category']."'");
while($row1=mysqli_fetch_array($data))
{
echo "<option value=".$row1['s_id'].">".$row1['name']."</option>";
}
}
?>
</select>
</td>
</tr>
</form>
i am using WordPress platform with PHP AND MYSQL in order to create a website where i have a page that includes 4 dropdown lists that get it data from the MYSQL database and using javascript and AJAX i am trying to make these dropdown list dependent on each other where the user select from teh first one and based on the user's selection the second drop down display data.
the problem is that i have used 2 codes in order to make AJAX work without refreshing the hall page.
when i try to select from the first dropdown list in the debug mode it display:
404 drpdown_fetch_owner.php error page not found
directory structure :
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/search_info_location.php
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php
tables:
site_info:
siteID
siteNAME
ownerID
List item
owner_info:
ownerID
ownerNAME
problem :
after the user click on the first droplist
variable ownerID in the AJAX stay empty and do not get any value.
i added var_dump($sql); under the SQL query in the dropdown_fetch_owner.php code
and i got this statement in the debug mode:
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php:6:
array (size=0)
empty
code1 :
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<!-- the below part of code work as it should --!>
<!--create dropdown list site names-->
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<script type="text/javascript">
// make Dropdownlist depend on each other
$(document).ready(function(){
$('#site_name').change(function(){
var ownerID = $(this).val();
$.ajax({
url:"dropdown_fetch_owner.php",
method:"POST",
data:{ownerID:ownerID},
datatype:"text",
success:function(data){
$('#owner_name').html(data);
}
});
});
});
</script>
dropdown_fetch_owner.php:
<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
global $wpdb;
$sql =$wpdb->get_results("select * from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
echo '<option value="">Select Owner</option>';
foreach($sql as $row){
//while ($row = mysqli_fetch_array($result)) {
echo "<option value = '".$row ->ownerID."'>". $row->ownerNAME."</option>";
}
?>
In wordpress, use ajax(https://codex.wordpress.org/AJAX_in_Plugins)
Change
url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
instead of url:"dropdown_fetch_owner.php",
I'm new in php how can I make this work
delete.php
<?php
include_once 'dbconfig.php';
if($_POST['del_id'])
{
$id = $_POST['del_id'];
$stmt=$db_con->prepare("UPDATE tbluser set status=1 WHERE id=:id");
$stmt->execute(array(':id'=>$id));
}
?>
I want to add an active/inactive dropdown choice in my edit form page but I dont know how to make it work I dont know how to call the delete.php so that when i choose inactive and submit the form it will not show on my datatable
edit_form.php
<?php
include_once 'dbconfig.php';
if($_GET['edit_id'])
{
$id = $_GET['edit_id'];
$stmt=$db_con->prepare("SELECT * FROM tbluser WHERE id=:id");
$stmt->execute(array(':id'=>$id));
$row=$stmt->fetch(PDO::FETCH_ASSOC);
}
?>
<div id="dis">
</div>
<form method='post' id='emp-UpdateForm' action='#'>
<table class='table table-bordered'>
<input type='hidden' name='id' value='<?php echo $row['id']; ?>' />
<tr>
<td>Status</td>
<td><select name=stats>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn btn-primary" name="btn-update" id="btn-update">
<span class="glyphicon glyphicon-plus"></span> Save Updates
</button>
</td>
</tr>
</table>
everything is working it's just an additional functionality in the edit form page
Get the stats like $status= $_POST['stats']; in delete.php
change you $_GET['edit_id'] to $_GET['id']
modify you updated to set the status
$id = $_POST['id'];
$status = $_POST['stats']
$stmt=$db_con->prepare("UPDATE tbluser set status=:status WHERE id=:id");
$stmt->execute(array(':status'=>$status,':id'=>$id));
If you want to call the delete.php, you can use ajax.
<script>
$.ajax({
url:'delete.php',
type:'post',
data: $('form').serialize()
});
</script>
You can get values on the delete.php, with the help of $_POST or $_REQUEST.
And if the delete.php code is right, then on submit of the edit_page.php your datatable can get affected.
I have a two drop downs in my program, and I want it to be like this:
I have a list of employee and display/populate the list and put it
inside of my first drop down.
Second is that, when I choose "Francis" the second drop down will
have a value/event only for Francis and so on when I choose also another employee.
I think the first drop down is correct, but I want to get the value of it and put it inside in my SQL statement in the WHERE clause in my second drop down. How?
<tr>
<td><label for="cname">Client Name:</label></td>
<td><select name="cname" id="cname">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT ClientName FROM events");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["ClientName"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="survey">Survey:</label></td>
<td><select name="survey" id="survey">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT EventTitle FROM events WHERE ClientName = 'Francis'");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["EventTitle"]."</option>";
}
?>
</select>
</td>
</tr>
Do a ajax request for the second select:
create a php file for the ajax request
html:
<tr>
<td><label for="cname">Client Name:</label></td>
<td><select name="cname" id="cname">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT ClientName FROM events");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["ClientName"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="survey">Survey:</label></td>
<td><select name="survey" id="survey">
<option>Choose</option>
</select>
</td>
</tr>
ajax.php
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT EventTitle FROM events WHERE ClientName = '"$_GET['cname']"'");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["EventTitle"]."</option>";
}
?>
js:
<script>
$(function(){
$('#cname').on('change',function(){
$.ajax({
url:ajax.php,
data:{cname:$('#cname').val()};
type:'get',
contentType:'html',
success:function(data){
$('#survey').append(data);
}
});
});
});
</script>
I am trying to figure out how to submit button with two actions based on dropdown list that I get from MySQL. One is for updating to database and then proceed to nextpage while the other actions is to proceed to specific page. I've tried all the solution but most of them only has a few dropdown menu, mine have 40 menus.
This is my JavaScript
<script type='text/javascript'>
$(window).load(function(){
//$(document).ready(function() {
<!--To Enable button "MULA"-->
$('#lst_respon').change(function() {
if ($(this).find(":selected").val()!='11') {
$('#button').attr('disabled',true);
} else {
$('#button').removeAttr('disabled');
}
});
$('#lst_respon').change(function()
{
$('#form1').submit();
});
});
function changeTextBox()
{
var val=$('#lst_respon').val();
if(val==='11')
{
$('#value').prop('disabled', true);
}
else{$('#value').removeAttr("disabled");}
}
</script>
And this is my HTML
<div align="center">
<table width="60%" border="1" class="zui-table">
<thead>
<tr>
<th colspan="3" align="center">Status</th>
</tr>
</thead>
<tr>
<?php
$smt = $conn->prepare('select * From lookup_caraterima');
$smt->execute();
$data = $smt->fetchAll();
$smt2 = $conn->prepare('select * From lookup_kodrespon');
$smt2->execute();
$data2 = $smt2->fetchAll();
?>
<td width="253">Cara Terima</td>
<td width="5">:</td>
<td width="164">
<select name="lst_cterima" id="lst_cterima">
<?php foreach ($data as $row): ?>
<option value="<? echo $row["kodterima"];?>"><? echo $row["jenis"];?>
</option>
<?php endforeach ?>
</select>
</td>
</tr>
<tr>
<td>Kod Respon</td>
<td>:</td>
<td>
<select name="lst_respon" id="lst_respon" onchange="changeTextBox()">
<?php foreach ($data2 as $row2): ?>
<option value="<? echo $row2["kod"];?>"><? echo $row2["kod"].'- '.$row2 ["Keterangan"];?></option>
<?php endforeach ?>
</select></td>
</tr>
<tr>
<td><label for ="sebab">Sebab</label></td>
<td>:</td>
<td><input type="textbox" id="value" size="100" disabled</td>
</tr>
<tr>
<td colspan="3" align="center"><form name="form1" method="post" action="main.php?load=4&SerialID=<?php echo $noSiri; ?>&month=<?php echo $monthA;?>&year=<?php echo $yearA;?>&tab=A">
<input type="submit" name="button" id="button" value="Teruskan" class="myButton">
</form></td>
</tr>
</table>
</div>
For an automated solution to submit a form based a dropdown selection, you could try using the data attribute, something like:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form id="tester">
<select name="test">
<option value="best" data-instructions='<?php echo json_encode(array('action'=>'page1')); ?>'>Best</option>
<option value="rest" data-instructions='<?php echo json_encode(array('action'=>'page2')); ?>'>Rest</option>
<option value="guest" data-instructions='<?php echo json_encode(array('action'=>'page3')); ?>'>Guest</option>
<option value="lest" data-instructions='<?php echo json_encode(array('action'=>'page4')); ?>'>Lest</option>
</select>
<input type="submit" name="submit" value="SUBMIT" />
</form>
<script>
$(document).ready(function() {
$('#tester').submit(function(e) {
// Stop form from submitting
e.preventDefault();
// Get the select dropdown
var thisSelect = $(this).find('select[name=test]');
// Get the value
var thisVal = thisSelect.val();
// Get the options separately
var thisOpts = thisSelect.children();
// Create a holder
var thisData = {};
// Loop through the options
$.each(thisOpts,function(k,v) {
// Get the current value
var currVal = $(v).attr('value');
// If the current value is the same as the value selected
if(currVal == thisVal) {
// Get the instructions from the option
thisData = $(v).data('instructions');
// Stop looping
return false
}
});
console.log(thisData);
});
});
</script>
On submission, the selection will give you an object that you can use to instruct how to submit the form:
// thisData.action
{action: "page2"}