Colorpicker in PHP MySQL Example with Ajax Example

jQuery · 03-Apr-2023

When “Colorpicker in PHP MySQL Example with Ajax Example” moves through design, development and browser testing, learn more here can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi friends,

In this post, we will learn Colorpicker in PHP MySQL Example With Ajax Jquery. i explained simply step by step color picker using jquery. Here you will learn color picker in php. This tutorial will give you simple example of color picker in jquery.

I will give you simple Example of jquery color picker example.

So let's see bellow example:

index.php

<html lang="en">
<head>
    <title>Colorpicker in PHP MySQL Example With Ajax Jquery</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="//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 class="bg-dark">
    <div class="container mt-5 pt-2">
        <div class="card mt-5">
            <div class="card-header bg-primary text-white">
                <h3 class="text-center">Colorpicker in PHP MySQL Example 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="#235a6b" 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:

I hope it will help you....