Connection/Output Help

[Mekaboo]

Hey all!!!

Working on creating social media timeline post system like FB. Have what I want in place but unsure of how to connect. End result is user to add what they want within the dropdown menus and the output would show within the card and people can like and comment. Also results will show on dashboard as well as profile page.  I have PHP on the back end just need help on front. Here is my code:

 

<div id="main">
<ul class="nav justify-content-center">
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span style="font-size: 48px; color: #C0C0C0;">
  <i class="fas fa-pencil-alt"></i>
          </span>
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
       <form action="upload.php" method="post" enctype="multipart/form-data">
    <textarea rows="4" cols="50" name="comment" form="usrform">Share thoughts</textarea>
         Upload Image:
  <input type="file" name="fileToUpload" id="fileToUpload">
 <input type="submit" value="Upload Image" name="submit">
</form>
<button type="submit" form="nameform" value="Submit">Submit</button>

        </div>
      </li>
  <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 <span style="font-size: 48px; color: #C0C0C0;">
  <i class="fas fa-video"></i>
          </span>     
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  <form action="upload.php" method="post" enctype="multipart/form-data">
          <div class="col-lg-10">
                               <input type="text" name="page_url" class="form-control" id="input_url" placeholder="Page embed URL" value="<?php echo !empty($userData['_url'])?$userData['url']:''; ?>">
                          <input type="submit" class="btn btn-primary" name="proSubmit">
           </div>
    </form>    
    </div>
          
      </li>
</ul>
</div>
   <div class="card hovercard" style="width:400px">
  <div class="card-body info">
                  <div class="title">
                      <a href="#"><?php echo $record['uname']; ?></a>
                  </div>
        <div class="desc"> <a target="_blank"
href="<?php echo $record['file']; ?>"><?php echo $record['text']; ?></a></div>
                  <div
class="desc"><?php echo $record['url']; ?></div>
     </div>
  </div>
  <div class="comment-form-container">
            <form id="frm-comment">
                <div class="input-row">
                    <input type="hidden" name="comment_id" id="commentId"
                           placeholder="Name" /> <input class="input-field"
                           type="text" name="name" id="name" placeholder="Name" />
                </div>
                <div class="input-row">
                    <textarea class="input-field" type="text" name="comment"
                              id="comment" placeholder="Add a Comment">  </textarea>
                </div>
                <div>
                    <input type="button" class="btn-submit" id="submitButton"
                           value="Publish" />
                </div>

            </form>
        </div>
        <div id="output"></div>
  

Also attached how page looks online

 

Thank ya

[Ingolme]

I'm not sure what you need help with. At a glance, the code looks functional.  Most of what you're talking about is back-end work, but you're only asking for help in the front-end.