Looking to add elements to a specific div dynamically using jQuery? Let's explore how to insert comments seamlessly

I would like to implement a comment system that adds entered comments to a specific div. Here's the code I have so far:

<ul class="comments">

    <li>
        <a class="commenter_name" href="/">Dushyanth Lion</a>
            comment by user
    </li>
     <li>
         <a class="commenter_name" href="/">Saikat Bhattacharjee</a>
         comment by user
     </li>
</ul>
  <div class="comment_entry">
        <form method="post" action="#">
            <input type="text" placeholder="Leave comment" />
            <input type="submit" style="display:none;" onclick="" />
        </form>
  </div>

As you can see, I am trying to achieve a particular functionality but need help in dynamically adding 'li' elements after a comment is submitted. Can anyone guide me on how to accomplish this?

javascriptjqueryhtmlcss

Answer №1

Here is a suggestion for your issue (check out the demonstration here: http://jsfiddle.net/7rkX4/):

Let's say you have a variable named user_name set to 'Danil'.

When a form inside an element with class 'comment_entry' is submitted, this jQuery code handles it:

$('.comment_entry form').submit(function (e) {
  // Prevent the form from submitting
  e.preventDefault();
  // Get the value of the input field within the form
  var comment = $('input', this).val();
  // Append a new list item to elements with class 'comments'
  $('.comments').append('<li><a class="commenter_name" href="/">' + user_name + '</a>' + comment + '</li>');
});

Answer №2

$('.feedback').append('<li><a href="#">Bazqux</a> Feedback</li>');

Answer №3

Transform the submit button into a regular button and assign IDs to both the button and text field: 

<input type="text" placeholder="Leave comment" id="comment" />
<button type="button" style="display:none;" id="submitComment" />

Integrate jQuery code snippet: 

$('#submitComment').live(click,function(){
    $('.comments').append('<a class=\"commenter_name\" href=\"/\">Dushyanth Lion</a>'+ $('#comment').val());
});

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

customizable items or grouped items in a magento store

I am currently working with Magento, focusing on one product in particular - the Tshirt. This Tshirt comes in three sizes: "Large", "Medium", and "Small", each of which has 2 or 1 color options. For the "large" and "medium" sizes, customers can choose be ...

phpjquerymagento

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

javascriptreactjstypescriptcanvasfabricjs

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

javascriptjqueryhtml

Expo BarCodeScanner becomes unresponsive (specifically, the camera) upon exiting the application

I am using Expo's BarCodeScanner component within a tab: return ( <View style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end", }} > <BarCodeScanner onBarCodeScanned={s ...

javascriptreact-native

Create a Flot graph using data from a database

Here is a snippet of jQuery code that I am currently working with: jQuery(document).ready(function () { var formData = "f=27/07/2015&t=01/08/2015"; jQuery.ajax ({ url: 'http://www.yourhealthfoodstore.co.uk/test.p ...

jqueryjson

My form does not trigger a 'Save Password' prompt in any browser

I have been struggling to get the browser to prompt a 'Save Password' while using the form below. Despite trying various solutions from different forums, nothing seems to work. Can anyone point out where I might be going wrong? Any help would be ...

htmlformszend-framework

The collaboration between delegate and :not(.myClass) is ineffective

How can I select all ul li items that do not have the .roundabout-in-focus class? $("ul").delegate("li.roundabout-in-focus", "click", function() { $(this).css({position:'absolute',height:'300px',width:'400px',le ...

jqueryclassdelegatesevent-handlingclick

AngularJS: Updating data in controller but not reflecting in the HTML view

Within my AngularJS app, I've come across the following code: example.html <div> <p>{{name}}</p> </div> <div> <button ng-click="someFunction()"></button> </div> exa ...

javascriptangularjshtmlangularjs-scope

Guide on incorporating file uploads in an Angular 6 project

I am currently working on creating a component where I have implemented a file upload function in a child component and am attempting to use that component's selector in another one. Here is my project structure: - upload : upload.component.html up ...

javascriptangularfile-upload

Grid items in Material UI are not positioned next to each other

I am encountering an issue with the Grid component in material-ui. The grid items are currently stacking below each other instead of beside each other, and I'm unsure of what is causing this behavior. My intention is for the grid items to stack on top ...

javascriptcssreactjsreact-routermaterial-ui

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

I'm attempting to slightly adjust the alignment of the text to the center, but it keeps causing the text to shift

I am facing an issue where I want to slightly center text, but whenever I add just 1px of padding-left, it moves to a new line. In my layout, I have 2 columns each occupying 50% width of the screen. One column contains only a photo while the other has a ba ...

htmlcss

Leveraging two AJAX requests within a single function

I am working on creating an ajax function to post data that I've retrieved using another ajax function. While I have figured out how to use a callback function, I am struggling with passing the data from one function to the other. Here is what I have ...

javascriptjqueryajaxcallback

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...

htmlcssflexbox

How to Exclude Specific Div from CSS Stylesheet Styling

Currently, I am utilizing the bootstrap CSS framework for a specific page on my website. The issue arises when the CSS styling included in Bootstrap interferes with the formatting of my sidebar by changing its color, font size, and font family. Is there a ...

htmlcsstwitter-bootstrap

Passing data in JSON format to PHP

I am having trouble sending a JSON to a PHP page using jQuery. The code I have doesn't seem to work as expected: json_data = {}; json_data.my_list = new Array (); $('#table_selected tr').each (function (i) { json_data.my_list.push ({id ...

phpjqueryjson

Issue encountered when submitting MVC .NET form - Controller Action not being accessed

I am currently facing an issue with a form for creating an object in a view. The form structure is as follows: @using (Html.BeginForm("Create", "Request", FormMethod.Post, new { id = "createForm" })) { @Html.HiddenFor(model => model.RequestDate) ...

jqueryasp.net-mvcforms

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

I am currently working on a small widget for a webpage that displays steps in reverse order. My plan is to use an ol element and adjust the value attribute on each li tag to make the numbering of the ordered list reversed. Everything seems to be going smoo ...

htmlcss

Issue with implementing MUI Grid within a dialog across various screen sizes

While working with a MUI dialog and MUI grid, I encountered an issue. The code I am using is directly from the website, with only minor modifications to the dialog function names and the box wrapping the dialog. Despite changing the size of the dialog, t ...

javascriptcssreactjsmaterial-ui