I made this work already but somehow it stopped working. I want to display informations from database related to the chosen data from the select box without clicking a button so I used ajax.
The button "Approve Clearance" is used for another action which is I wished to used after the display of data.
There is a div with id #records which is hidden and will show upon display of data.
<div class="card-body">
<form id="gform" action="action/actionclearance.php" method="POST">
<label>Student ID</label>
<select id="stud_id" name="stud_id" class="form-control col-md-6" required>
<option selected="selected">Select Student ID</option>
<?php
$mysqli = new mysqli ('localhost', 'u220931635_arug', 'Smarvcdsl2019', 'u220931635_arug') or die (mysqli_error($mysqli));
$resultset = mysqli_query($mysqli, "SELECT * FROM tbl_student where delete_flag = 0");
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option><?php echo $rows["stud_id"]; ?></option>
<?php } ?>
</select>
<br>
<button type="submit" class="btn btn-primary btn-md" name="gclear" id="gclear" class="gclear"><i class="fas fa-check-double"></i> Approve Clearance</button>
</form>
</div>
<div class="card-footer">
<div id="display">
<div class="row" id="heading" style="display:none;">
<tr>
<th class="text-center">
<div class="col-sm-6">
<strong>Student</strong>
</div>
</th>
</tr>
</div>
<div class="row" id="records">
<tr>
<td>
<div class="col-sm-6">
<span id="stud_fname"></span>
<span id="stud_mname"></span>
<span id="stud_lname"></span>
<span id="stud_suffix"></span>
</div>
</td>
</tr>
</div>
<div class="row" id="no_records">
<div class="col-lg-12 text-center">
Plese select Student ID to view details</div>
</div>
</div>
</div>
</div>
Below is the ajax code I used to display data without clicking a button.
<script>
$(document).ready(function(){
// code to get all records from table via select box
$("#stud_id").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'stud_id='+ id;
$.ajax({
url: 'getstudent.php',
dataType: "json",
data: dataString,
cache: false,
success: function(studentData) {
if(studentData) {
$("#heading").show();
$("#no_records").hide();
$("#stud_fname").text(studentData.stud_fname);
$("#stud_mname").text(studentData.stud_mname);
$("#stud_lname").text(studentData.stud_lname);
$("#stud_suffix").text(studentData.stud_suffix);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
});
});
</script>
This is the getstudent.php which is connected to the database where ajax gets datas to display.
<?php
include("../configAdmin.php");
if($_REQUEST['stud_id']) {
$mysqli = new mysqli ('localhost', 'u220931635_arug', 'Smarvcdsl2019', 'u220931635_arug') or die (mysqli_error($mysqli));
$resultset = mysqli_query($mysqli, "SELECT * FROM tbl_student where delete_flag = 0 AND stud_id ='".$_REQUEST['stud_id']."'");
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>
without using ajax you can do this
<select id="stud_id" name="stud_id" class="form-control col-md-6" required>
<option selected="selected">Select Student ID</option>
<?php
$mysqli = new mysqli ('localhost', 'u220931635_arug', 'Smarvcdsl2019', 'u220931635_arug') or die (mysqli_error($mysqli));
$resultset = mysqli_query($mysqli, "SELECT * FROM tbl_student where delete_flag = 0");
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["stud_id"]; ?>"><?php echo $rows["stud_id"]; ?></option>
<?php } ?>
</select>
Related
how do i make my table output appear only when i click on the search button
<?php
require_once 'includes/header.php';
if ($_POST) {
$list = $_POST['categoryList'];
if ( $list != "") {
$sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROm product
INNER JOIN category on product.category_id = category.category_id
WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
$result = $connect ->query($sql);
}
/*else{
$msg = echo 'Select category';
}*/
}
?>
HERE i am running a php script to pull data from the database table product
<div class="row">
<div class="col-md-12">
<div class="card mt-5" style="width: 30rem; margin-left: 25%" >
<div class="card-header bg-dark text-light"><span class="glyphicon glyphicon-th-list"></span> Categories </div>
<div class="card-body">
<form action="" method="post" enctype="multipart/form-data">
<div class="form-group row mt-5 ml-5">
<label for="categoryList" class="col-sm-8 col-form-label">Category Name</label>
<div class="col-sm-8">
<select class="form-control" id="categoryList" name="categoryList">
<option value="">--Select--</option>
<?php
$sql= "SELECT category_id, category_name FROM category where category_status = 1 AND category_status = 1";
$result =$connect->query($sql);
while ($row = $result->fetch_array()) {
echo '<option value="'.$row[0].'">'.$row[1].'</option>';
}
?>
</select>
</div>
</div>
<div class="col">
<button type="submit" onclick="myFunction()" class="btn btn-dark" id="searchButton" style="margin-left: 100px">Search </button>
</div>
</form>
</div>
This is the part where i select the categories pulled from the database
</div>
</div>
</div>
<div id="myDiv">
<table class="table" id="myTable">
<thead class="thead thead-dark">
<th>Photo</th>
<th>Name</th>
<th>Category</th>
</thead>
<tbody>
<?php
#$sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROM product
INNER JOIN category on product.category_id = category.category_id
WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
$result = $connect ->query($sql);
while($row = $result->fetch_assoc())
{
$imageUrl = substr($row['product_image'], 3);
$name = $row['product_name'];
$category = $row['category_name'];
?>
<tr>
<td><?php echo '<img class="img-round" src='.$imageUrl.' style="height:30px; width:50px;">'?></td>
<td><?php echo $name?></td>
<td><?php echo $category?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
THIS IS THE TABLE THAT DISPLAYS THE PRODUCTS ON IN THE SELECTED CATEGORY ABOVE
<script>
$("#navDashboard").addClass('active');
$("#myTable").DataTable();
</script>
THIS IS THE SCRIPT RESPONSIBLE FOR DATATABLE AND ACTIVE NAVBAR
generally what I am doing is using ajax. give your form an id . for example en ajax call after submitting button
$(document).on('submit', '#show_table', function () {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
type: 'POST',
url: 'your_file.php',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: (
function (formData) {
$(".result").html(formData)
}
)
});
});
in the URL pass the name of the file where the call will be made (create a new file). the value from the search input will pass in POST TYPE and then run your query . as you can see the result will display in a div with a class of result. so in the search page create a div
and the table will appear there .
the page will not be refreshed based on the event.preventDefault();
hope this give you any help :)
Objective Inserting name(input-text) and info(textarea-contains multiple lines) into the database, and after submission of the form, at the same page, 2 columns are for displaying the same data in columns, name & info, but under info column. I have made buttons for each row in front of the names, which is used as slideToggle for showing/hiding which contains the data retrieved from the 'info' column
Problem - when I am clicking the button of 1st row, instead of displaying the info related to 1st entry only, it is sliding and showing all info(s) related to all entries at only click.
*others - one more input has been added to the form but as hidden used for id(auto increment)
----index.php-----
<?php include('php_code.php'); ?>
<?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM records WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$acc = $n['acc_no'];
$info = $n['info'];
}
}
?>
<html>
<head>
<title>JSK</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('form').hide();
$('p').hide();
$('#sp').hide();
$("#inf").click(function(){
$("p").slideToggle();
$('#sp').slideToggle();
});
$("#fo").click(function(){
$("form").slideToggle();
});
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?>
<?php $results = mysqli_query($db, "SELECT * FROM records"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Account No</th>
<th>Info</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['acc_no']; ?></td>
<td><button id="inf" onclick="myFunction()">show</button></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
Delete
</td>
</tr>
<tr id="sp"> <td colspan="4"><p> <?php echo $row['info']; ?> </p></td>
</tr>
<?php } ?>
</table>
<div id="fotable" align="center">
<button id="fo">Add New/Edit</button>
</div>
<form method="post" action="php_code.php" >
<input type="hidden" name="id" value="<?php echo $id; ?>">
<div class="input-group">
<label>Name</label>
<input type="text" autocomplete="off" name="name" value="<?php echo $name; ?>">
</div>
<div class="input-group">
<label>Account No</label>
<input type="text" name="acc" value="<?php echo $acc; ?>">
</div>
<div class="input-group">
<label for="info">Info</label>
<textarea class="form-control" rows="8" name="info" id="info"><?php echo $row['info']; ?></textarea>
</div>
<div class="input-group">
<?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Add Account</button>
<?php endif ?>
</div>
</form>
</div><!-- left closed -->
<div class="right">
hello
</div> <!-- right closed -->
</div> <!-- container closed -->
</body>
</html>
---php_code.php-----
<?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'jskrecords');
// initialize variables
$name = "";
$acc = "";
$info = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "INSERT INTO records (name, acc_no, info) VALUES ('$name', '$acc', '$info')");
$_SESSION['message'] = "Account saved";
header('location: index.php');
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "UPDATE records SET name='$name',acc_no='$acc',info='$info' WHERE id=$id");
$_SESSION['message'] = "Account updated!";
header('location: index.php');
}
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM records WHERE id=$id");
$_SESSION['message'] = "ACC deleted!";
header('location: index.php');
}
?>
Concept:
If you are creating multiple form from same mysql table using php script, You need to give each form a unique id.
e.g.
<form method="post" action="php_code.php" id="form<?= $id ?>">
Then add data-target="#form" to button with class 'inf'. It will store id of form.
<button class="inf" data-target="#form<?= $id ?>">show</button>
When button is clicked we know which form to open from data-target.
<script>
$('.container').on('click','button.inf',function(e){
e.preventDefault();
var formid=$(this).attr('data-target'); //get value of data-target attribute
//...proceed to play toggle with this form 'formid'
I am unable to fetch the data in the second dropdown(which is depended upon the first dropdown). e.g. when we select country then the relevant state should be displayed but it doesn't. see my code.
my html
<?php
require 'dbconfig.php';
?>
<label class="control-label">Select Distict</label>
<div class="form-group">
<div class="col-lg-6">
<select class="form-control" name=dist id=dist>
<option value='' selected>Select</option>
<?Php
$ddObj = new USER($DB_con);
$table= "tbl_dist";
$sel = $ddObj->dropdowndist($table);
foreach ($sel as $val) {
echo "<option value=$val[dist_id]>$val[dist_name]</option>";
}
?>
</select>
</div>
</div>
<label class="control-label">Select Block</label>
<div class="form-group">
<div class="col-lg-6">
<select class="form-control" name=block id=block>
</select>
</div>
</div>
my jquery
<script>
$(document).ready(function() {
$('#dist').change(function(){
var dist_id=$('#dist').val();
$('#block').empty(); //remove all existing options
$.get('ddblock.php',{'dist_id':dist_id},function(return_data){
$.each(return_data.data, function(key,value){
$("#block").append("<option value='" + value.block_id +"'>"+value.block_name+"</option>");
});
}, "json");
});
});
</script>
ddblock.php
<?Php
$dist_id=$_GET['dist_id'];
if(!intval($dist_id)){
echo "Data Error";
exit;
}
require 'class.user.php';
$ddObj = new USER($DB_con);
$table = "tbl_block";
$result = $ddObj->fetch_block($table,$dist_id);
$main = array('data'=>$result);
echo json_encode($main);
}
?>
class.user.php
public function fetch_block($table,$dist_id){
try
{
$sel = $this->db->prepare("SELECT * FROM $table WHERE block_dist_id=:dist_id");
$sel->bindValue(':dist_id', $dist_id);
$sel->execute();
$rs = $sel->setFetchMode( PDO::FETCH_ASSOC );
return $sel;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
I'm trying to create a two dropdown that are dynamics, by selecting an option, it changes the other one, just like the Country and Cities examples we see in websites nowadays, but in my case, I want by selecting a Store, it shows all the franquises. I don't know why it's not working.
Here's the code:
<div class="row wow fadeInRight">
<div class="col-sm-3 col-sm-offset-2">
<form action="#">
<div class="form-group">
<label id="drops-labels"><b id="centraliza-txt">Store</b></label>
<span data-toggle="tooltip" data-placement="top" title="Choose a Store">
<?php echo "<select class='form-control input-sm' name='store' id='store-list' onChange='pickFranch(this.value)'>";
echo "<option value='0'>---Select---</option>";
while($dadosRedes = mysql_fetch_array($buscarDadosSuperv)) {
echo "<option value='".$dadosRedes['Store']."'>".$dadosRedes['Store']."</option>";
}
echo "</select>";
?>
</span>
</div>
</form>
</div>
<div class="col-sm-3">
<label id="drops-labels"><b id="centraliza-txt">Franchise</b></label>
<select name="franch" id="franch-list" class='form-control input-sm'">
<option value="0">---Select---</option>
</select>
</div>
<script>
function pickFranch(val) {
$.ajax({
type: "POST",
url: "ajaxPickStore.php",
data: // i dont know what to put here
success: function(data){
$("#lojas-list").html(data);
}
});
}
</script>
AjaxPickStore.php
<?php session_start();
require_once("connect.php");
$db_handle = new DBController();
if(!empty($_POST["store_id"])) {
$query ="SELECT Loja FROM indicadores_rv_m1 WHERE store = '".$_POST['store_id']."' and Supervisor = '".$_SESSION['usuarioNome']."'";
$results = $db_handle->runQuery($query);
?>
<option value="0">---Select---</option>
<?php
foreach($results as $franch) {
?>
<option value="<?php echo $franch["franch"]; ?>"><?php echo $franch["franch"];?></option>
<?php
}
}
?>
I barely know Ajax, so if you could explain the synthax also, it'd help me a lot!
Ty
This is my form
<?php
$sql15 = "select * from reviewed_title";
$query15 = sqlsrv_query( $link, $sql15);
$count = 1;
while( $row = sqlsrv_fetch_array( $query15, SQLSRV_FETCH_ASSOC) ) { ?>
<div class = "title_body">
<div class = "title_top">
<div class="form-group">
<h3><?php
$title_id = $row['id'];
echo $count .". ".$row['title'];
?>
</h3>
</div>
</div>
<?php
$sql16 = "select * from item_reviewed WHERE title_id = $title_id";
$count2=1;
$query16 = sqlsrv_query( $link, $sql16);
$query17 = sqlsrv_query($link, $sql16, array(), array( "Scrollable" => SQLSRV_CURSOR_KEYSET ));
$row_num = sqlsrv_num_rows($query17);
//$row_num = 5;
while( $row2 = sqlsrv_fetch_array( $query16, SQLSRV_FETCH_ASSOC) ) { ?>
<div class = "title_bottom"
<?php if($row_num != $count2){?> style="border-bottom: 1px solid #000000;" <?php }?> >
<div class="form-group">
<input type="hidden" name="item_reviewed_id" value="<?php echo $row2['id'];?>" class="item_reviewed_id">
<div class = "title_bottom_left">
<h6> <?php echo $count.".".$count2 .". ".$row2['items'];
?></h6>
</div>
<div class= "title_bottom_center">
<label class="col-sm-2 label2" for="email">Y,N,N/A:</label>
<!--<select name="action" class="select <select_<?php echo $row2['id'];?>" id="select_<?php echo $count."".$count2;?>">-->
<select name="action" class="select" >
<option value="">Select</option>
<option value="yes">Yes</option>
</select>
</div>
<div class ="title_bottom_right">
<label class="col-sm-2 label3" for="email">Comment:</label>
<!--<textarea name="comment" class="form-control comment commentttt comment_<?php echo $row2['id'];?>>" <id="comment_<?php echo $count."".$count2;?>" placeholder="Comment"></textarea>-->
<textarea name="comment" class="form-control comment commentttt" placeholder="Comment"></textarea>
</div>
</div>
</div>
<?php $count2++;}?>
</div>
<?php $count++; }?>
Here I get 33 input fields, 33 select fields and 33 hidden fields.From table item_reviewed here i get 33 row. My jQuery code is ..
var ittem_id = new Array();
var j = 1;
$(".item_reviewed_id" ).each(function( i ) {
ittem_id[j] = $(this).val();
j++;
});
alert(j);
Here I get 1552 values. How i can get 33 values in jQuery ?
if you ve 1552 item and that loop output only 33 rows you must ve some other elements with class .item_reviewed_id in your page.
Use 2 classes to be sure you re selecting the right elements. JQuery map could be a very easy way to map your elements values
<input type="hidden" name="item_reviewed_id" value="<?php echo $row2['id'];?>" class="item_reviewed_id thisclass">
var ittem_id = $('.item_reviewed_id.thisclass').map(function(){
return $(this).val();
});
console.log(ittem_id); //this will be an array with your values!