HELP: Text input field value returns an empty string!

Ask the community
, ,
1

I am trying to save user input as an object, and save multiple objects in an array, but the $w(“#elementID”).value is returning as an empty string in JS, even though it’s not empty.

This is my code:

import wixData from 'wix-data';

$w.onReady(function () {

    let member = {
        fName: $w('#input2').value,
        email : $w('#input5').value,
    };
    let Members = [];
    Members.push(member);

    $w('#button3').onClick(() => {
        console.log(Members);
    })

    wixData.insert('JSTest', Member); // This returns an error, that it must be an object to save to database.
});

This is what I see when I console.log:

1366×255 33.4 KB

I’m quite new to velo and JS. Please, any help will be appreciated. I’ve been at this for 2 days.
Also, what is the Velo equivalent of :

document.querySelector('form').reset();

to enable a user input multiple entries using one form in a session.

Thank you.

1 Like
2

It’s not clear what you’re trying to do:
You’re using M ember and m ember interchangeably.
You don’t do anything with the Members array anywhere.

Anyway assuming you wish to save based on the user input, you should put the
let member and the insert line inside the onClick event handler.

3

@ Rejoice Anya
Your code is in $w . onReady () function.
It is executed once when the page loads. When the page loads, there are no values in the inputs. This is why the console output shows in empty array.
Try this:

import wixData from 'wix-data';
let Members = [];

$w.onReady(function () {
    $w('#firstNameInput').onChange(() => validateFieldsAndAddToArray())
    $w('#emailInput').onChange(() => validateFieldsAndAddToArray())
    $w('#button3').onClick(() => {console.log(Members);})
});

function validateFieldsAndAddToArray() {
    if ($w('#firstNameInput').valid && $w('#emailInput').valid) {
        let member = {
            fName: $w('#firstNameInput').value,
            email : $w('#emailInput').value,
        };
    Members.push(member);
    }
    wixData.insert('JSTest', Members);
}

Also see that JSTest collection accepts objects.

4

Thank you so much! You explained it so simply and it worked!