0

I have a document dynamically generated with Odoo. I have n divs that inside can have input box with different type, checkbox, text, number etc etc.

For now when the user change one field i make an rpc call to backend and store the value of the changed view.

But this is a problem because the client server is very slow....and every write to db take a lot of time....and this is a checklist and it's not good.

Solution: Now i want let to user change all field that he want and after with a button "Update" make a write for all changed views.

Problem I'm not skilled with javascript and don't know how to implement this. For now i think to put all generated row inside a tag form and when the user click the button "Update" call with javascritp form_id.submit() and find a way to retrieve all different name of the input and store the values.

There is some better way to do that? Something like: if the user change one field instead of make a call to store new data, put all information into a dictionary, list, array or something else...and when the user press Update i read this structure and store all data inside.

EDIT dictionary of dictionaries:

dict= {
    id_line:{key:values, key:values}
    id_line:{key:values, key:values}
    ...
    }
Dan Zuzevich
  • 3,651
  • 3
  • 26
  • 39
Dario
  • 732
  • 7
  • 30
  • wrap all inputs in a form and send the data with a button submit without javascript [check here](https://www.w3schools.com/html/html_forms.asp). Now, i don't know how is your backend structure, but you need to handle an entire form – Margon Jun 21 '18 at 12:58
  • Yes is the best solution that i think ahaha. The problem is that i need to generate again all the id and the name of the views (they are added in dynamic way). With javascript i have everything done but instead of call a write backend i need to store the data that i use for the write method. For this reason i prefer javascript :D – Dario Jun 21 '18 at 13:17

1 Answers1

1

You could do something like the following, which will push your values into an array:

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 will create an empty array first, then query your form field for all of the input elements within it. Depending on the browser, this could return an iterable NodeList that supports the forEach method, or it could return a NodeList that does not have the forEach method available on its prototype.

For simplicity, lets just assume that the browser supports it. From here, all you need to do is determine what type of input field you are currently iterating through, and then create an object on the fly with its name and value and push it into the array you constructed earlier.

What should result is something like the following after iteration is complete:

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

If you have concerns about NodeList not supporting the forEach method, you can refer to this post for more information, and do some additional Google Searches on the subject.

P.S. The code here is an example, so obviously would want to make sure your switch statement covers all forms of inputs you are handling

Alternative solution: The poster also asked if you could store this data not in an array, but as an object with nested object entities. So here is the solution for that

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 should give you this type of result:

{
  someFieldName: {...},
  someFieldName2: {...},
  someFieldName3: {...}
}
Dan Zuzevich
  • 3,651
  • 3
  • 26
  • 39