Adding custom input fields and saving to database

Ask the community
,
1

Question:
I am trying to add 5 input fields and show the sum in a subtotal input field. I can get this first part to work. But, I’m struggling to get the calculated field to save to the database eventhough I have it connected.

Here is my code:
$w.onReady(function () {
$w(“#dataset1”).onAfterSave(sendFormData);
// Attach event handlers to the number input fields
$w(“#totalCost1, #totalCost2, #totalCost3, #totalCost4, #totalCost5”).onInput(() => {
// Call the sum function whenever any input value changes
calculateSum();
});
});

function calculateSum() {
// Get the values from the number input fields and convert them to numbers
const value1 = parseFloat($w(“#totalCost1”).value) || 0;
const value2 = parseFloat($w(“#totalCost2”).value) || 0;
const value3 = parseFloat($w(“#totalCost3”).value) || 0;
const value4 = parseFloat($w(“#totalCost4”).value) || 0;
const value5 = parseFloat($w(“#totalCost5”).value) || 0;

// Calculate the sum of the values
const sum = value1 + value2 + value3 + value4 + value5;

// Convert the sum to a string and display it in the sum input field
$w("#subTraining").value = sum.toString();

}

Product:
Velo code

What have you already tried:
If the subtotal field is a number data type, I get an error. If I change it to type text, nothing appears in the collection.

Thanks in advance,
Libby

2 
$w.onReady(()=> {let calculatedResult;

   $w(“#dataset1”).onReady(()=>{
  	$w(“#totalCost1, #totalCost2, #totalCost3, #totalCost4, #totalCost5”).onInput(() => {
      calculatedResult = calculateSum(); console.log('Calculated-Result: ', calculatedResult);
      $w("#subTraining").value = sum.toString();
    });  
  });
  
  
  
  $w(“#dataset1”).onAfterSave(()=>{
  
  });
  
  $w(“#dataset1”).onBeforeSave(()=>{
  
  });
  
});

function calculateSum() {console.log('CALCULATION RUNNING...');
  // Get the values from the number input fields and convert them to numbers
  const value1 = parseFloat($w(“#totalCost1”).value) || 0;
  const value2 = parseFloat($w(“#totalCost2”).value) || 0;
  const value3 = parseFloat($w(“#totalCost3”).value) || 0;
  const value4 = parseFloat($w(“#totalCost4”).value) || 0;
  const value5 = parseFloat($w(“#totalCost5”).value) || 0;
  // Calculate the sum of the values
  const sum = value1 + value2 + value3 + value4 + value5;
  return sum;  
}

And still some questions open…

  1. When do start the SUBMISSION ? (when is the data gona to be saved, at which point) ?
    a) When one of the INPUT-VALUES has been changed?
    b) When a SUBMISSION-BUTTON (which you have not mentioned yet) has been pressed?

  2. Why you are using → AfterSave() ??? Isn’t it already to late to start actions, after data has been already saved? → Maybe you wanted to use → onBeforeSave(), to CALCULATE before data gets saved and not afterwards?

  3. And do not forget, that the dataset has always to be ready first → before you can use it. That means all your actions, have to be inside…

DATASET.onReady-Block…

$w(“#dataset1”).onReady(()=>{
   ...
   ...
   ...
});

  1. Another question is, if you maybe want to save the data manually by code instead ?
    Instead of WHAT ??? → INSTEAD OF USING THE DATASET-AUTOMATIC SUBMISSION.

    Then you also could use → setFieldValues + save().

So as you can see, your thoughts about your own setup are → NOT-COMPLETE !!!

There are many possibilities to solve your issue.

To make it easier in the future… you simply add this systematic code first onto your page…

$w.onReady(()=> {let calculatedResult;

   $w(“#dataset1”).onReady(()=>{
      //...
   });  
  
   $w(“#dataset1”).onAfterSave(()=>{
      //...
   });
     //...
   $w(“#dataset1”).onBeforeSave(()=>{
     //...
   });
  
});

All you have to do now, is to decide where to put which actions.

  1. The CALCULATION-PROCESS has to be where? → before or after save() ?
  2. To let your inputs work correctly, where to add then in → to onReady, onBeforeSave, or to on AfterSave? → What do you think ?
  3. …continue…