donation/app/Views/book_form.php

121 lines
5.4 KiB
PHP

<html>
<head>
</head>
<style>
/* CSS for the preview image */
.preview-image {
display: block;
/* Ensure the image is displayed as a block element */
width: 120px;
/* Set the desired width for passport size */
height: 160px;
/* Set the desired height for passport size */
object-fit: cover;
/* Maintain the aspect ratio and fill the container */
margin-top: 10px;
/* Add a top margin for spacing */
}
</style>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title"><?= $page_name; ?></h4>
<p class="sub-header"> </p>
<?php if (session()->getFlashdata('success')) : ?>
<div class="alert alert-success"><?= session()->getFlashdata('success') ?></div>
<?php endif; ?>
<form class="needs-validation" novalidate method="post" enctype="multipart/form-data"
action="<?= base_url() . "insert_books"; ?>">
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<label for="title" class="col-form-label">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="title" name="name" value="<?= isset($details[0]['name']) ? $details[0]['name'] : '' ?>" placeholder="Name of the Causes" required />
<div class="invalid-feedback"> Please provide. </div>
</div>
<div class="form-group col-md-6">
<label for="publisher" class="col-form-label">Description<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="publisher" name="description" placeholder="Description" value="<?= isset($details[0]['description']) ? $details[0]['description'] : '' ?>" required />
<div class="invalid-feedback"> Please provide. </div>
</div>
</div>
</div>
<input type="hidden" id="causes_id" name="causes_id" placeholder="hidden for book id" value="<?= isset($details[0]['causes_id']) ? $details[0]['causes_id'] : '' ?>" />
<input type="hidden" id="business_id" name="business_id" placeholder="hidden for business id" value="<?= $session_bid ?>" />
<?php if (!empty($details)) { ?>
<div class="form-group text-right m-b-0 checkbox checkbox-purple">
<input type="checkbox" id="isactive" name="isactive" class="form-control"
<?= isset($details) && $details[0]['isactive'] == 1 ? 'checked' : '' ?>>
<label for="isactive"> Is Active</label>
</div>
<br>
<?php } ?>
<div class="form-group text-right m-b-0">
<button class="btn btn-success waves-effect waves-light mr-1" id="submitBtn" type="submit">Submit</button>
<button type="reset" class="btn btn-primary waves-effect mr-1">Reset</button>
<a href="<?= base_url() . "book_list"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
</div>
</div>
</form>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div><!-- end row -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const coverPictureInput = documenxt.getElementById("cover_picture");
const imagePreviewContainer = document.querySelector(".image-previews");
coverPictureInput.addEventListener("change", function(event) {
// imagePreviewContainer.innerHTML = ""; // Clear previous previews
const selectedImages = Array.from(event.target.files);
selectedImages.forEach(function(image, index) {
const imageWrapper = document.createElement("div");
imageWrapper.classList.add("mr-3");
const imagePreview = document.createElement("img");
imagePreview.src = URL.createObjectURL(image);
imagePreview.classList.add("preview-image");
imagePreview.style.width = "120px"; // Set width as needed
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.classList.add("image-checkbox");
checkbox.checked = false; // Set default as unchecked
imageWrapper.appendChild(checkbox);
imageWrapper.appendChild(imagePreview);
imagePreviewContainer.appendChild(imageWrapper);
});
});
});
</script>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var form = event.target;
if (form.checkValidity() === false) {
form.reportValidity(); // Display validation error messages
event.preventDefault(); // Prevent form submission if it's not valid
$('#submitBtn').prop('disabled', false);
} else {
$('#submitBtn').prop('disabled', true);
}
});
</script>
</body>
</html>