I'm working on a website to track some maintenance logs, and I have a form to update some information that lives inside of a collapseable element. The code works fine on a page by itself, but inside of the element clicking the button does nothing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to the external CSS file -->
<link rel="stylesheet" type="text/css" href="../dataformstyles.css">
<title>N596HP Data</title>
</head>
<body>
<!-- Menu bar -->
<div class="menu-bar">
<ul>
<li><a href="../index.php">Home</a></li>
<li>
<a href="../6HP/6hp_data.php">P32R - N596HP ▾</a>
<ul class="dropdown">
<li><a href="../6hp/6hpad.php">AD - View/Edit/Add</a></li>
</ul>
</li>
<li><a href="#">P32R - N239ST</a></li>
<li><a href="#">C172 - N13262</a></li>
<li><a href="#">Aircraft 4</a></li>
<li>
<a href="#">Admin ▾</a>
<ul class="dropdown">
<li><a href="../addaircraft.php">Add Aircraft</a></li>
</ul>
</li>
</ul>
</div>
<div class="container">
<h1>N596HP</h1>
<div class="accordion">
<dl>
<dt><a href="#" class="accordionTitle">Current Data</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div style="width: 50%; float:left">
<p><b>Date:</b> <?php echo $current_date; ?><br>
<b>Tach:</b> <?php echo $current_tach; ?><br>
<b>Hobbs:</b> <?php echo $current_hobbs; ?><br>
<b>Fuel Left:</b> <?php echo $fuel_left; ?><br>
<b>Fuel Right:</b> <?php echo $fuel_right; ?><br>
</div>
<div style="width: 50%; float:right">
<br>
** <form action="../6hp/6HP_updatecurrent.php" method="post">
<label for="current_date">Date:</label>
<input type="text" name="current_date"><br>
<label for="current_tach">Tach:</label>
<input type="text" name="current_tach"><br>
<label for="current_hobbs">Hobbs:</label>
<input type="text" name="current_hobbs"><br>
<label for="fuel_left">Fuel Left:</label>
<input type="text" name="fuel_left"><br>
<label for="fuel_right">Fuel Right:</label>
<input type="text" name="fuel_right"><br>
<label for="location">Location:</label>
<input type="text" name="location"><br>
<input type="submit" value="Update"><br>
</form><br>**
</div>
</dd>
<dt><a href="#" class="accordionTitle">AD</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<table border="1">
<tr>
<th>AD Number</th>
<th>Date Complied</th>
<th>Tach Complied</th>
<th>Date Due</th>
<th>Tach Due</th>
<th>Remarks</th>
<th>Tach Time Remain</th>
</tr>
</dl>
<?php
if ($resultAD && $resultAD->num_rows > 0) {
while ($rowAD = $resultAD->fetch_assoc()) {
echo '<tr>';
echo '<td>' . $rowAD['N596HP_ad_number'] . '</td>';
echo '<td>' . $rowAD['N596HP_ad_date_complied'] . '</td>';
echo '<td>' . $rowAD['N596HP_ad_tach_complied'] . '</td>';
echo '<td>' . $rowAD['N596HP_ad_date_due'] . '</td>';
echo '<td>' . $rowAD['N596HP_ad_tach_due'] . '</td>';
echo '<td>' . $rowAD['N596HP_ad_remarks'] . '</td>';
if ($rowAD['N596HP_ad_tach_due'] === '' || $rowAD['N596HP_ad_tach_due'] === 'N/A') {
// Display N596HP_ad_date_due if tach due is blank or N/A
echo '<td>' . $rowAD['N596HP_ad_date_due'] . '</td>';
} else {
// Calculate and echo the tach time remaining
$tach_time_remain = $rowAD['N596HP_ad_tach_due'] - $current_tach;
echo '<td>' . $tach_time_remain . '</td>';
echo '</tr>';
}
}
} else {
echo '<tr><td colspan="7">No data found in the table for AD.</td></tr>';
}
?>
</table>
</dd>
</dl>
</div>
</div>
</body>
</html>
<?php
// Close the result set for "AD" section
$resultAD->close();
// Close the database connection
$conn->close();
?>
<script>
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
define( classie );
} else {
window.classie = classie;
}
})( window );
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
</script>
The CSS
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Lato";
}
/* This beggins the style for the top menu bar =========================*/
.menu-bar ul{
padding: 0;
list-style: none;
background: #22313f;
}
.menu-bar ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
.menu-bar ul li a{
display: block;
padding: 8px 25px;
color: #ffffff;
text-decoration: none;
}
.menu-bar ul li a:hover{
color: #fff;
background: #22313f;
}
.menu-bar ul li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
background: #22313f;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
.menu-bar ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
.menu-bar ul li ul.dropdown li{
display: block;
}
/*=============================================================================*/
h1 {
font-size: 2.5em;
padding: 10px;
text-align: center;
}
.accordion dl {
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #1abc9c;
color: #fafafa;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #16a085;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: #22313f;
border-bottom: 1px solid #2c3e50;
}
.accordionTitle:before {
content: "+";
font-size: 2em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #2c3e50;
}
.accordionTitleActive {
background-color: #34495e;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
}
.accordionItemContent table {
width: 100%;
border-collapse: collapse;
}
/* Style for table header row */
.accordionItemContent th {
background-color: #f2f2f2;
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
/* Style for table data cells */
.accordionItemContent td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
/* Style for even rows */
.accordionItemContent tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Hover effect for table rows */
.accordionItemContent tr:hover {
background-color: #ddd;
}
/* Add styles for the table */
table {
width: 100%;
border-collapse: collapse;
}
/* Style for table headers */
th {
background-color: #16a085;
text-align: left;
padding: 8px;
border-bottom: 2px solid #ddd;
}
/* Style for table cells */
td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
/* Style for alternating row colors (optional) */
tr:nth-child(even) {
background-color: #16a085;
}
.column {
flex: 50%;
padding: 10px;
}
@media all {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.menu-bar {
flex-direction: column; /* Stack items vertically */
align-items: center; /* Center items horizontally */
text-align: center; /* Center text */
}
.menu-bar a {
margin-top: 10px; /* Add spacing between links */
}
}
.accordionItemCollapsed {
max-height: 0;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
I've tried moving the form tags around and general trouble shooting but no luck.
source https://stackoverflow.com/questions/77123058/html-form-not-functioning-inside-of-element
Hello, my name is Muhammad Athar. I'm a 17 year old student. I'm a Web Developer, Designer and Freelancer.
No comments:
Post a Comment