03-Apr-2023
.
Admin
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