Colorpicker in PHP MySQL Example with Ajax Example

03-Apr-2023

.

Admin

Colorpicker in PHP MySQL Example with Ajax Example

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/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="//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....

#PHP