Show dropdown based on the another dropdown using PHP AJAX

Thursday, 13 June 2019

Table 1: state

 CREATE TABLE `state` (
  `stid` int(2) NOT NULL,
  `stname` varchar(70) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `state` (`stid`, `stname`) VALUES
(1, 'Andhra Pradesh'),
(2, 'Arunachal Pradesh'),
(3, 'Assam'),
(4, 'Bihar'),
(24, 'Tamil Nadu'),
(36, 'Puducherry');

ALTER TABLE `state`  ADD PRIMARY KEY (`stid`);

 Table 2: city

CREATE TABLE `city` (
  `cyid` int(10) NOT NULL,
  `stateid` int(2) NOT NULL,
  `cyname` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `city` (`cyid`, `stateid`, `cyname`) VALUES
(1, 24, 'Cbe');

ALTER TABLE `city` ADD PRIMARY KEY (`cyid`);


HTML/PHP Form:

<form method="post" action="" enctype="multipart/form-data">
  State:
    <?php
    $sql=mysqli_query($conn,"SELECT stid,stname FROM state");
    if(mysqli_num_rows($sql)){ ?>
    <select class="form-control" name="stateid" id="stateid" required>
    <option value="">Choose State</option>
    <?php
    while($rs=mysqli_fetch_array($sql)){ ?>
    <option value="<?php echo $rs['stid']; ?>"><?php echo $rs['stname']; ?></option>
    <?php }} ?>
    </select>
  <br><br>
    City/Location:
    <select class="form-control" name="cityid" id="cityid" required>
    <option value="">Choose City/Location</option>
    </select>
</form>

JavaScript:

    <script type="text/javascript">
    $(document).ready(function() {
  $("#stateid").change(function() {
    var stateid = $(this).val();
    if(stateid != "") {
      $.ajax({
        url:"get-city.php",
        data:{c_id:stateid},
        type:'POST',
        success:function(response) {
          var resp = $.trim(response);
          $("#cityid").html(resp);
        }
      });
    }
  });
});
</script>

Combined Code:

 <?php
include("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>    
    <script type="text/javascript">
    $(document).ready(function() {
  $("#stateid").change(function() {
    var stateid = $(this).val();
    if(stateid != "") {
      $.ajax({
        url:"get-city.php",
        data:{c_id:stateid},
        type:'POST',
        success:function(response) {
          var resp = $.trim(response);
          $("#cityid").html(resp);
        }
      });
    }
  });
});
</script>    
</head>
<body>

 <form method="post" action="" enctype="multipart/form-data">
  State: 
    <?php
    $sql=mysqli_query($conn,"SELECT stid,stname FROM state where status='1'");
    if(mysqli_num_rows($sql)){ ?>
    <select class="form-control" name="stateid" id="stateid" required>
    <option value="">Choose State</option>
    <?php
    while($rs=mysqli_fetch_array($sql)){ ?>
    <option value="<?php echo $rs['stid']; ?>"><?php echo $rs['stname']; ?></option>
    <?php }} ?>
    </select> 
  <br><br>
    City/Location:
    <select class="form-control" name="cityid" id="cityid" required>
    <option value="">Choose City/Location</option>
    </select>  
</form> 
</body>

</html>
get-city.php

 <?php 
include("config.php"); 
if(isset($_POST['c_id'])) {
  $sql = "select * from city where stateid=".mysqli_real_escape_string($conn, $_POST['c_id']);
  $res = mysqli_query($conn, $sql);
  if(mysqli_num_rows($res) > 0) {
    echo "<option value=''>Choose City/Location</option>";
    while($row = mysqli_fetch_object($res)) {
      echo "<option value='".$row->cyid."'>".$row->cyname."</option>";
    }
  }
    else
    {
        echo "<option value=''>Choose City/Location</option>";
    }
} else {
  header('location: ./');
}

?>
Posted by Manikandan J at 00:58 0 comments

How to update database from Textbox using PHP MySQL AJAX

Wednesday, 12 June 2019

HTML/PHP Form:

<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
  Invoice No:
  <input type="text" placeholder="Invoice No" class="form-control" id="price_<?php echo $rs['primary_id']; ?>"  value="<?php echo $rs['field_name']; ?>" style="width: 180px;" onchange="changevalue(this.id,this.value)">
  <br><br>
  <?php } ?>
</form>

JavaScript:

    <script type="text/javascript">
function changevalue(file_id,userval)
{
var res = file_id.split("_");
var files_id=res[1];
$.ajax
({
type: "POST",
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
cache: false,
success: function(response)
{  alert("Updated Successfully"); }
});
}
    </script>

ajaxfile.php:

<?php
include("config.php");

$files_id=$_REQUEST['files_id'];
$user_val=$_REQUEST['getval'];
$type=$_REQUEST['val'];

if($type == '1')
{
mysqli_query($conn,"Update Query Goes Here...");
}
?>

Combined Code:

<?php
include("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
    <script type="text/javascript">
function changevalue(file_id,userval)
{
var res = file_id.split("_");
var files_id=res[1];
$.ajax
({
type: "POST",
url: "ajaxfile.php",
data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
cache: false,
success: function(response)
{  alert("Updated Successfully"); }
});
}
    </script> 
</head>
<body>

<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
  Invoice No:
  <input type="text" placeholder="Invoice No" class="form-control" id="price_<?php echo $rs['primary_id']; ?>"  value="<?php echo $rs['field_name']; ?>" style="width: 180px;" onchange="changevalue(this.id,this.value)">
  <br><br>
  <?php } ?>
</form>
</body>
</html>

Explanation:

1) In form, id="price_<?php echo $rs['primary_id']; ?>". Instead of 'primary_id' here we have to mention the primary key value from the table which is unique value in table.

2) onchange="changevalue(this.id,this.value)" means it will get the current field id and the value associate with that will pass to JavaScript function.

3) In JavaScript, data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
Here if you saw statically I mentioned val=1, this value will go to AJAX file. This will help us to write more AJAX function in one page only.
Eg:
<script type="text/javascript">
function changevalue(file_id,userval)
 {
          ...
          url: "ajaxfile.php",
          data: "files_id="+ files_id +"&val=1"+"&getval="+userval,
          ....
          }
function two(file_id2,userval2)
 {
          ...
          url: "ajaxfile.php",
          data: "files_id="+ files_id2 +"&val=2"+"&getval="+userval2,
          ....
          }
</script>

4) In AJAX file, we are getting all the values we posted from the php file. In AJAX I am getting the static value as $type=$_REQUEST['val']; using the $type we can write more insert/update in AJAX file.
Eg:
if($type == '1')
{
mysqli_query($conn,"Insert Query Goes Here...");
}
if($type == '2')
{
mysqli_query($conn,"Update Query Goes Here...");
}
.
.
.
.
Posted by Manikandan J at 23:31 0 comments

Dynamic checkbox with PHP and MySQL

Sample HTML/PHP Form:

<?php
include("config.php");
?>
<!DOCTYPE html>
<html>
<body>

<form method="post" action="" enctype="multipart/form-data">
<?php
$sql=mysqli_query($conn,"SELECT * FROM sales");
while($rs=mysqli_fetch_array($sql)){ ?>
  Checkbox:<br>
  <input type="checkbox" name="bike_id[]" class="names" value="<?php echo ['field_name']; ?>">
  <br>
  <?php } ?>
  <input type="submit"  name="Submit">
</form>
</body>
</html>

PHP Code:

 <?php
if(isset($_POST['bike_id'])){
        $invite = $_POST['bike_id'];
        print_r($invite);
    }
?>

Output:

 Array ( [0] => 1 [1] => 2 )
Posted by Manikandan J at 22:23 4 comments
Subscribe to: Posts (Atom)
 

Blogger news

Blogroll

Most Reading