Getting IDs of updated values

JavaScript
1

Take a look at this fiddle
Τhe user when clicking the edit button has the option of updating the values.
As you see each service name is accompanied with a price and the option to set if that price is visible or not.
In the database table all these are kept in a row and each row has an ID associated with it. You can see that ID as a value of a data attribute(data-service) in the service input field.

And here is the problem:
The user may choose to update the price in one case and the service name in another. The goal is that to gather the IDs and send them to the server.(and as I mentioned above the IDs are held as data attribute values only the service name)

And I am puzzled as to how to target the data-attributes given the fact that he might update the values in the other fields .It would be easy of course if the user changed only the service names.It is a matter of DOM traversing…

I have tried many things without achieving what I want though…

I hope I was clear…and thx for listening.

2

I’m still a bit unclear of what you are intending to do. It appears you are missing data-service from your price inputs as well. I would wrap both inputs in a container and place the data-service/ID for that row on the container instead.

What cases are those?

Are you saying updating them within a single query? You can submit multiples of inputs which share a name attribute value by making it an array such as name="value[]". It the comes down to looping over that data properly. The posted data will be submitted in separate arrays, but in order of occurrence. So your first submitted rows fields will be in name[0] and price[0], because the submitted inputs are all grouped by name attributes.

You could also try using ajax to target a PHP script file. Still unclear what the ‘cases’ are here.

If you do what I suggested earlier by making your ID or data-service available for both the name and price fields, you can just loop over each field changes under a single ID.

I’m not sure atm what you are intending, but this appears to be a misuse of data attributes imo. I don’t think they are meant for exposing database information, the use of an ID value on elements is appropriate, but you appear to be using duplicates of attributes such as data-value and data-name unnecessarily.

I would add your data-service as data-id on each of your div.wrapper_servp elements, as they contain all field information for each row. Change your name attributes on inputs to arrays by just adding brackets after the value. Then focus on your script that handles the posted data. You want to reconstruct a single rows fields in their own arrays, and then loop over that array applying the new data.

// POSTED DATA
const POST = {
  name: [ "hair", "manikour", "test"],
  price: ["55.00", "55.00", "55.00"]
};

let POSTED = [];
let fieldIteration = 0;
let rowIteration = 0;

for( let field in POST ){
  rowIteration = 0;
  for( let row of POST[field] ){
    if( typeof POSTED[rowIteration] === "undefined" || POSTED[rowIteration].__proto__.constructor.name !== "Array" ) POSTED[rowIteration] = [];
    POSTED[rowIteration][fieldIteration] = row;
    rowIteration++;
  }
  fieldIteration++;
}

/*
POSTED -> [
  [ "hair",  "55.00" ],
  [ "manikour", "55.00" ],
  [ "test", "55.00" ]
]
*/
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.