Strategies for Preserving Added Field Data Using JQuery

I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle.

My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking for specific code, just wondering if it's possible and how theoretically?

UPDATE:

The information entered into the dynamically added fields gets saved to a database. Should I use an if statement to check if there is data for that user and then recreate the fields using the append function? Or would it be better to create hidden fields beforehand and simply clone them, change the type, and populate them with saved data?

jqueryhtmldatabasetheory

Answer №1

One efficient approach is to eliminate the hidden fields in your form since you have already stored all necessary data in your database. Instead, you can create the form without these hidden fields. When a user wants to add more fields, they can simply click a button or link which triggers an ajax request. This request will retrieve the required data for the additional fields, and upon receiving a response in json/xml format, you can seamlessly integrate this fetched data into your form.

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

Having trouble with the $push operator in Mongo DB?

I am facing an issue while attempting to store data in an array within an object in a Mongo model by utilizing the req.params method. Unfortunately, I encounter the following error: MongoError: cannot use the part (friends of friends.username) to traverse ...

htmljsonnode.jsmongodbmongoose

Tips on concealing modal popup when the page refreshes successfully

I implemented a progress modal popup to show progress for page reloads. This script is set to the master page and injects the progress modal popup when the form submit event is fired: <script type="text/javascript"> function ...

javascriptjqueryasp.net

Discovering an Element in jQuery through its ID using Spaces and Variables

My issue involves locating an element within another element using an ID and then adding a class when the ID is hardcoded. For example: var tableId = el.id; $('#' + tableId).find("[id='Checkout On']").addClass('highlight'); ...

javascriptjqueryjquery-selectors

Accordion featuring collapsible sections

Looking to build an accordion box using Javascript and CSS. The expanded section should have a clickable link that allows it to expand even further without any need for a vertical scroll bar. Any ideas on how this can be achieved? Thank you ...

javascripthtmlcss

"Redirecting visitors based on their location using GeoIP targeting for

Is there a way to implement a code that redirects users based on their location? For example, if a user accesses the site from the United Kingdom, they should be redirected to /UK/, if from the US to /US/, and if from anywhere in the EU (excluding the UK) ...

javascriptjqueryhtmlcssgeoip

Implementing a document update event using jQuery

On my WordPress site, I am using a responsive lightbox plugin. When an image is clicked, it opens a popup box with the ID fullResImage. Now, I would like to incorporate the Pinch Zoomer function to it. Do I need to bind a function for this, or is there a s ...

javascriptjquerywordpresslightbox

Spontaneously generating visuals that lead an unpredictable existence

Every 0-2 seconds, I generate a unique image and place it randomly within a designated area. setTimeout("addImage()", Math.floor((Math.random() * 2000) + 1)); To maintain order, I want these images to vanish after being visible for an interval o ...

javascriptjquery

What could be preventing certain child elements from rendering in the browser when using scss/ compiled css?

I currently work with the Visual Studio Code editor and execute "npm run sass" in the bash terminal. Whenever I modify the scss file, the terminal displays the following message: => changed: C:\Users\kenne\modern_portfolio\scss\m ...

htmlcssnpmsass

Why isn't the selected option appearing first?

I have written a PHP code to display the specified div <div id="main_catsel"> <select id="maincat" > <option value="1">none</option> <option value="2">Computer</option> <option value="4">Refrigerator& ...

phphtml

Having trouble sending an array from Flask to a JavaScript function

As a newcomer to web development and JavaScript, I'm struggling to pass an array from a Flask function into a JavaScript function. Here's what my JS function looks like: function up(deptcity) { console.log('hi'); $.aja ...

javascriptpythonhtmlajaxflask

When Vue 3 is paired with Vite, it may result in a blank page being rendered if the

Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...

javascripthtmlvue.jsvuejs3vite

Guide on integrating a jQuery confirmation popup in CodeIgniter

Currently, I am working on a project independently and have chosen CodeIgniter as my framework. I am relatively new to PHP and CodeIgniter. I managed to create a confirm box in jQuery, but it displays as an HTML alert. Can someone guide me on how to improv ...

phpjquerycodeigniter

CSS3 animation for rotating elements

If I have this box in CSS3 (also if, for what I understand, this is not CSS3, just browsers specific) : HTML <div id="container"> <div id="box">&nbsp;</div> </div> ​ CSS Code #container { paddin ...

jqueryhtmlcss

Incorporate ng-model to manage dynamically generated HTML elements

I have created dynamic div elements with a button inside, and I want to access its value using ng-model, but the value is not being retrieved. Here is my code: var url = "/api/chatBot/chatBot"; $http.post(url,data) .success(function(data){ $scope.mes ...

javascripthtmlangularjs

Once the form has been submitted, proceed to open a new page following processing

Trying to remove an entry or offer from the database and then return to the page with all entries/offers. Attempted using Javascript, but it successfully deletes the item without redirecting to the overview page. Is this the correct approach with Javascri ...

javascriptphphtml

Using Jquery for AJAX validation

I am currently working on setting up error messages for my form using jQuery. However, when I try to view the form, it only requires the email field to be filled out, even though I have specified that the name field is required as well. Below is the code I ...

jqueryformsvalidation

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

javascriptjqueryhtmlmultiple-select

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Changing SVG containing image tags into HTML canvas

I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...

javascriptjqueryhtmlsvg

When viewing super-sized (local) files in Chrome(ium), HTML5 video doesn't display images

I am currently developing an Electronjs application that requires playing very large videos stored on the user's machine. I have experimented with using both the vanilla HTML5 video tag and other players. Interestingly, small videos load and play with ...

htmlvideoelectronchromiummp4