How to add collapsible form to edit-button inside PHP code? I tried something, but didn't work
Question
I have been trying for two weeks to add a collapsible button which should reveal the edit-form. I found something, but that java code didn't work properly inside my PHP code . For example, it works two by two and it is very annoying.
I tried to add another variables which could change that issue, but didn't work. After that, worked three by three.
<?php
if(isset($_SESSION['id'])) {
if($_SESSION['id'] == $row2['id']){
echo "<button type='submit' class='edit-comment'>Edit</button>
<div class='content'><form class='content edit-form' method='POST' action='".editComments($conn)."'>
<input type='hidden' name='comment_id' value='".$row['comment_id']."'>
<input type='hidden' name='user_id' value='".$row['user_id']."'>
<input type='hidden' name='date' value='".date('d-m-Y H:i:s')."'>
<textarea class='comment' name='comment'>".$row['comment']."</textarea><br>
<button id='edit' name='submite' type='submit'>Edit</button>
</form></div>
<script>
var coll = document.getElementsByClassName('edit-comment');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}
</script>"; ?>
I expect to reveal all the comments, but works just two by two. Here is a picture to understand better what I said:
1 answers
solution1
1 ACCPTED 2019-05-19 07:35:24
I don't know if the following will be of interest as it's likely I have perhaps misunderstood the problem having not been able to view all the code at this point. The following will create ( emulate the creation of ) several of these minimised/hidden forms and a single javascript listener is registed for all of them
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>expanding forms</title>
<style>
html *{
box-sizing:border-box;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-ms-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
.content{
display:none;
margin:1rem 0;
}
.expanded{
min-height:10rem;
max-height:10rem;
height:10rem;
display:block;
border:1px solid black;
padding:0.25rem;
}
.minimised{
height:0rem;
}
button.edit-comment{display:block;}
textarea{
width:80%;
height:9.25rem;
margin:auto;
resize:none;
}
form > button[type='submit']{
float:right;
width:10%;
padding:1rem;
background:gray;
color:white;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', e=>{
Array.prototype.slice.call( document.querySelectorAll('button.edit-comment') ).forEach( function( bttn ){
bttn.addEventListener( 'click', function(e){
let div=this.nextElementSibling;
div.classList.toggle( 'expanded' )
});
});
});
</script>
</head>
<body>
<?php
for( $i=1; $i <=10; $i++ ){
printf("
<button type='submit' class='edit-comment'>Edit</button>
<div class='content'>
<form class='hidden-content edit-form' method='POST' action='%s'>
<input type='hidden' name='comment_id' value='%d'>
<input type='hidden' name='user_id' value='%d'>
<input type='hidden' name='date' value='%s'>
<textarea class='comment' name='comment'>%s</textarea>
<button name='sub' type='submit'>Edit</button>
</form>
</div>",
'',
$i,
$i,
date('d-m-Y H:i:s'),
'This is a comment #'.$i
);
}
?>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.