Saving custom value along with Form Data

Ask the community
, ,
1

I’m trying to set up a registration page with information showing users how much amount they will have based on their selection. I have used Wix forms to set up the registration page and added a text element to show the total.

Code for total calculation.

export function calculateTotal(event) {
    let ad = (Number($w('#input11').value) ? Number($w('#input11').value) : 0) * 35;
    let te = (Number($w('#input12').value) ? Number($w('#input12').value) : 0) * 25;
    let ki = (Number($w('#input13').value) ? Number($w('#input13').value) : 0) * 15;
    let to = (Number($w('#input14').value) ? Number($w('#input14').value) : 0) * 10;

    let total = ad + te + ki + to;
    $w('#totalText').text = '$' + String(total);
}

The calculateTotal function is triggered on change event of each input field. What I want is to save the total amount along with the formData. I tried connecting the text element to dataset but the total value is not saving to the submission table.

$w('#dataset1').setFieldValue('total', amount);
$w('#dataset1').save;

The above codes adds the total amount to as a new row as expected. How can I save the data so that the total value save along with the form data?

2

Hi Avinash,

Is your button still linked to the dataset?
Ifso, disconnect it from the dataset.
Only run the code:

$w ( ‘#dataset1’ ). setFieldValue ( ‘total’ , amount );
$w ( ‘#dataset1’ ). save ;

If your button is still connected to the dataset then it will first save and the do the code and save again.

Connecting elements to the dataset is the same as the setFieldValue.
so dataset.save() will also save the other connected elements.

btw, don’t forget the () on your .save
.save is a function and a function always uses ()

If you need any more help,
Feel free to ask.

Kind regards,
Kristof

3

Ok understood. So do I have to create a custom button or can I use the one that comes with the form. Right now after registration I have a redirect to a different page. Can you tell me how to do that?

Note: I just started using wix a week back and wix code today

4

@avinashvraj
I don’t know if it works with a form button,
I think yous hould be able to disconnect it (if you klik on the button you will se an icon in green that shows its connected, turn that off if possible)
to redirect
add this line to the top of the page code:

import wixLocation from ‘wix-location’ ;

and u can then do wixLocation . to ( “/yourPage” )
Add this code in the onready of your page:

$w ( “#dataset1” ). onAfterSave (()=>{
wixLocation . to ( “/yourPage” )
})
after it is saved it will redirect to that page.

5

@volkaertskristof

Ok so this is how my code looks now. The button that comes with form is not linked to dataset. I created a custom button and added submit() to onclick event. But the form data is not saving now and the redirect also didn’t work. Am I doing something wrong?

import wixLocation from 'wix-location';
$w.onReady(function () {
    $w("#dataset1").onAfterSave(() => {
        wixLocation.to("/register")
    })
});

export function calculateTotal(event) {
    let ad = (Number($w('#input11').value) ? Number($w('#input11').value) : 0) * 35;
    let te = (Number($w('#input12').value) ? Number($w('#input12').value) : 0) * 25;
    let ki = (Number($w('#input13').value) ? Number($w('#input13').value) : 0) * 15;
    let to = (Number($w('#input14').value) ? Number($w('#input14').value) : 0) * 10;

    let total = ad + te + ki + to;
    $w('#totalText').text = '$' + String(total);
    $w('#dataset1').setFieldValue('total', total);
}

export function Submit(event) {
    $w('#dataset1').save();
}
6

I see the problem…
I never used forms before so wasn’t realy familiar with how it worked.
Seems like when adding a form it doesn’t add a dataset to the page so you added the dataset yourself?
Instead of using a form,
use elements and link it to a dataset.
then use the code to save.
so in short:

add the needed elements to your page.
Link them to the dataset.
do $w(“#dataset1”).setFieldValue(‘total’,total);
then save
be sure the dataset is write only.

Kind regards,
kristof.