ok
Mini Shell
<?php
include('header.php');
$ids = $_GET['id'];
if ($ids > 0) {
$statement = $pdo->prepare("SELECT * FROM `tbl_raasi` WHERE id=:id");
$statement->bindParam(':id', $ids, PDO::PARAM_INT);
$statement->execute();
$datas = $statement->fetchAll(PDO::FETCH_ASSOC);
$totalData = $statement->rowCount();
} else {
// Handle invalid input or display an error message.
// You may want to redirect the user or show a custom error page.
die("Invalid ID");
}
?>
<div class="page-wrapper">
<div class="page-content">
<div class="card card-body">
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
<div class="breadcrumb-title">Zodiac Edit Details </div>
<div class="ms-auto">
<div class="btn-group">
<a href="raasi.php" class="btn btn-sm btn-warning"><i class="lni lni-arrow-left"></i> Back To Zodiac List</a>
</div>
</div>
</div>
<form id="cat_add_form" method="post" enctype="multipart/form-data" >
<div class="row g-3">
<div class="col-12 col-lg-4">
<div class="image_area" onclick="browse_image()" style="text-align: center;">
<label for="upload_image">
<center>
<img style="min-width: 200px; min-height: 200px;" src="<?= $datas[0]['product_img'] ?>" id="uploaded_image" class="img-responsive img-circle" />
</center>
<div class="overlay">
<div class="text">Click to Change Image</div>
</div>
</label>
</div>
<div class="col-md-12 progress" id="progress" style="display:none;">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row g-3">
<div class="col-12 col-lg-6">
<label for="cat_name" class="form-label required">Zodiac Name</label>
<input type="text" class="form-control" style="text-transform: uppercase" value="<?= $datas[0]['cat_name'] ?>" name="cat_name" placeholder="Enter a Zodiac">
</div>
<div class="col-12 col-lg-6">
<label for="d_order" class="form-label required">Display Order</label>
<input type="text" class="form-control" oninput="this.value=this.value.replace(/[^0-9]/g,'')" value="<?= $datas[0]['d_order'] ?>" name="d_order" placeholder="Enter display order">
</div>
<div hidden class="col-12 col-lg-4">
<label for="sub_cat_avl" class="form-label required">Is Sub-Category Available</label>
<select name="sub_cat_avl" id="sub_cat_avl" class="form-select valid font-size12" aria-invalid="false" required="">
<option value="YES" <?= (trim($datas[0]['sub_cat_avl']) == "YES") ? "selected" : "" ?>>YES</option>
<option value="NO" <?= (trim($datas[0]['sub_cat_avl']) == "NO") ? "selected" : "" ?>>NO</option>
</select>
</div>
<div class="col-12 col-lg-6">
<label for="status" class="form-label required">Status</label>
<select name="status" id="status" class="form-select valid font-size12" aria-invalid="false" required="">
<option value="ACTIVE" <?= (trim($datas[0]['status']) == "ACTIVE") ? "selected" : "" ?>>ACTIVE</option>
<option value="IN-ACTIVE" <?= (trim($datas[0]['status']) == "IN-ACTIVE") ? "selected" : "" ?>>IN-ACTIVE</option>
</select>
</div>
<div hidden class="col-12 col-lg-4">
<label for="zodiac" class="form-label required">Zodiac Signs Categories Status</label>
<select name="zodiac" id="zodiac" class="form-select valid font-size12" aria-invalid="false" required="">
<option value="ACTIVE" <?= (trim($datas[0]['zodiac']) == "ACTIVE") ? "selected" : "" ?>>ACTIVE</option>
<option value="IN-ACTIVE" <?= (trim($datas[0]['zodiac']) == "IN-ACTIVE") ? "selected" : "" ?>>IN-ACTIVE</option>
</select>
</div>
<div hidden class="col-12 col-lg-6">
<label for="old_image" class="form-label">Old Image Name</label>
<input type="text" id="old_image" class="form-control" name="old_img_name" placeholder="Old Image Name">
</div>
<div hidden class="col-12 col-lg-6">
<label for="new_image" class="form-label">New Image Name</label>
<input readonly type="text" id="image" class="form-control" name="new_img_name" value="<?= $datas[0]['product_img'] ?>" placeholder="New Image Name">
</div>
</div>
<div class="row g-3" style="padding: 20px 10px;">
<div class="col-6 col-lg-12">
<button type="submit" class="btn btn-success" style="padding: 2px 20px;" name="pickup_address_select"><i class="bx bx-save ms-2"></i> Save Religion</button>
<a class="btn btn-danger" style="padding: 2px 20px;" name="pickup_address_select"><i class="bx bx-reset ms-2"></i> Reset All Data</a>
</div>
</div>
</div>
</form>
<form action="upload/upload.php" id="photoUpload" method="post" enctype="multipart/form-data" style="display:none;">
<input type="file" name="image" class="image" id="browse" style="display:none;" />
</form>
</div>
</div>
</div>
</div>
<style>
.bar {
height: 15px;
background-color: #4CAF50;
font-size: 15px;
border-radius: 5px;
}
.percent {
position: absolute;
margin-top: -16px;
padding-left: 7px;
color: white;
}
.image_area {
position: relative;
}
img {
display: block;
max-width: 50%;
text-align: center;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg {
max-width: 1000px !important;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
height: 0;
transition: .5s ease;
width: 100%;
}
.image_area:hover .overlay {
height: 50%;
cursor: pointer;
}
.text {
color: #333;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
<script>
function browse_image() {
document.getElementById('browse').click();
}
$(document).ready(function() {
var percent = $('.percent');
var bar = $('.bar');
$("#browse").on("change", function() {
var fsize = $('#browse')[0].files[0].size;
var ext = $('#browse').val().split('.').pop().toLowerCase();
document.getElementById("progress").style.display = "block";
$('#photoUpload').ajaxForm({
beforeSend: function() {
bar.width('0%');
percent.html('0%');
},
uploadProgress: function(event, position, total, percentComplete) {
var pVel = percentComplete + '%';
bar.width(pVel);
percent.html(pVel);
},
complete: function(data) {
console.log('Success...');
console.log(data);
console.log(data['responseText']);
$('#image').val(data['responseText']);
$('#uploaded_image').attr('src', data['responseText']);
success('Image Successfully Uploaded');
},
error: function(data) {
console.log('Failed...');
console.log(data);
}
}).submit();
});
});
</script>
<script>
$(document).ready(function() {
$('#cat_add_form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append('type', 'upload');
alert('hello');
$.ajax({
url: 'api/raasi_edit.php?id='+<?=$ids?>,
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
if (response['status'] == 200) {
success(response['message']);
// window.location.reload();
} else {
warning(response['message']);
}
}
});
});
});
</script>
<?php include('footer.php'); ?>
Zerion Mini Shell 1.0