Hi Upon submit form I want one user element (a checkbox) to update another field (number field) in the database

Ask the community
,
1

I am sure that it is something to do with let toInsert but I am clueless.

Many thanks
K

2

Try this:

  1. Name your checkbox element “checkbox”.

  2. Replace “myCollection” with your collection name.

  3. Create an onClick event handler for your submit button.

  4. Paste this code and see the submission in your database.

import wixData from 'wix-data';

export function submit_click(event) {
    let numberValue = 0;
    
    // This is the object that gets submitted
    // into your database.
    let toInsert = {
        "first_name":   "John",
        "last_name":    "Doe",
        "numberField": numberValue
    };

    if ($w("#checkbox").checked) {
        // This is where you assign the
        // numberValue if checkbox is checked.
        toInsert.numberField = 10;
    } else {
        // This is where you assign the
        // numberValue if checkbox is unchecked.
        toInsert.numberField = 5;
    }
    
    // Replace myCollection with collection name.
    wixData.insert("myCollection", toInsert)
        .then( (results) => {
             let item = results; //see item below
             console.log(item);
        } )
        .catch( (err) => {
             let errorMsg = err;
             console.log(err);
        } );
}
3

THanks Fakri

I think I am still doing something wrong. This is the code I have entered

export function submit_click(event) {
let numberValue = 20 ;

// This is the object that gets submitted
// into your database.
let toInsert = {
“entryFee2” : “” ,
“numberField” : numberValue
};

if ($w( “#checkboxPSA” ).checked) {
// This is where you assign the
// numberValue if checkbox is checked.
toInsert.numberField = 20 ;
} else {
// This is where you assign the
// numberValue if checkbox is unchecked.
toInsert.numberField = 30 ;
}

// Replace myCollection with collection name.
wixData.insert( “ExhibitionEntries2020” , toInsert)
.then((results) => {
let item = results; //see item below
console.log(item);
})
. catch ((err) => {
let errorMsg = err;
console.log(err);
});
}
//this is code to turn thxngs visible depending on which checkbox is ticked
//checkboxnonPSA is not linked to the database so the only checkboxPSA matters
export function checkboxPSA_onClick() {
if ($w( ‘#checkboxPSA’ ).onClick( ‘checked’ ) === true )
$w( “#checkboxPSA” ).show();
else
$w( ‘#checkboxPSA’ ).checked === false ;
$w( “#checkboxnonPSA” ).hide();

4

@secretaryozpastels
For your export function checkboxPSA, you can write this instead:

export function checkboxPSA_onClick() {
    if ($w("#checkboxPSA").checked) {
        $w("#checkboxPSA").show();
    } else {
        $w("#checkboxnonPSA").hide();
    }
}

What is the error the console.log is showing?
Share the screenshot if you can.
Also be sure to check your collection permissions. Set it to “anyone” for all four categories for testing purposes.
Also if nothing is showing up in the console.log then you might need to name the submit button as “submit” and set the onClick event handler in the properties panel.

5

@randomostrichdesigns Thanks but If I remove that then yes I get no error that true is not a function then my stuff afterwards doesnt work\ AArrgh it now seems very tempting to do my own lobotomy lol

$w.onReady( function () {
$w( “#checkboxPSA” ).show;
$w( ‘#checkboxnonPSA’ ).show;
console.log( “these checkboxes need to be here” )
$w( ‘#entryFee20’ ).hide();
$w( ‘#entryFee30’ ).hide();
console.log( “these elements need to be here” )

//this is the code for a PSA member
$w.onReady( function () {

    $w( '#checkboxPSA' ).checked ===  **true**  ((event) => {

if ($w( ‘#checkboxPSA’ ).onClick( ‘checked’ ) === true )
$w( “#entryFee20” ).show();
else
$w( ‘#checkboxPSA’ ).checked === false ;
$w( “#entryFee20” ).hide();
$w( ‘#checkboxnonPSA’ ).show();

    }) 
}); 

$w( '#checkboxPSA' ).onChange((event, $w) => {

if ($w( “#checkboxPSA” ).checked) {
$w( “#entryFee20” ).show();
$w( ‘#checkboxnonPSA’ ).hide()
console.log( ‘this works for hide nonPSA at the start’ )
} else {
$w( “#entryFee20” ).hide();
$w( ‘#checkboxnonPSA’ ).show()
}
console.log( ‘this 20 works’ )
});

$w( '#checkboxnonPSA' ).onChange((event, $w) => {

if ($w( “#checkboxnonPSA” ).checked) {
$w( ‘#entryFee30’ ).show();
$w( ‘#checkboxPSA’ ).hide()
console.log( ‘this works for hide nonPSA’ )
} else {
$w( ‘#entryFee30’ ).hide();
$w( ‘#checkboxPSA’ ).show()
}
console.log( ‘this 20 second section works’ )
});
});

6

@randomostrichdesigns

1726×872 47.8 KB

is this the screen shot you wanted?

K

7

Hi, @secretaryozpastels
in your code post i see you forgot some { }

$w.onReady(function () {
$w('#checkboxPSA').checked === true ((event) => {
if ($w('#checkboxPSA').onClick('checked') === true)                $w("#entryFee20").show();
else     // this shouldbe 
} else {     //this      
$w('#checkboxPSA').checked === false;            $w("#entryFee20").hide();            $w('#checkboxnonPSA').show();        })    });