How to use Colorpicker in PHP MySQL With Ajax Example

Apr 08, 2022 . Admin



Hello dev,

I am going to explain you How to Use Colorpicker in PHP MySQL With Ajax Jquery. You will learn jquery color picker example.

This article will give you simple example of color picker in php. We will use get simple color picker in jquery.

I will give you simple Example of How to Use Colorpicker in PHP MySQL With Ajax Jquery?

So, let's see bellow solution:

index.php
<html lang="en">
<head>
    <title>How to Use Colorpicker in PHP MySQL With Ajax Jquery</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/js/bootstrap-colorpicker.min.js"></script>  
</head>
<body>
    <div class="container mt-5 pt-2">
        <div class="card mt-5">
            <div class="card-header">
                <h3 class="text-center">How to Use Colorpicker in PHP MySQL With Ajax Jquery</h3>
            </div>
            <div class="card-body">
                <form>
                    <label class="mt-3">Choose Color:</label>
                    <div id="color-picker-component" class="input-group colorpicker-component">
                    <input type="text" value="#ab428d" id="favcolor" class="form-control"/>
                    <span class="input-group-addon"><i style="height: 40px; width: 40px;"></i></span>
            </div>
            <div class="d-flex justify-content-center">
                    <input type="button" name="submit" id="submit" class="btn btn-primary mt-5" value="Submit">  
                </form>
            </div>
        </div>
    </div>
<script>
$(function () {
    $('#color-picker-component').colorpicker();
});

$(document).ready(function(){  
    $('#submit').click(function(){
    var favcolor = $('#favcolor').val();    
        $.ajax({  
            url:"process.php",  
            method:"POST",
            data:{favcolor:favcolor},  
            success:function(data){
                alert(data);
            }  
        });  
    });
});  
</script>
</body>
</html>
process.php
<?php 
     $servername = "localhost";
     $username = "root";
     $password = "root";
     $dbname = "aatman";

     $conn = new mysqli($servername,$username,$password,$dbname);

     if($conn->connect_error){
          die ('connection faild:'.$conn->connect_error);
     }

     $favcolor = $_POST['favcolor'];
     $sql = "INSERT INTO color (favcolor)VALUES('$favcolor')"; 

     if ($conn->query($sql)===TRUE) {
          echo "color added successfully.";     
     }else{
          echo "Error: ".$sql."<br>".$conn->error;
     }

     $conn->close();
?>
Output:

It will help you...
#PHP