Steps for assigning distinct identifiers to information entered through an input form

I have a question that I just can't seem to figure out:

So, I have this input form:

<form @submit.prevent="customSubmit">
    <label>Name</label>
    <input type="text" v-model="newUser.name" id="name" placeholder="Your Name">
    <label>E-mail:</label>
    <input type="email" v-model="newUser.email" id="email" placeholder="Your Email-Address">
    <label>Mobile Number</label>
    <input type="number" v-model="newUser.number" id="number" placeholder="Your mobile number" @keyup.enter="customSubmit">
        
</form>
<button type="button" class=buttonSignup @click="customSubmit">Submit</button>

The data is processed and sent to a nodeJS server using the following function:

customSubmit(){
    //Check if all fields are filled
    if(document.getElementById('name').value === ''){return}
    if(document.getElementById('email').value === ''){return}
    if(document.getElementById('number').value === ''){return}
    //POST to API
    const user = {
        method: "POST",
        headers: { "Content-Type": "application/json"},
        body: JSON.stringify({newUser: this.newUser})
    };
                
    fetch("http://localhost:3080/api/user", user)
        .then(response => response.json())
        .then(data => console.log(data));

    this.pushFunction(); //GET request to view the data

    this.clearForm();
}

Now, in order to send a DELETE request as well, I need to assign unique IDs to each entry within the customSubmit() function.

Can someone guide me on how to do this?

Thank you!

PS: Please disregard the German comments in the code snippets.

Answer №1

To properly handle your POST request, ensure that your node server generates a unique entry and returns a distinct ID as a response.

This ID should ideally be generated by the database (depending on the specific database you're utilizing) and will then become part of the data object that is received from the fetch function.

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

The closure in question received an undefined Angular parameter

Here is something similar to what I have: $scope.fetchData = function(path, save_to) { $http({method: 'GET', url: 'http://localhost:8001/www-root/' + path}). success(function(data, status, headers, config) { ...

What could be causing the queuing of multiple Ajax requests in ExtJS?

I am encountering an issue with my grid setup. I have a menu on the left side for each item on the grid, and this menu's items change based on the selection in the grid. When the event selection is triggered, an Ajax.request function is called to hand ...

Acquiring an alternative data structure in JavaScript or JSON

When clicking on a div with different attributes, I am attempting to retrieve a data object. Here is an example: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> var locA = { "fro ...

What could be causing the never-ending page reloads on a PWA Vue application?

I'm currently working on turning my Vue app into a PWA using the Vite-PWA-plugin (this plugin) However, I've encountered an issue where the page keeps reloading repeatedly when served from cache, especially when utilizing the Oauth2 protocol for ...

Exploring the process of integrating pagination into vue.js

Currently, I am facing difficulties with implementing pagination in vue.js. I have written the necessary vue.js script and template for this functionality, but unfortunately, the pagination feature is not working as expected. Despite numerous attempts to ...

Comprehending the principles of Vue components and navigation paths

I have embarked on the journey of mastering the art of website development, utilizing a Vue frontend in conjunction with an Express REST backend. One of the new routes I created looks like this: /path/to/vue-client/routes/index.js import Vue from ' ...

A regular expression in JavaScript for matching unpredictable numbers without any specific words preceding them

For instance, I am looking to extract the numbers that do not have 'the', 'abc', or 'he' before them; the89 (no match) thisis90 (match 90) iknow89999 (match 89999) getthe984754 (no match) abc58934(no match ...

Is it possible to change text dynamically with an input box using JavaScript?

Is there a way to use JavaScript to create two input boxes for text replacement? Instead of constantly editing code to replace different text, I am looking for a simple user interface with Input Box A, Input Box B, and a button. The first input box will ...

Is the 404 page being utilized as a fallback for AJAX requests?

I am looking to create a one-page website that utilizes history.pushstate to modify the URL. My plan involves having only one HTML file for the site, which would be the 404 error page. This setup would redirect users to that page regardless of the URL they ...

Tips for maintaining blank lines while formatting .vue documents in VScode

I'm beginning to feel frustrated with the .vue framework because all of the VScode formatters I've tested are deleting empty lines. Everything else works smoothly, except for the fact that empty lines keep getting removed. All the effort I put ...

Continuously animate a series of CSS properties

Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...

What is the secret behind Redactor JS's ability to display properly indented code snippets?

If you take a look at the Redactor JS demo and click on the button to show the HTML source code of the displayed content... ...you will notice that the code is properly indented: Most rich text editors or wysiwyg editors typically display code in a singl ...

Exploring THREE.Points, navigating through JSON data, and looping through different materials

After exporting some JSON data from Blender using three.js' addon, I am trying to extract colors from the materials associated with the geometry and convert them to "point" material types. Even though my console logs display that my .forEach function ...

Tips for extracting elements from an HTML document using Angular

I seem to be facing a small issue - I am trying to develop a form using Angular. Below is my HTML: <form [formGroup]="requeteForm" (ngSubmit)="ajouter()" *ngIf=" tables!= null"> <div class="form-group&quo ...

Vue.js2 - Detection of Observer in Array

A question for beginners in vue.js. I am trying to display data using the CanvasJS Library that is received via websocket. Everything works fine with the data until I introduce vue components into the mix. Let me clarify: export default { data() { r ...

What is the best way to delay JavaScript execution until after React has finished rendering?

Perhaps this is not the exact question you were expecting, but it did catch your attention :) The issue at hand revolves around the fact that most of the translations in my text do not update when the global language changes. Specifically, the translation ...

How can I efficiently display three items per click when tapping into jQuery data?

Here is the code that I have been working on: jQuery(document).ready(function( $ ) { var $container = $('#homegrid').masonry({ isAnimated: true, itemSelector: '.home-blocks', columnWidth: '.grid-sizer ...

Nodejs asynchronous tasks are not functioning correctly with SetInterval

I'm a newcomer to the world of Node.js. I've set up a simple asynchronous task that needs to run every 10 minutes. The setInterval function should trigger at regular intervals as specified, updating the value for the variable api key. I can' ...

Separate each element with a time gap when using the .each() function in

Below is the code snippet that I have: $('.action-button').each(function(i, obj) { $(obj).trigger('click') }); I am looking to introduce a delay between each iteration of the loop, ideally a 5-second delay. Is it achievable through se ...

Unlocking the Potential of JavaScript Proxy: Clearing Out an Array Object

Examining the JavaScript Proxy code snippet below: const queue = new Proxy([], { get: (target, property) => { return target[property]; }, set: (target, property, value) => { target[property] = value; this._pro ...