JavaScript data structures used to hold all modified input fields within a document

Question

JavaScript data structures used to hold all modified input fields within a document

I am currently working on a project where I have a dynamically generated document using Odoo. The document consists of multiple divs, each containing different types of input boxes such as checkboxes, text fields, and numbers.

Currently, every time a user makes changes to a field, an rpc call is made to the backend to store the new value in the database. However, this process is causing performance issues due to slow client-server communication and delays in writing to the database, especially for a checklist like this one.

Proposed Solution: My idea is to allow the user to make changes to multiple fields before saving them all with a single click of the "Update" button.

Current Challenge: I lack expertise in JavaScript and need guidance on how to implement this feature. One approach I am considering is wrapping all generated rows within a form tag and triggering form submission with form_id.submit() upon clicking the "Update" button. I also aim to find a way to extract and store values from different input fields while doing so.

Are there any more efficient methods to achieve this desired functionality? For instance, instead of immediately storing new data when a field is modified, could I gather information into a structured format (e.g., dictionary, list, or array) and only save it once the user initiates the update process?

EDIT - Proposed Data Structure:

dict = {
    id_line: {key: values, key: values},
    id_line: {key: values, key: values},
    ...
}

javascript odoo-10

Answer 1

Answer №1

To capture values and store them in an array, consider the code snippet below:

var dataToSend = [];
var inputFields = document.querySelectorAll('#myform input');
    inputFields.forEach(function(inputField) {
      switch (inputField.type) {
        case 'text':
        case 'number':
          dataToSend.push({ 
            inputName: inputField.name, value: inputField.value 
          });
          break;
        case 'checkbox':
          dataToSend.push({ 
            inputName: inputField.name, value: inputField.checked
          });
          break;
        default:
          break;
      }
    });

You start by initializing an empty array and selecting all input elements within a form. Based on the type of each input field, you construct an object with its name and value and push it into the array.

The final result after iteration should resemble this structure:

[
  { inputName: '...', value: '...' },
  { inputName: '...', value: '...' },
  { inputName: '...', value: '...' }
]

If there are concerns about NodeList compatibility with forEach method, investigate further using resources such as this post.

Note: Ensure the switch statement covers all possible input types to handle different scenarios effectively.

Alternative approach: In response to a query, storing the data as nested objects instead of an array is achievable with the following implementation:

var dataToSend = {};
var inputFields = document.querySelectorAll('#myform input');
    inputFields.forEach(function(inputField) {
      switch (inputField.type) {
        case 'text':
        case 'number':
          dataToSend[inputField.name] = { 
            inputName: inputField.name, 
            value: inputField.value
          };
          break;
        case 'checkbox':
          dataToSend[inputField.name] = { 
            inputName: inputField.name, 
            value: inputField.value
          };
          break;
        default:
          break;
      }
    });

This technique results in an object structure like this:

{
  someFieldName: {...},
  someFieldName2: {...},
  someFieldName3: {...}
}

Answer 2

To capture values and store them in an array, consider the code snippet below:

var dataToSend = [];
var inputFields = document.querySelectorAll('#myform input');
    inputFields.forEach(function(inputField) {
      switch (inputField.type) {
        case 'text':
        case 'number':
          dataToSend.push({ 
            inputName: inputField.name, value: inputField.value 
          });
          break;
        case 'checkbox':
          dataToSend.push({ 
            inputName: inputField.name, value: inputField.checked
          });
          break;
        default:
          break;
      }
    });

You start by initializing an empty array and selecting all input elements within a form. Based on the type of each input field, you construct an object with its name and value and push it into the array.

The final result after iteration should resemble this structure:

[
  { inputName: '...', value: '...' },
  { inputName: '...', value: '...' },
  { inputName: '...', value: '...' }
]

If there are concerns about NodeList compatibility with forEach method, investigate further using resources such as this post.

Note: Ensure the switch statement covers all possible input types to handle different scenarios effectively.

Alternative approach: In response to a query, storing the data as nested objects instead of an array is achievable with the following implementation:

var dataToSend = {};
var inputFields = document.querySelectorAll('#myform input');
    inputFields.forEach(function(inputField) {
      switch (inputField.type) {
        case 'text':
        case 'number':
          dataToSend[inputField.name] = { 
            inputName: inputField.name, 
            value: inputField.value
          };
          break;
        case 'checkbox':
          dataToSend[inputField.name] = { 
            inputName: inputField.name, 
            value: inputField.value
          };
          break;
        default:
          break;
      }
    });

This technique results in an object structure like this:

{
  someFieldName: {...},
  someFieldName2: {...},
  someFieldName3: {...}
}

JavaScript data structures used to hold all modified input fields within a document

Answer №1

Similar questions

Creating new form fields dynamically using JavaScript (triggered by onClick event)

Ways to showcase a div exclusively on UC mini browser

Tips on retrieving the value of a dynamically created control in ASP.NET c# prior to page loading

What is the best way to insert text into a span element within a for loop using JavaScript?

Unable to locate the index.js entry file in React Native

React-Select for Creating a Dynamic Multi-Category Dropdown Menu

Tracking ajax calls with piwik: A step-by-step guide

What is the best way to access and utilize variables passed in an app.post request within another app.post request using Node.js

Trouble with updating a variable within a loop in Cypress

Adjust the line spacing in CSS depending on the length of the text

Socket.io operates individually with each user

JavaScript interface for touch events

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

What methods can be used to incorporate animation when the display attribute transitions to none?

Enhance fullness to facial features

Typeahead in Angular is failing to function properly after using the $compile method

Maintaining the consistent structure of build directories within a Docker container is crucial, especially when compiling TypeScript code that excludes the test

Updating HTML Pages with Dynamic Content

Access an HTML file in Text Edit on a Mac directly from a web browser

Warning: Unhandled promise rejection - The type error occurred because the property 'close' of the object is undefined