onclick in javascript with while loop from php

Question

I'm desperately trying to add reply fields to a comment section for a couple of days now - basically I want a reply field(div) to appear as soon as you click a certain button. I thought using an onclick event handler was the way to go.

We are already in an php echo, so I thought it would be easy to just add the row-id (cid) to the actual div and button id - turns out its not working..

Added myFunction() to the button

Added "myDIV" to check whether the code would work with this simply div - it does

Added ID to print out the name of the div and button while "cid" is added to get a better overview in the browser (cid in the brwoser were as expected) - lastly I got rid of the code and just alerted the cid and was very surprised that it was a number I didn't expect.. it was the last cid from the database

  if($usermatchcom1 = $usermatchcom->fetch_assoc()){

    echo "<div class='comment_box'><p>";
    echo $usermatchcom1['uidusers']."<br>";
    echo $comments1['date']."<br>";
    echo nl2br($comments1['message']);
    echo "</p>";

    if(isset($_SESSION['userid'])){
      if($_SESSION['userid'] == $usermatchcom1['idusers']){
        echo "<form class='delete_form' method='POST' action='".deletecomments($conn)."'>
        <input type='hidden' name='cid' value='".$comments1['cid']."'>
        <input type='hidden' name='sid' value='$sid'>
        <input type='hidden' name='sname' value='$sname'>
        <button type='submit' name='deletesubmit'>Delete</button>
        </form>
        <form class='edit_form' method='POST' action='editcomment.php'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='uidname' value='".$comments1['uidusers']."'>              
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <button>Edit</button>
        </form>";
      }else{
          echo "<form class='reply_form' method='POST' action='replycomment.php'>

          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <button>Reply</button>
          </form>";
      }
    }else{
      echo "<p class='replymessage'>You need to be logged in to reply</p>";
    }

    echo "</div>";

      }

      foreach($replymatch as $replymatch1){

        echo "<div class='reply_box'><p>";
        echo $replymatch1['uidusers']."<br>";
        echo $replymatch1['date']."<br>";
        echo nl2br($replymatch1['message']);
        echo "</p><br>";



        if(isset($_SESSION['userid'])){
          if($_SESSION['userid'] == $replymatch1['uidcomments']){
        echo "<form class='delete_form' method='POST' action='".deletecomments($conn)."'>
        <input type='hidden' name='cid' value='".$comments1['cid']."'>
        <input type='hidden' name='sid' value='$sid'>
        <input type='hidden' name='sname' value='$sname'>
        <button type='submit' name='deletesubmit'>Delete</button>
        </form>
        <form class='edit_form' method='POST' action='editcomment.php'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <button>Edit</button>
        </form>";
      }else{
          echo "<form class='reply_form' method='POST' action='replycomment.php'>

          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <button>Reply</button>
          </form>
          <button id='test_".$replymatch1['cid']."' onclick='myFunction()'>Test</button>";
      }
    }else{
      echo "<p class='replymessage'>You need to be logged in to reply</p>";
    }

    echo "</div>";

    echo "

    <style>
    .replytest_".$replymatch1['cid']."{
      width: 400px;
      margin-left: 50px;
      max-height: 200px;
      overflow: hidden;
      background: #fff;
      color: black;  
    }
    .replytest_".$replymatch1['cid'].".open{
      max-height: 80px;
      color: red;

    }

    #myDIV {
      width: 400px;
      margin-left: 50px;
      max-height: 200px;
      overflow: hidden;
      background: #fff;
      color: black;  
    }

    </style>";

    echo "

<div id='myDIV'>
This is my DIV element.
</div>
<br>

<p id='testtext'>Divs name is replytest_".$replymatch1['cid']." and buttons name is showmore_".$replymatch1['cid']."</p><br>

<p id='showme'>Test</p>

</div>       
<script>
  function myFunction() {
  var x = document.getElementById('replytest_".$replymatch1['cid']."');
    if (x.style.display === 'none') {
      x.style.display = 'block';
    } else {
     x.style.display = 'none';
    }
   }

";

I "simply" want a textarea to appear below the comment I clicked "reply" on - as of my understanding I have to do this in a php while loop, since I receive the comments from the database

Any help would be appreciated

Thx guys

Also, javascript is client side script, php is server side script. — Wang Liang
– Wang Liang, Commented Apr 24, 2019 at 19:11
I think, you need ajax for your purpose. Please share more code, I can find main problem. — Wang Liang
– Wang Liang, Commented Apr 24, 2019 at 19:12
If I understand correctly, the code you posted is multiple times on the page, including the <script>? That's not going to work, and you only need a single click handler function anyway. Here's vanilla JS example code: jsfiddle.net/khrismuc/w209uvfk — user5734311
– user5734311, Commented Apr 24, 2019 at 19:49

Noman marwat · Accepted Answer · 2019-04-24 19:33:46Z

3

Here is your required solution with jquery. Now you can use php also here for dynamic data.

$(document).ready(function(){
  $("button").click(function(){
    $("#replyField").fadeToggle();
  });
});

button{
 display:block;
 }
 
#replyField {
 
 display:none
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Reply</button>
<textarea rows="4" cols="50" id="replyField">
 
</textarea>

answered Apr 24, 2019 at 19:33

Noman marwat

3633 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Just updated the code - thx a lot for your replies - kinda busy today but i will check your guys codes tomorrow - again.. thx alot!

Alex Over a year ago

wow thank you guys.. both of your codes work perfect - thx a lot

Collectives™ on Stack Overflow

onclick in javascript with while loop from php

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related