Hello,
What is the code to clear all fields in a certain Tab?
If I have two tabs, how can I clear data in Tab 1 and keep data in tab 2?
Thank you!
Dear @DryChips,
Well, normally you can just list all the fields and set their value as blank:
fd.field('Field1').value = '';
fd.field('Field2').value = '';
fd.field('Field3').value = '';Hi,
This is not what I'm after.
Here is the scenario:
Users will be prompted with a question at the beginning of the form and whatever they choose will show/hide a tab. In my case, I have two tabs, if they select a 'Yes' it will hide tab 1 and show tab 2 and if they answer 'No' it will hide the tab 1 and show tab 2.
The problem I have is, if the user answers 'Yes' and fills out the fields under Tab 1 but they realise, "Hey, I'm filling out the wrong form." They will go back to the initial questions and then change their response to 'No' and proceed to fill out the form as usual. The issue will arise if they don't clear all the fields under Tab 1 and then proceed to fill out the fields under Tab 2.
Upon submission, we will have incorrect information submitted which will result in rejecting the form.
In a nutshell, I want to clear all fields under a certain tab if they change their mind whilst filling out the form.
I'm sure its a simple piece of code that does the trick.
fd.tab1.clear or something like this....
Dear @DryChips,
There is no easy one line to clear a tab. How many fields are there? If the number of fields is not great, you can just list all the fields. Of course, if you have a hundred fields, it might be not the best approach.
An alternative would be to loop through all the fields on the form, check if they are located inside of the tab and clear them, that would still be multiple lines of code.
If you're interested, we might estimate how much time it will take for us to add an option to directly clear a tab as paid support.
1 Like
Yikes! That's not a problem. I will find an alternative solution.
Hi Nikita,
I wanted to ask, is it possible to run a "OnClick" event when I deselect a multiselect option?
If I deselect "Home Address" option because I change my mind for whatever reason, I want to hide all the fields, remove validation and clear fields. I have all the code for this but just curious to know if you can run "OnClick" events in a field instead of an "OnChange" event as this causes problems in my form.
Dear @DryChips,
There's no OnClick event, but you can have an if block inside change event to detect if Home Address is selected or not, specifically.
Hmmm, this problem is a bit of a conundrum.
The problem I'm having is if I deselect one of the options, say "Home Address" it clears all the fields in the code block. Its not smart enough to detect that "Personal Details" is still selected so it shouldn't clear the fields that appear under that tab.
Dear @DryChips,
Not sure what the issue is, this should work perfectly fine:
fd.spRendered(function () {
function showHideSomething(){
if(fd.field('Question2').value.indexOf('Home Address') >= 0){
fd.control('Text1').hidden = false;
}
else{
fd.control('Text1').hidden = true;
}
}
fd.field('Question2').$on('change',showHideSomething);
showHideSomething();
});
Here is the form:
How do you record this video? I'll see if I can send a video of problem
Dear @DryChips,
A video would certainly help. I've used ShareX, but there are many tools available for this.
Have you tried the code I've published in the last comment? You can slightly simplify your case to see if it works, and if it does - add all your previous code into the function.
Unfortunately, I can't provide a video due to IT blocking everything.
However, I have managed to find a workaround for my problem! Hopefully, it's a long-term solution.
1 Like
Hi Nikita,
I like the idea of looping through the tab container and clearing fields. Could you happen to share the code or kickstart me in the right direction? I have too many fields in my form and typing every field is going to be a really strenuous task.
I think it would be beneficial for not just me but for other developers to help clear fields.
Dear @Qman,
It will look like this:
// Check if `child` is a descendant of `parent`
const isDescendant = function (parent, child) {
let node = child.parentNode;
while (node) {
if (node === parent) {
return true;
}
// Traverse up to the parent
node = node.parentNode;
}
// Go up until the root but couldn't find the `parent`
return false;
};
//loop through all fields looking for descendats of specific tab
const fields = fd.fields();
for(var i = 0; i < fields.length; i++){
//change tab index in tabs[index] to change tab
if(isDescendant(fd.container('Tabs1').tabs[1].$el, fields[i].$el)){
fields[i].value = '';
}
}
1 Like
Woaaah thank you Nikita!
Do I need to list my fields anywhere or can I just use this code "out-of-the-box"
I've never worked with Loops so I'm not familiar with the syntax
Dear @Qman,
It can be used "out-of-the-box", it loops through all fields, you just need to make sure you use the right index for the tab (starting from 0) and use the correct name for the tab container in fd.container('Tabs1')
1 Like