In my onReady() function, I have disabled some text input fields on my form based on whether certain values are set in dataset. This works fine. However, when one of the other form fields is set, a dropdown or a radio button, the rest of the fields re-enable for some reason. I want them to remain disabled.
How do I do this?
1 Like
Hi Paul,
Please show how you are doing this.
Yisrael
I am having a similar issue Yisrael on my site: https://taylorje3000.wixsite.com/letterman-jackets. If I click the checkbox, the input fields that should hide do disappear. However, when I either try to submit without selecting a dropdown item or click on the dropdown menu, the other input fields are somehow re-enabled. I tried putting the disable code for the input fields in onReady, but that didn’t fix it. Please note that the input is linked to a dataset, and validation is performed on the input. The affected input fields are #bodyColorChoice, #secondColorChoice, #knitColorChoice, and #materialChoice. Here is my script:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady(function () {
//TODO: write your page related code here…
});
export function useSchoolDesign_change(event, $w) {
//Add your code for this event here:
let isChecked = $w(“#useSchoolDesign”).checked; // true
if (isChecked) {
$w(“#schoolDesignChoice”).show();
$w(“#schoolDesignChoice”).enable();
$w(“#school”).show();
$w(“#bodyColorChoice”).disable();
$w(“#secondColorChoice”).disable();
$w(“#knitColorChoice”).disable();
$w(“#materialChoice”).disable();
$w(“#schoolDesignChoice”).required = true;
$w(“#bodyColorChoice”).required = false;
$w(“#secondColorChoice”).required = false;
$w(“#knitColorChoice”).required = false;
$w(“#materialChoice”).required = false;
} else {
$w(“#schoolDesignChoice”).hide();
$w(“#schoolDesignChoice”).disable();
$w(“#school”).hide();
$w(“#bodyColorChoice”).enable();
$w(“#secondColorChoice”).enable();
$w(“#knitColorChoice”).enable();
$w(“#materialChoice”).enable();
$w(“#schoolDesignChoice”).required = false;
$w(“#bodyColorChoice”).required = true;
$w(“#secondColorChoice”).required = true;
$w(“#knitColorChoice”).required = true;
$w(“#materialChoice”).required = true;
}
}
export function schoolDesignChoice_change(event, $w) {
//Add your code for this event here:
$w(“#bodyColorChoice”).disable();
$w(“#secondColorChoice”).disable();
$w(“#knitColorChoice”).disable();
$w(“#materialChoice”).disable();
}
export function submitbutton_click(event, $w) {
//Add your code for this event here:
let isChecked = $w(“#useSchoolDesign”).checked; // true
if (isChecked) {
$w(“#bodyColorChoice”).required = false;
$w(“#secondColorChoice”).required = false;
$w(“#knitColorChoice”).required = false;
$w(“#materialChoice”).required = false;
$w(“#bodyColorChoice”).disable();
$w(“#secondColorChoice”).disable();
$w(“#knitColorChoice”).disable();
$w(“#materialChoice”).disable();
}
}
Hi Jeremy,
Do you still experience this issue?
If so, please specify the mode your dataset is configured to (either read, write or read/write)
Thx
1 Like
Hello Ido
I had a multistage form working just fine for months. Then without any changes to the site or code the input fields on slide 2 of the form are disabled. There’s been no change to the code or the site. The input fields on slide 1 and slide 3 work fine but slide 2 suddenly stopped working. Fields are disabled.
Have you encountered this problem or have any ideas?
Please help if you can
Thanks
Hi Bidfix,
Can you paste your editor url here?
Is there any fix to this issue?!? I do have the same problem on my side.
Depending on the user selection of a radioButtonGroup I enable or disable a specific field.
$w( “#radioGroup1” ).onChange((event) => {
const selectedOption = event.target.value;
console.log( "changed to option: " + selectedOption);
const options = $w( “#radioGroup1” ).options;
if (selectedOption == options[ 0 ].label) {
createUnique();
} else {
createDuplicate();
}
});
const createDuplicate = () => {
$w( “#vectorImage11” ).scrollTo();
$w( “#dropdown1” ).disable().then(() => {
console.log( "dropdown is enabled: " + $w( “#dropdown1” ).enabled);
$w( “#dropdown1” ).disable();
console.log( "dropdown is enabled: " + $w( “#dropdown1” ).enabled);
}). catch (() => {
console.log( “error while disabling dropdown” );
});
console.log( "radioButtons are enabled: " + $w( “#radioGroup2” ).enabled);
$w( “#radioGroup2” ).disable();
console.log( "radioButtons are enabled: " + $w( “#radioGroup2” ).enabled);
$w( “#input1” ).disable();
$w( “#text42” ).hide();
$w( “#text44” ).show();
$w( “#radioGroup2” ).required = false ;
$w( “#dropdown1” ).required = false ;
};
And this is the console output after changing the option in the radioButtonGroup on my side:
changed to option: create duplicate
radioButtons are enabled: true
radioButtons are enabled: false
dropdown is enabled: true
dropdown is enabled: false
The dropdown is sucessfully disabled on my side. But this only after disabling it twice! The radioButtonGroup should be disabled according to the console output, but on my published website the group is still clickable. After clicking on the radioButtonGroup the dropdown I set to disabled before is enabled again.
There is no difference between preview mode and published website.
My database is configured to write.
I really need a fix for it!! Please help me and tell me what I am doing wrong.
Thans in advance.