Is there a way for me to retrieve the specific comment ID that I am looking to respond to?

I have written the code below and I am looking to extract a specific ID to reply to a comment. Can someone please review the snippet below and provide guidance on the necessary steps to achieve this.

.anc {
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a class="anc" data-toggle="modal" id="1" data-target="#add-reply">Reply 1</a>
<a class="anc" data-toggle="modal" id="2" data-target="#add-reply">Reply 2</a>
<a class="anc" data-toggle="modal" id="3" data-target="#add-reply">Reply 3</a>
<div class="modal fade modal-add-review" id="add-reply" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
        <h4 class="modal-title">Reply</h4>
      </div>
      <div class="modal-body">

        <form class="comment-form" method="post">
          <p class="comment-notes">
            <span id="email-notes">
                Your email address will not be published.
            </span> Required fields are marked
            <span class="required">*</span>
          </p>
          <div class="row">
            <div class="form-group comment-form-author col-sm-6">
              <label for="author">Name<span class="required">*</span></label>
              <input class="form-control" id="reply_author" name="reply_author" type="text" required value="" placeholder="Enter your name">
            </div>
            <div class="form-group comment-form-email col-sm-6">
              <label for="email">Email<span class="required">*</span></label>
              <input class="form-control" id="reply_email" name="reply_email" type="email" required value="" placeholder="Enter your email">
            </div>
          </div>
          <div class="form-group comment-form-comment">
            <label for="comment">Comment<span class="required">*</span></label>
            <textarea class="form-control" id="reply_content" name="reply_content" required placeholder="Enter your message"></textarea>
          </div>
          <button class="btn btn-primary" name="create_reply" type="submit">
            <i class="fa fa-check"></i>Submit
        </button>
        </form>

      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Here is an example of how to use it:

$('.commentBox').on('click', '.replyBtn', function(){
    $(this).parents('.commentBox');
})
<div class="commentBox">
<div class="modal fade modal-add-review" id="add-reply" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                <h4 class="modal-title replyBtn">Reply</h4>
            </div>
            <div class="modal-body">

           <-- MODAL REPLY FORM -->

            </div>
        </div>
    </div>
</div>      
</div>

Answer №2

A custom function, addId, is created with an id parameter that is then added to the onclick event of all a tags. When a user clicks on an a tag, the addId function is triggered, setting the id to a hidden input field.

 function getId(id){
   document.getElementById("commentId").value = id;
 }
.anc {
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a class="anc" onClick="getId(1)" data-toggle="modal" data-target="#add-reply">Reply 1</a>
<a class="anc" onClick="getId(2)" data-toggle="modal" data-target="#add-reply">Reply 2</a>
<a class="anc" onClick="getId(3)" data-toggle="modal" data-target="#add-reply">Reply 3</a>
<div class="modal fade modal-add-review" id="add-reply" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
        <h4 class="modal-title">Reply</h4>
      </div>
      <div class="modal-body">

        <form class="comment-form" method="post">
          <p class="comment-notes">
            <span id="email-notes">
                Your email address will not be published.
            </span> Required fields are marked
            <span class="required">*</span>
          </p>
          <div class="row">
            <div class="form-group comment-form-author col-sm-6">
              <label for="author">Name<span class="required">*</span></label>
              <input class="form-control" id="reply_author" name="reply_author" type="text" required value="" placeholder="Enter your name">
            </div>
            <div class="form-group comment-form-email col-sm-6">
              <label for="email">Email<span class="required">*</span></label>
              <input class="form-control" id="reply_email" name="reply_email" type="email" required value="" placeholder="Enter your email">
            </div>
          </div>
          <div class="form-group comment-form-comment">
            <label for="comment">Comment<span class="required">*</span></label>
            <textarea class="form-control" id="reply_content" name="reply_content" required placeholder="Enter your message"></textarea>
          </div>
          <input type="hidden" id="commentId" name="id">
          <button class="btn btn-primary" name="create_reply" type="submit">
            <i class="fa fa-check"></i>Submit
        </button>
        </form>

      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

One issue I'm facing is that the page doesn't auto-refresh, although it loads when I manually refresh it. Below you can find my HTML and AJAX code along with its database details. The Trigger Button <?php $data = mysqli_ ...

javascriptphpjqueryhtmlajax

Is there a way to show several elements simultaneously by hovering over another?

Can anyone help me with setting display:block; on all the p tags and the overlay div when I hover over my img tag? Is this achievable with just CSS or do I need to incorporate some JavaScript? Open to suggestions on the best approach. Any assistance woul ...

javascripthtmlcss

Is it necessary to generate a "custom.scss" file each time I start a fresh bootstrap project?

While following a Bootstrap tutorial by Kevin Powell, I encountered an issue where he copies a custom.scss file into a separate folder that I couldn't locate. This might be due to the fact that I'm using an updated version of Bootstrap. Accordin ...

visual-studionpmbootstrap-4

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

Currently, I am delving into the world of Selenium using python to automate form filling on a particular website. However, my efforts have hit a roadblock as I am struggling to identify any elements within a frame and encountering a dreaded NoSuchElementEx ...

pythoncssseleniumframewebdriverwait

Transforming Symbol Characters into HTML Using VB.NET

I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...

htmlvb.netcharacter-encoding

Prevent lengthy headers from disrupting the flow of the list items

I've encountered an issue while working on a website that features a list of items. When the title, such as "roller blinds," spans across two lines, it disrupts the layout below. How can I prevent this from happening without compromising on having lon ...

htmlcsshtml-lists

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

javascripthtmldjangoajaxforms

Can you tell me the name of this specific page arrangement style?

What is the term for the specific layout style used on Asana's homepage? This layout consists of a single, long page divided into sections that are approximately the size of the viewport. While sometimes it includes parallax scrolling, in this case i ...

htmlcsslayout

Tips on storing the amount of time a user devotes to answering questions on my form into a database

I am facing an issue with storing the "duration" in my database. The "duration" I aim to store is the time spent by the user answering a question I created. When they click the submit button, I want to save the duration they spent in the database. Below i ...

javascriptphphtmlmysqllaravel

What is the method for integrating an element into a different flow using the position property?

How can I solve the following issue: I am working with a carousel markup that has the same HTML structure as shown below. <div> // Contains the carousel slide <div> <ul> <li><img src={....} /></li> <li ...

csssassscss-mixinssplidejsscss-functions

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

jquerycss

What is the best way to display the most recent 5 posts with associated images after uploading them from a MySQL database?

The main objective is to display the most recent 5 posts along with their images after they are uploaded to the MySQL database. The project consists of 4 essential files: connection.php - successfully connects to the database new_post.php - allows adding ...

phpmysqlbootstrap-4gallery

hidden behind the frame is a drop-down menu

I am currently working on a website that uses frames. The topFrame.php contains a menu with drop-down submenus, while the main frame displays the website content. However, I am encountering an issue where the submenu in the topFrame is getting hidden beh ...

htmlcssmenuframe

Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min ...

htmlcsstwitter-bootstrapbootstrap-4

The background image will not repeat to completely cover the height

Click here to view my issue. I have set the background image to repeat the entire height, but it's not behaving as expected. Here is my CSS #wrapper { margin: 0px; padding: 0px; background: url(img02.jpg) repeat-x left top; } I attempt ...

htmlcss

Adjust the select box size to be in line with the text box dimensions

I'm struggling to understand why there are two boxes visible in my navigation bar. For example, when looking at the Home link, I notice that there are actually two boxes; one containing the text "Home" and another one that extends outwards to the rig ...

htmlcss

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

My website has a sticky navbar fixed at the top, and this is the structure of my sticky navbar: $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") { ...

javascriptjqueryhtmlcss

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

AngularJS: When the expression is evaluated, it is showing up as the literal {{expression}} text instead of

Resolved: With the help of @Sajeetharan, it was pinpointed that the function GenerateRef was faulty and causing the issue. Although this is a common query, I have not had success in resolving my problem with displaying {{}} to show the outcome. I am atte ...

htmlangularjsweb-applications