Crud Oparetion with Ajax, jQuery, PHP, JavaScript (CODE)

index.php 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <form id="ins" name="ins">

    <input type="hidden" name="h_name" id="i_id">

    <label>EMAIL :</label>

    <input type="email" name="u_mail"><br><br>

    <label>PASSWORD :</label>

    <input type="password" name="u_pass"><br><br>

    <label>MOBILE No. :</label>

    <input type="text" name="u_mob"><br><br>


    <button type="button" name="u_submit" onclick="data_entry();">SEND</button> 

    </form><br><br><br>

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>

        function data_entry()

        {


            var data1 = new FormData(ins);

            // console.log(data1);

            $.ajax({

                data:data1,

                type:"POST",

                url:'backend.php',

                processData: false,

                contentType: false,

                success:function(response)

                {

                    console.log(response);

                }

            })

        }

    </script>

</body>

</html>

backend.php (insert to database)


<?php

//testing successfully done 

// echo "hii";

// exit();


include "conn.php";


    $vr_mail = $_POST["u_mail"];

    $vr_password = $_POST["u_pass"];

    $vr_mobile = $_POST["u_mob"];


    //pass...

    // echo $vr_mail;

    // echo $vr_password;


    $query = "INSERT INTO insert_table(DB_email,DB_password,DB_mob) VALUES ('$vr_mail', '$vr_password', '$vr_mobile')";

    $query_a = mysqli_query($conn, $query);


    if ($query_a) 

    {

        echo "inserted";

    }

    else{

        echo "not inserted";

    }

?>


view.php


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<!-- Popper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    

    

</head>

<body>

<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->

    <table border="1">

        <tr>

        <thead>

            <th>Sl no.</th>

            <th>Name</th>

            <th>Password</th>

            <th>Mobile No.</th>

            <th>Action</th>

        </thead>    

        </tr>

        <tr>

        <tbody id= 'zy'>

            

        </tbody>

        </tr>

    </table>


 <!-- Modal -->

<div id="myModal" class="modal fade" role="dialog">

  <div class="modal-dialog">


    <!-- Modal content-->

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal">&times;</button>

        <h4 class="modal-title">EDIT</h4>

      </div>

      <div class="modal-body">

        <p>Update Here</p>

        <!-- copy form here -->

    <form id="ins" name="ins">

        <input type="hidden" name="h_name" id="i_id">

        <label>EMAIL :</label>

        <input type="email" name="u_mail" id="i_email"><br><br>

        <label>PASSWORD :</label>

        <input type="password" name="u_pass" id="i_pass"><br><br>

        <label>MOBILE No. :</label>

        <input type="text" name="u_mob" id="i_mob"><br><br>

        <button type="button" name="u_submit" onclick="data_update();">UPDATE</button>

    </form><br><br><br>

      </div>

      <div class="modal-footer">

<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->        

        <!-- <button type="button" name="u_submit" onclick="data_entry();">UPDATE</button>  -->

      </div>

    </div>

  </div>

</div>



    <script>  

    //read / view function:  

    //$(function()) => auto refresh function jquery code:-

        $(function() 

        {

            view();    

        });     

            function view()

            {      

            $.ajax({

                data:"",

                type:"POST",

                url:'view_backend.php',

                processData: false,

                contentType: false,

                success:function(result)

                {   

                    // for testing convert array to string 

                    // console.log(result);

                    // return false;


                    var data1 = JSON.parse(result);

                    var tag = '';


                    for(let i = 0; i<data1.length; i++)

                    {

                        //edit part:

                        var object = 

                            {'k_id' : data1[i]['id'],

                            'k_name' : data1[i]['name'],

                            'k_pass' :data1[i]['pass'],

                            'k_mob' : data1[i]['mob']

                           };


                        var convert_str = JSON.stringify(object);

                        //end


                        tag+="<tr>";

                        tag+="<td>"+data1[i]['id']+"</td>";

                        tag+="<td>"+data1[i]['name']+"</td>";

                        tag+="<td>"+data1[i]['pass']+"</td>";

                        tag+="<td>"+data1[i]['mob']+"</td>";    

                        tag+="<td><button type='button' data-toggle='modal' data-target='#myModal' onclick='edit_data("+convert_str+")'>EDIT</button></td>";

                        tag+="<td><button type='button' onclick='delete_data("+data1[i]["id"]+")'>DELETE</button></td>";

                        tag+="</tr>";

                    }

                    document.getElementById('zy').innerHTML = tag;

                    view();

                }

            });

        }

                        

                        


        //delete function:


        function delete_data(id) 

        {

            var delete_line = {'k_id':id};


            $.ajax({

                url : "delete.php",

                data : delete_line,

                type : "POST",

                

                success: function(resu) 

                {

                    console.log(resu); 

                    view();   

                }

            });       

        }


        //edit function:

        function edit_data(convert_str) 

        {   

            //testing converting to string

            // console.log(convert_str);

            // console.log(convert_str['k_id']);


            document.getElementById('i_id').value = convert_str['k_id'];        

            document.getElementById('i_email').value = convert_str['k_name'];        

            document.getElementById('i_pass').value = convert_str['k_pass'];        

            document.getElementById('i_mob').value = convert_str['k_mob'];

     

        }

        function data_update()

        {

            var update_line = new FormData(ins);

            // console.log(update_line);

            

            $.ajax({

                data : update_line,

                type : "POST",

                url : "edit.php",

                processData : false,

                contentType : false,

                success :function(update_result) 

                {

                    //jquery code:

                    $('#myModal').hide();

                    $('.modal-backdrop').hide();

                    view();   

                }

            })

        }            

    </script>

</body>

</html>


view.php(backend)


<?php

$conn = mysqli_connect("localhost","root","","project_ajax") or die("connection failed");




$query_a = "SELECT * FROM insert_table";

$query_b = mysqli_query($conn, $query_a);




while ($row = mysqli_fetch_array($query_b)) 

{

   $m[] = array(

       'id' => $row['DB_id'],

       'name' => $row['DB_email'],

       'pass' => $row['DB_password'],

       'mob' => $row['DB_mob'],

   );

}

echo json_encode($m);

?>


edit.php


<?php
$conn = mysqli_connect("localhost","root","","project_ajax") or die("connection failed");

$vr_hiddenId = $_POST["h_name"];
$vr_mail = $_POST["u_mail"];
$vr_pass = $_POST["u_pass"];
$vr_mob = $_POST["u_mob"];


$query = "UPDATE insert_table SET DB_email = '$vr_mail', DB_password = '$vr_pass', DB_mob = '$vr_mob' WHERE  DB_id = '$vr_hiddenId'";
$query_a = mysqli_query($conn,$query);

if ($query_a) 
{
    echo "data was UPDATE";
}else {
    echo "data was not UPDATE";
}
?>

delete.php


<?php
$vr_id = $_POST['k_id'];
$conn = mysqli_connect("localhost","root","","project_ajax");
if (!$conn) 
{
    echo "connection error";
}

$query = "DELETE FROM insert_table WHERE DB_id = '$vr_id'";
$query_a = mysqli_query($conn, $query);

if ($query_a) 
{
    echo "delete Successfully";
}else {
    echo "error in Delete";
}
?>








Comments

Post a Comment

Popular posts from this blog

C.R.U.D Oparetion in (PHP Code)

C.R.U.D Oparetion   index.php <?php include "conn.php"; if (isset($_POST["usersubmit"]))  {     $vrname = $_POST["username"];     $vremployee = $_POST["useremployee"];     $vrsalary = $_POST["usersalary"];     $vrgender = $_POST["gender"];     //testing sucessfully complete     // echo $vrname;     // echo $vremployee;     // echo $vrsalary;     // echo $vrgender;     // exit();     $inserting = "INSERT INTO dbemployeelist(dbname, dbemployee, dbsalary, dbgender) VALUES('$vrname', '$vremployee', '$vrsalary', '$vrgender')";     $connecting = mysqli_query($conn,$inserting); } ?> <!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         form{             text-align:center;             padding:2...
Read more

Search Dropdown - jQuery

Image
<select name="vehicle_no" id="vehicle_no" class="form-control select" >   <option value="" >Select Vehicle</option>      <?php //echo $vchVehicleNumber;exit;?>           @foreach($vehiclesData as $data)              <option {{(isset($vchVehicleNumber) && $vchVehicleNumber == $data['vehicleno'])?'selected':''}} value="{{ $data['vehicleno'] }}" >{{ $data['vehicleno'] }}</option>              @endforeach </select> // jQuery:- you have to add CDN of select2 jquery $("#vehicle_no").select2({   minimumResultsForSearch: Infinity }); $('#vehicle_no').select2({    minimumInputLength: 0  });
Read more

Laravel - Dependent Drop Down Using Ajax

Image
  Resources\View\ index.blade.php: <h1> Dependent Drop Down </h1>     <select name="country" id="country">         <option hidden>Select Country</option>         @foreach($country as $list)         <option value="{{$list->id}}">{{$list->country}}</option>         @endforeach     </select>     <select name="state" id="state">         <option hidden>Select State</option>         <option value=""></option>     </select>     <select name="city" id="city">         <option hidden>Select City</option>         <option value=""></option>     </select> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJ...
Read more