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?
Thank you Ido, this one worked just fine.
Much appreciated.
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 }