Update Kommentar

Tag, ich habe kurz ein Update Skript geschrieben, sodass man sein Kommentar bearbeiten kann. Jetzt weiß ich nicht wie ich es machen soll, dass wenn ich auf den Button „bearbeiten“ klicke, erstmal ein Textfeld kommt, wo eig. Der Kommentar stand und dann halt absenden kann mit ENTER oder halt einen Button.

Der hier verwendete Code

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" ></script> <style> #modal-container { position: fixed; display: table; height: 100%; width: 100%; top: 0; left: 0; transform: scale(0); z-index: 1; } #modal-container.one { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one .modal-background .modal { transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out { transform: scale(1); animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out .modal-background .modal { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container .modal-background { display: table-cell; background: rgba(0, 0, 0, 0.8); text-align: center; vertical-align: middle; } #modal-container .modal-background .modal { background: white; padding: 50px; display: inline-block; border-radius: 3px; font-weight: 300; position: relative; } #modal-container .modal-background .modal h2 { font-size: 25px; line-height: 25px; margin-bottom: 15px; } #modal-container .modal-background .modal p { font-size: 18px; line-height: 22px; } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } @keyframes unfoldOut { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(0.005) scaleX(0); } } @keyframes zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } </style> <section class="delete_comment"> <form action="" method="POST"> <p class="update_and_delete"> <button type="submit" name="update_comment" class="update_btn" value="<?php echo $row2['k_id']; ?>"><i class="fas fa-pen-square"></i></button> <button type="submit" name="delete_comment" class="comment_delete_btn" value="<?php echo $row2['k_id']; ?>"><i class="fas fa-times"></i></button> </p> <!-- Hier ist das Kommentar Feld zum bearbeiten --> <p><input type="text" name="comment_update" class="update_comment_box" placeholder="Kommentar Bearbeiten"></p> <!-- Ende Kommentar Feld --> </form> <?php } else { ?> <p></p> <?php } ?> </section> <div id="modal-container"> <div class="modal-background"> <div class="modal"> <form action="" method="POST"> <p><input type="text" name="comment_update" class="update_comment_box" placeholder="Kommentar Bearbeiten"></p> <!-- Ende Kommentar Feld --> <button type="submit" id="senden"> Senden </button></form> </div> </div> </div> <script> $("input[name='comment_update']").click(function(){ $('#modal-container').removeAttr('class').addClass('one'); }); $('#senden').click(function(){ $('#modal-container').addClass('out'); $('body').removeClass('modal-active'); }); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!