showcase every value upon submission in the form with options to edit and delete

  • Is it possible to display all values submitted in a form with edit and delete buttons?
  • Currently, only one value is being displayed at a time.
  • Whenever a new value is displayed, it replaces the old one. How can this be fixed?
  • You can find my code on Codepen here.
$('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    var name = $('#name').val();
    var message = $('#message').val();
    var div = "<div><span>"+name+"</span><span >"+email+"</span><span>"+message+"</span><input type='button' value='Edit' name='editHistory'><input type='button' value='Delete' name='deleteHistory'></div>";  //add your data in span, p, input.. 
    //alert(div);

    $('.gettingValues').html(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form 
    localStorage.clear();
 });

Answer №1

Transformation

$('.receivingValues').html(div);

Into

$('.receivingValues').append(div);

The html function replaces the existing HTML content of an element, whereas append simply adds the new div to the existing content without removing it.

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

Exploring the capabilities of the Angular 2 expression parser alongside the functionality of the

Is there a way to create an equivalent of the Angular 1.x ngInit directive in Angular 2? I am familiar with the ngOnInit hook, which is recommended for initialization code. The ngInit directive seems like a quick and declarative way to prototype or fix a ...

What is the alternative method for reading an HTML text file in JavaScript without utilizing the input type file?

Within the assets folder, there is a text file containing HTML that needs to be displayed within a specific component's div. Is it possible to retrieve the contents of this file and assign them to a string variable during the ngOnInit lifecycle hook ...

Placing information within a nested array with multiple levels of nesting

I'll try to keep this concise, Here is the structure of the schema... import mongoose from 'mongoose' const QuestionSchema = mongoose.Schema({ questionTitle: { type: String, required: " title"}, questionBody: { type: Stri ...

Iterate through the array in order to showcase or output it in PHP syntax sourced from an API

[0] => Array ( [id] => 6 [name] => Digitally Imported Psy Goatrance [country] => GB [image] => Array ( [url] => https://img.dirble.com/station/6/original.png ...

Error message appears when attempting to duplicate vertices in a THREE.Geometry object: 'Vector is not defined'

I am attempting to dynamically add new faces to a mesh, but I keep encountering a console warning: THREE.BufferAttribute.copyVector3sArray(): vector is undefined Despite the warning, this example successfully generates a single triangle that is a repli ...

How to Retrieve the Absolute Index of the Parent Column Using jQuery Datatables

I recently developed a custom column filtering plugin for datatables, but I've encountered a minor issue. Within each column footer, I have added text inputs, and now I am trying to capture their indexes on keyup event to use them for filtering. In ...

When $routeChangeStart is triggered, the location fails to locate the corresponding template

In my web application, I have an app variable associated with the module myApp. There are 3 pages: /login, /registration, and /. The behavior of $routeChangeStart is defined as follows: First, it checks if a global variable user is defined. If yes, it mo ...

Maintaining the dropdown in the open position after choosing a dropdown item

The dropdown menu in use is from a bootstrap framework. See the code snippet below: <li id="changethis" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown>LINK</a> <ul class="dropdown-menu"> <li id ...

Issues with Submitting Form using Jquery, PHP, and Mysql

As a beginner, I find this task quite stressful. I want to create a simple chat system where users can send messages to the database without refreshing the page. Why isn't this code working (I've used similar code successfully before)..? <scr ...

Is there a Jquery function that retrieves the html content of a specified div element?

After trying multiple approaches without success, I am struggling with extracting the HTML content of a div element in my HTML layout. The div element is declared as ("myDiv"). I am looking to create a function that can accept any div as an argument and th ...

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

Delete items within the first 10 minutes of shutting it down

Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local stor ...

Using jQuery to serialize AJAX requests with variables

I've encountered an issue with submitting a form using jQuery ajax after validation checks. Strangely, when I use a variable for the form ID in the data parameter, the form data fails to submit. However, if I explicitly specify the form ID, the submis ...

Attempting to align three sections horizontally

I'm having trouble with my current HTML code and I can't seem to figure out what the issue is. As a beginner in HTML, I am struggling to understand. My goal is to have three columns: one on the left taking up 20% of the space, one in the center t ...

What are the techniques used to minimize JavaScript functions?

Is there a more efficient way to reduce the amount of JavaScript code needed for functions that share the same call procedure? I'm struggling to find a clear explanation but here's the code snippet below... JavaScript: $(function() { $( &a ...

Launch a bootstrap modal using jQuery, showcasing a designated HIDDEN section (excluding nav-tabs)

This unique modal box does not have a visible tab. Instead, it utilizes the href attribute for navigating to other pages. <div id="bootmodal" class="modal fade" tabindex="-1" data-width="370" data-backdrop="static" data-keyboard="false" style="display: ...

Excessive whitespace appearing on the right side of a Wordpress website

Currently, I am working on a project with a WordPress website that is using the TwentyFourteen theme. As I was going through the site, I noticed an unexpected white margin on the right side of the page extending about 200px in width. Upon inspecting it fu ...

Determine the present vertical measurement of the video

I am having trouble determining the actual height of a video element. Despite seeing in the developer tools that it is 384px, I am only able to retrieve a height of 342px. I attempted the following code snippet, but it only gives me the natural height, no ...

Upon loading the page, I encountered an issue with the 'errors' variable in my ejs template, resulting in an 'undefined' error

When I load my page, I encounter an 'undefined' error with my 'errors' variable in the ejs template. The ejs template I have is for a contact form and it includes code to display errors as flash messages on the page if the form is inco ...

Could an element's loading be postponed on the initial page a user lands on?

One of my clients has requested a live chat system to be added to their website. I am fully capable of implementing it, and it is included through a script tag. Additionally, they have asked for a slight delay before the chat system loads in. My initial t ...