I have database with fields branch, name, code_member, status etc.
I am trying to fetch Names in dropdown menu with branch by group mysql query. And Then Show Details Of NAME Selected In Dropdown List. But No Results are shown.
Selection Of Branch, Name And Auto Entering of Name In Search Box is working perfectly. But After That ID, Name, Branch,Code Number etc. data is not getting displayed.
There are three pages used. index.php, findName.php and searchfinal.php
Code I tried Is As Follows :
index.php :
<html>
<head>
<script type="text/javascript">
$(document).ready(function()
{
$(".branch").change(function()
{
var branch=$(this).val();
var dataString = 'branch='+ branch;
$.ajax
({
type: "POST",
url: "findName.php",
data: dataString,
cache: false,
success: function(html)
{
$(".getname").html(html);
}
});
});
});
</script>
<script>
$(document).ready(function()
{
$('#getname').change(function() {
$('#name').val($(this).val());
});
});
</script>
</head>
<body>
Branch :
<select name="branch" class="branch">
<option selected="selected">--Select Country--</option>
<?php
$sql=mysql_query("select branch from mutualbs group by branch");
while($row=mysql_fetch_array($sql))
{
$branch=$row['branch'];
echo '<option value="'.$branch.'">'.$branch.'</option>';
} ?>
</select> <br/><br/>
Name :
<select name="getname" id="getname" class="getname">
<option selected="selected">--Select Name--</option>
</select>
<br><br>
<hr>
<form method="get">
<label for="name">Name To Search :</label>
<input type="text" id="name" name="name" />
<button class="btnSearch">Search</button>
</form>
<br><br>
<table id="resultTable" style="color:#ff0000;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>MBS Number</th>
<th>Branch</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody> //** Results Are Not Getting Shown
</table>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
$jQuery(document).ready(function($) {
$('.btnSearch').click(function(){
makeAjaxRequest();
});
$('form').submit(function(e){
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'searchfinal.php',
type: 'get',
data: {name: $('input#name').val()},
success: function(response) {
$('table#resultTable tbody').html(response);
}
});
}
});
</script>
</body>
</html>
Till Search Button Everything working OK... But After Clicking Search Button, No Results i.e. ID, Name, Code Number, Branch And Status Shown..
Other Codes :
searchfinal.php
<?
require_once 'Connection.simple.php';
$conn = dbConnect();
if (isset($_GET['name'])) {
$data = "%".$_GET['name']."%";
$sql = "SELECT * FROM mutualbs WHERE name like ?";
$stmt = $conn->prepare($sql);
$results = $stmt->execute(array($data));
$rows = $stmt->fetchAll();
}
if(empty($rows)) {
echo "<tr>";
echo "<td colspan='4'>There were not records</td>";
echo "</tr>";
}
else {
foreach ($rows as $row) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['code_number']."</td>";
echo "<td>".$row['branch']."</td>";
echo "<td>".$row['status']."</td>";
echo "</tr>";
}
}
?>
Need Help....
Related
I am searching for a way to update my sql database without refreshing the page by selecting the checkbox.
I am trying to achieve the id to be passed to the dolead.php when the user selects the checkbox and than check whether the id is higher than 0 it must pass the value 1 otherwise the value 0. Afther that check i need the database to be updated with the where clause the posted id. Below my code, what am i doing wrong? i get no errors in my logs and i have the error logging stated as followed: mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
PHP the user is seeing to select the switch box to trigger a select and the jquery to trigger the post.
<head>
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="switch.css" type="text/css">
</head>
<body>
<table id="myTable" align='left' class="deftable">
<thead>
<tr>
<th style="width:10px !important;">!!</th>
<th>Name</th>
<th>Notes</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<? //Selecteer accounts.
$stmt = $mysqli->prepare("SELECT * FROM account WHERE purpose = 'Crew4' AND level <= ? AND betaald = 'yes'
AND group_name = ? AND secret = 'no' ");
$stmt->bind_param("is", $status,$groupname);
$stmt->execute();
$result = $stmt->get_result(); //only works when nd_mysli is set on the server!
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td class="footer">
<label class="switch">
<input type="checkbox" <?php if($row['do_lead']=='1') {
echo 'checked="checked"';
} ?> value="<?php echo filter_var($row['id'], FILTER_VALIDATE_INT); ?>" />
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label></td>
<td><?= htmlspecialchars($row['name']) ?></td>
<td><?= htmlspecialchars($row['notes']) ?></td>
<td><?= htmlspecialchars($row['purpose']) ?></td>
</tr>
<? } ?>
</table>
</body>
<script>
$(document).ready(function()
{
var x=$("input[type=checkbox]").length;
$('input[type=checkbox]').on('change', function(i)
{
if($(this).is(':checked'))
{
x-=1;
if(x==0)
{
var val = [];
$(':checkbox:checked').each(function(i)
{
val[i] = $(this).val();
});
var jsonString = JSON.stringify(val);
$.ajax(
{
type: "POST",
url: "dolead.php",
data: {checkbox_value:jsonString},
cache: false,
success: function(data)
{
/* alert if post is success */
}
});
}
}
else
{
x+=1;
}
});
});
</script>
</html>
The dolead.php to retrieve the post value and update the database;
$data = json_decode(stripslashes($_POST['checkbox_value']));
foreach($data as $d){
if($d > 0){$leadupdate = 1;}
if($d == ''){$leadupdate = 0;}
$stmt48 = $mysqli->prepare("UPDATE account SET do_lead = ? WHERE id = ? ");
$stmt48->bind_param("ii", $leadupdate,$d);
$stmt48->execute();
$stmt48->close();
}
?>
PS: the connection file is included but not shown here..
You could add a class to the input and set the value dynamically:-
View:-
<input class="active" type="checkbox" value="$row['do_lead']" >
jQuery/AJAX Call:-
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$("input.active").click(function() {
// store the values from the form checkbox, then send via ajax below
var check_active = $(this).is(':checked') ? 1 : 0;
var check_id = $(this).attr('value');
$.ajax({
type: "POST",
url: "dolead.php",
data: {id: check_id, active: check_active}
success: function(response){
alert('Data Updated Successfully');
}
});
return true;
});
});
</script>
PHP:-
// CLIENT INFORMATION
$active = mysqli_real_escape_string($_POST['active']);
$id = mysqli_real_escape_string($_POST['id']);
//update query.
//execute query.
Note:- for more info regarding click()
https://api.jquery.com/click
I would like to know, how can I pass <select> element from html to PHP file by ajax.
Here is my index.php:
<p>
<form action = "display.php" method="post" enctype="multipart/form-data">
Select:
<select name="chosenOption" id="chosenOption" style="width:100px"">
<?php
include 'dbConnection.php';
$query = $db->query("SELECT id,name FROM products");
while($row = $query->fetch_assoc())
{
echo'
<option value="'.$row['id'].'">'.$row['name'].'
</option>';
}
?>
</select>
Display : <input type="submit" name="display" value="Display">
</form>
</p>
My display.php, where i have ajax method:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
function refresh_div() {
var chosenOption= $('#chosenOption').val();
jQuery.ajax({
url: 'products.php',
type:'POST',
data:{chosenOption:chosenOption},
success:function(results) {
jQuery(".result").html(results);
}
});
}
t = setInterval(refresh_div,1000);
</script>
<div class="result"></div>
And products.php, where i want to pass selected < select > element:
<?php
include 'dbConnection.php';
$chosenOption = $_POST["chosenOption"];
// Display section
$query = $db->query("SELECT cost,description FROM products_info WHERE products_id=$chosenOption);
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
echo "Actual cost and description: ".$row["cost"]. " ".$row["description"]. ;
}
} else {
echo "No data";
}
?>
I expect that selected option from index.php will be pass to products.php by ajax and display the appropriate message. The current code does not work. Any idea?
You can't refer to $("#chosenOption") in display.php, because the page has been reloaded. You need to use $_POST['chosenOption'], since that was submitted by the form.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
function refresh_div() {
var chosenOption= $('#chosenOption').val();
jQuery.ajax({
url: 'products.php',
type:'POST',
data:{chosenOption: <?php echo $_POST['chosenOption']; ?>},
success:function(results) {
jQuery(".result").html(results);
}
});
}
t = setInterval(refresh_div,1000);
</script>
<div class="result"></div>
I have a form where I am selecting a product. On the basis of the selected product, I want to update the rest of the fields in the form.
The Form display with select option
On selecting the product name, I want rest of the details of the form to fill up from the database using php.
Here is the code for the table created.
<table id="productTable" class="table-c">
<tr>
<th class="text-center" style="width: 5%;">SR No.</th>
<th class="text-center" style="width: 45%">DESCRIPTION</th>
<th class="text-center" style="width: 10%">HSN/SAC</th>
<th class="text-center" style="width: 10%">QTY IN-HAND</th>
<th class="text-center" style="width: 10%">ENTER OUTWARD QTY</th>
<th class="text-center" style="width: 5%">Delete</th>
</tr>
<tr style="text-align: center;" id="products">
<?php $j=0; $j++; ?>
<td><?php echo $j; ?></td>
<td><select class="form-control" name="code" id="productID" style="width: 429px;">
<?php
$sql = "SELECT * FROM `product`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<option id='".$row['code']."' value='".$row['pname']."'>".$row['pname']."</option>";
}
} else {
echo "0 results";
}
?>
</select>
</td>
<td><input type="number" name="hsnNo" id="hsnNo" readonly></td>
<td><input type="number" name="qty" id="qty" readonly></td>
<td class="coljoin"><input type="number" format="2" name="amount"></td>
<td>
<span class="fa fa-trash"></span>
</td>
</tr>
</table>
How should I do this?
This is PHP Code:-
<form>
<select name="customer" id="customer_id">
<option value="">-- Select customer Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
Address: <input name="add" type="text" value="">
Mobile: <input name="mobile" type="text" value="">
EMail-Id:<input name="email" type="text" value="">
</form>
This is JS Code:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#customer_id").change(function() {
var id = $(this).val();
var dataString = 'cid='+id;
//alert(dataString);
$.ajax({
url: 'dataAjax.php',
type: 'post',
data: dataString,
success: function(response) {
// Parse the jSON that is returned
var Vals = JSON.stringify(response);
// These are the inputs that will populate
$("input[name='add']").val(Vals.add);
$("input[name='mobile']").val(Vals.mobile);
$("input[name='email']").val(Vals.email);
}
});
});
});
</script>
This is other PHP File Code:-
<?php
// This is where you would do any database call
if(!empty($_POST)) {
// Send back a jSON array via echo
echo json_encode(array("add"=>'India',"mobile"=>'1234567890','email'=>'demo#demo.com'));
}
?>
using product id use ajax & call the get_product_details(id) & in get product convert response array in json & echo it .in ajax, response data you have to parse in json... then set you required field.. (add require js)
**Ajax Call :**
$(document).on('change','your_dropdown_filed_id',function()
{
var product_id = $(this).val();
//Ajax call
$.ajax({
method: "POST",
url: "/get_product_details", //your php file function path
data: { product_id: product_id}
}).done(function( response ) {
alert( "Data Saved: " + response );
var obj = JSON.parse(response);
//obj hold all values
alert(obj.qty);
alert(obj.hsn);
$('#hsn_id').val(obj.hsn);
$('#qty_id').val(obj.qty);
});
});
**product.php**
function get_product_details(product_id)
{
//Get product details in associative array format
echo json_encode($product_details);
}
Once the product is selected execute ajax request and get data from the database with respective of the selected product.
JAVASCRIPT CODE :
$('#products').change(function(){
$.ajax({
url: 'your php code page name which returns product details.php?product_id'+$('#products').val(),
type: 'post',
success: function(response) {
var obj = JSON.parse(response);
$("#hsn_sac").val(obj.hsn_sac); // hsn or sac values
$("#qty_in_hand").val(obj.qty_in_hand); // qty_in_hand values
}
}});
});
PHP CODE :
<?php
// first connect database and then fire the query to get product details
$connection = mysql_connect("your database host name","database username","database password","database name");
$result = mysql_query("your query");
while ($row = mysql_fetch_array($result)) {
// get data and store in array
}
mysql_close($connection); // close connection
echo json_encode(database result); // encode database result so that it will available to ajax request and assign back to view
exit;
?>
view code i have : file one to show data two select box second select box depand on the first select box value
<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#category").change(function(){
var value=$("#category option:selected").val();
$.ajax({
type:'post',
url:'subcat.php',
data:{ kvalue : value },
datatype:'json',
success:function(data){
alert(data);
$("#response").html(data);
}
})
})
})
</script>
<title></title>
</head>
<body>
<form method="post">
<table>
<tr>
<td>category:</td>
<td><select id="category">
<option>Select Category</option>
<?php
$query=mysql_query("select * from category");
while($row=mysql_fetch_array($query)){
?>
<option value="<?php echo $row['category'];?>"><?php echo $row['category'];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Sub cat:</td>
<td><select >
<option >dependent dropdown</option>
<option id="response"></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
another page for ajax call:
This page return the data in json format to first file .problem is that i have one select box there i want to get these value in my option but i m getting this value and if m going to select on then all value auto selectrd
<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
$val=strtolower($_POST['kvalue']);
if($val=='mobile'){
$query=mysql_query("select mobile from subcat");
while($row=mysql_fetch_array($query)){
$row[] = $r;
print json_encode($row);
echo $row['mobile']."</br>";
}
}
problem``
i want to fetch data from json in html option but i get the value but it all in selected form how can i get or select the value one which i want??
check this demo code which select option update and your your connection and query , i just set manually data for test. this is your html file
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#category").change(function () {
var value = $("#category option:selected").val();
$.ajax({
type: 'post',
url: 'subcat.php',
data: {kvalue: value},
datatype: 'json',
success: function (data) {
alert(data);
$("#response").html(data);
}
})
})
})
</script>
<title></title>
</head>
<body>
<form method="post">
<table>
<tr>
<td>category:</td>
<td><select id="category">
<option>Select Category</option>
<option value="mobile">Mobile</option>
<option value="TV">Tv</option>
<option value="Phone">Phone</option>
</select>
</td>
</tr>
<tr>
<td>Sub cat:</td>
<td>
<select id="response">
<option>dependent dropdown</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
and this is your subcat.php file .i set manually data for test. if you want to select depend your option data just update your query
<?php
//$con=mysql_connect("localhost","root","root");
//mysql_select_db("register",$con);
$val = strtolower($_POST['kvalue']);
if ($val == 'mobile') {
//$query=mysql_query("select mobile from subcat");
$data = array('Option1', 'Option2', 'Option3');
foreach ($data as $value => $key) {
echo '<option value="' . $value . '">' . $key . '</option>';
}
}
if you select second option value using ajax send option then update query like
//$query=mysql_query("select mobile from subcat where subcat = '$val'");
and this is my demo data so need to replace your sql data
I am trying to populate drop down lists one after the other. These drop down lists contain categories and subcategories. I would like to continue creating drop down lists until there are not more subcategories for a particular category.
I am populating my drop down lists with results from MySQL.
I have searched all over and could not find any references to cascading drop down lists using more than two lists.
My code works for two lists, but not for more.
partRequest.php
<HTML>
<HEAD>
<script type="text/javascript" src="..\jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#1").change(function(e) {
e.preventDefault();
getNextCategory("1");
});
$("#2").change(function(e) {
e.preventDefault();
getNextCategory("2");
});
$("#3").change(function(e) {
e.preventDefault();
getNextCategory("3");
});
});
function getNextCategory(htmlID) {
var categoryID = ""
var newHTMLID = 0
var newCategory = ""
categoryID = $("#" + htmlID ).val();
newHTMLID = Number(htmlID) + Number(1)
newCategory = "category" + newHTMLID
$.ajax({
type: "POST",
url: "findNextCategory.php",
data: "ID=" + categoryID + "&Number=" + newHTMLID,
success: function(output){
$("#" + newCategory).html(output);
}
});
}
</script>
</HEAD>
<BODY>
<form name="partSubmissionForm" id="partSubmissionForm" action="" method="POST">
<table width=147 cellpadding=0 cellspacing=0>
<tr><td><select id="1">
<?PHP
$query = "SELECT Name, ID FROM categories WHERE ParentID = 0";
$result = mysql_query($query);
while ($row=mysql_fetch_array($result)){
?>
<option value="<? echo $row['ID'];?>"> <? echo $row['Name'];?></option>
<?}?>
</select>
</td>
<td>
<div id="category2">
test2
</div>
</td>
<td>
<div id="category3">
test3
</div>
</td>
</tr>
<tr><td><input type="submit" name="submit" id="submit" value="GO"></td></tr>
</table>
</form>
</BODY>
</HTML>
findNextCategory.php
<?PHP
define('INCLUDE_CHECK',true);
include ('..\db.php');
$categoryID = $_POST['ID'];
$categoryFieldNum = $_POST['Number'];
echo $categoryID;
echo $categoryFieldNum;
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
echo $query;
echo "<select id=$categoryFieldNum>";
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
$result = mysql_query($query);
while ($row=mysql_fetch_array($result)){
$optionValue = $row['ID'];
$optionText = $row['Name'];
echo "<option value='$optionValue'> $optionText </option>";
}
echo "</select>";
?>
The problem is that your click function definitions only apply to items that are already on the page at page load. Because you do not yet have a select object on the page with an id of "2", your $("#2").change function does not ever get attached.
What you need to do to get around this is to apply that click definition after you add the select to the page. Try changing your success function to this:
success: function(output){
$("#" + newCategory).html(output);
$("#" + newHTMLID).change(function(e) {
e.preventDefault();
getNextCategory(newHTMLID);
});
}