wixdata.insert only creating blank entries

Hello all,
So I’m creating a custom form that uses code to capture a user’s inputs and put them into a database. The code all runs fine except when I go to check the database, all the custom fields are empty. Only the default fields like ID, Owner, etc. are filled in. Here’s the code:

let toInsert = {
   "firstName":                $w('#firstName').value,
   "lastName":                 $w('#lastName').value,
   "phoneNumber":              $w('#phoneNumber').value,
   "email":                    $w('#emailAddress').value,
   "schoolName":               $w('#schoolList').value,
   "dateOfBirth":              $w('#dateOfBirth').value,
   "status":                   $w('#status').value,
   "scienceProject":           sp,
   "highSchoolDebate":         hsd,
   "primarySchoolQuiz":        psq,
   "graphicCreativeArt":       gca,
   "category":                 "N/A",
   "abstractSubmitted":        false,
   "abstractReviewed":         false,
   "needsResubmission":        false,
   "resubSubmitted":           false,
   "resubReviewed":            false,
   "complete":                 false,
   "schoolCrest":              crest,
   "profilePic":           "https://static.wixstatic.com/media/aa2f46_331fd51268b34d55a5faac1d4d34f2c7~mv2.png"
   }
   console.log("Information gathered; adding information to the 2023_Registration database")
wixData.insert("2023_Registration", toInsert, options)
   .then( (results) => {
          let item = results; 
          console.log("Information added. User is now registered in the 2023_Registration database with the following details " + toInsert)
   })
   .catch( (err) => {
         let errorMsg = err
   })

Of course I use the import wixdata etc. at the start of the code.
Any help would be greatly appreciated.

Hi Dwayne!

Not sure what the full context is, but here’s what I think might be the issue – your toInsert values might be currently based on the values of each form field when the page LOADS, not when the form is submitted. For example, when they page loads initially (with blank form values), your toInsert variable is already being initialized – the problem is, at this point, the values are null.

I’m assuming your code will have a submit button. To resolve the issue, add an onClick event handler to your submit button, and then declare your toInsert values within that.

For example:

$w('#submitButton').onClick( () => {
    let toInsert = {...}
    wixData.insert(...)
})

Let me know if that works!

Thanks for the help.

I do have an onClick event handler tied to the submit button, I just didn’t post all the code because it’s a bit lengthy. I’m under a bit of a time crunch so I found a bit of a workaround for this issue.

Instead of setting the toInsert values to equal the element values directly, I created var for each piece of information that I wanted to add to the database. So instead of using this:

"firstName":    $w('#firstName').value,

in the toInsert section, I first created a variable like this:

var fn = $w('#firstName').value 

and used that in the toInsert section like this:

"firstName":   fn,

I’m not sure why but it seemed to fix my issue. I have zero experience in programming languages outside of creating this site, but I found a similar thread where someone mentioned something about the .values possibly not matching the field types for the database. The OP in that thread simply responded with something very vague and that was all.

I figured I’d make some changes along those lines and this ended up working.