Updatable form empty fields

Discussion Ask a question
,
1

I have create an updatable form that users can submit the first time they access it, or amend it in subsequent visits.

The form is completely managed via Wix Code as I could not make it updatable with the standard form properties in the Editor.

Everything is working perfectly, except that I can’t figure out how to stop the Submit button to submit when one field is left empty.

This is the code behind the form.

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(()=> {
 if(wixUsers.currentUser.loggedIn){
        wixData.query("PreWorkSet1")
        .eq('_owner', wixUsers.currentUser.id)
        .find()
        .then((results)=>{
 let items=results.items;
            $w('#textBoxQ11').value=items[0].q11;
            $w('#textBoxQ12').value=items[0].q12;
            $w('#textBoxQ13').value=items[0].q13;
            $w('#inputQ21').value=items[0].q21;
            $w('#inputQ22').value=items[0].q22;
            $w('#inputQ23').value=items[0].q23;
            $w('#textBoxQ24').value=items[0].q24;
            $w('#textBoxQ32').value=items[0].q32;
            $w('#textBoxQ41').value=items[0].q41;
            $w('#dropdownQ31').placeholder=items[0].q31;
 const q21 = items[0].q21;
 const q22 = items[0].q22;
 const q23 = items[0].q23;
            $w("#dropdownQ31").options = [
            {"label": q21, "value": q21},
            {"label": q22, "value": q22},
            {"label": q23, "value": q23}
            ];
        })
    }
})

export function textBoxQ11_change(event) {
 if ($w('#textBoxQ11').value === undefined) {
        $w('#button1').disable();
        $w('#textErr').show();
    } else {
 
    }
}

export function inputQ21_change(event) {
    $w("#dropdownQ31").options = [
        {"label": $w('#inputQ21').value, "value": $w('#inputQ21').value},
        {"label": $w('#inputQ22').value, "value": $w('#inputQ22').value},
        {"label": $w('#inputQ23').value, "value": $w('#inputQ23').value},
    ];
 /*if ((($w('#textBoxQ11').value)=== null) || (($w('#textBoxQ12').value) === null)) {
        $w('#button1').disable();
        $w('#textErr').show();
    }
    else {
        $w('#button1').enable();
        $w('#textSuc').show();
    }*/
}

export function inputQ22_change(event) {
    $w("#dropdownQ31").options = [
        {"label": $w('#inputQ21').value, "value": $w('#inputQ21').value},
        {"label": $w('#inputQ22').value, "value": $w('#inputQ22').value},
        {"label": $w('#inputQ23').value, "value": $w('#inputQ23').value},
    ];
}

export function inputQ23_change(event) {
    $w("#dropdownQ31").options = [
        {"label": $w('#inputQ21').value, "value": $w('#inputQ21').value},
        {"label": $w('#inputQ22').value, "value": $w('#inputQ22').value},
        {"label": $w('#inputQ23').value, "value": $w('#inputQ23').value},
    ];
}

export function button1_click() {
 let userId = wixUsers.currentUser.id;
    wixData.query("PreWorkSet1")
    .eq("_owner", userId)
    .find()
    .then((results) => {
 let items = results.items[0];
 if (results.items.length === 0){
 let toInsertQOnes = {
 "q11": $w('#textBoxQ11').value,
 "q12": $w('#textBoxQ12').value,
 "q13": $w('#textBoxQ13').value,
 "q21": $w('#inputQ21').value,
 "q22": $w('#inputQ22').value,
 "q23": $w('#inputQ23').value,
 "q24": $w('#textBoxQ24').value,
 "q31": $w('#dropdownQ31').value,
 "q32": $w('#textBoxQ32').value,
 "q41": $w('#textBoxQ41').value
            };
            wixData.insert("PreWorkSet1",toInsertQOnes)
            .then((results2) => {
 let items2 = results2;
                wixLocation.to("/pw1-summary");
 
            })
            .catch((err) => {
 let errorMsg=err;
 
            })
        }
 else {
 let currentItemId = items._id;
 let toUpdateQOnes = {
 "_id": currentItemId,
 "q11": $w('#textBoxQ11').value,
 "q12": $w('#textBoxQ12').value,
 "q13": $w('#textBoxQ13').value,
 "q21": $w('#inputQ21').value,
 "q22": $w('#inputQ22').value,
 "q23": $w('#inputQ23').value,
 "q24": $w('#textBoxQ24').value,
 "q31": $w('#dropdownQ31').value,
 "q32": $w('#textBoxQ32').value,
 "q41": $w('#textBoxQ41').value
            };
            wixData.update("PreWorkSet1", toUpdateQOnes)
            .then((results3) => {
 let items3 = results3;
                wixLocation.to("/pw1-summary");
            })
            .catch(((err)=> {
 let errorMsg=err;
            }))
        }
    }) 
}

On the Editor I marked all fields as ‘Required’ under their individual Settings box. But this makes no difference.

I used several versions of this code:

if ($w('#textBoxQ11').value === undefined) {
        $w('#button1').disable();
        $w('#textErr').show();
    } else {
 
    }

within onChange() functions for the named field. Under the onClick() function for the button. I tried changing the word ‘undefined’ to ‘null’ and to ’ “” '.

I tried changing the word ‘disabled’ to ‘hide’ or ‘collapse’, but nothing seems to work. The Submit button always submits.

When I console.log the field q11, which is the only one I left empty using the code

console.log("Q11 FIELD VALUE" + $w('#textBoxQ11').value)

The log shows, “Q11 FIELD VALUE” and nothing next to it

When I console.log the field value length using code

console.log("Q11 FIELD VALUE LENGTH" + " " + $w('#textBoxQ11').value.length)

The log shows, “Q11 FIELD VALUE LENGTH 0”

Any suggestions please?

2

Hi,

Create a validation function that will iterate the ‘required’ input fields and if one of them is empty - trigger a notification. Otherwise, it should go ahead and submit the data.

for example:

const inputList = ["adults", "kids"]

export function button1_click(event) {
 let isValid = true;
    inputList.forEach((input) => {
 if ($w("#" + input).required && ($w("#" + input).value) == "") { 
         isValid = false;
       }
    })
    isValid // should contain true if form is valid, false otherwise
}
3

Thank you Ido, this one worked just fine.
Much appreciated.

1 Like