How to display an input box by checking the dataset field value

Ask the community
, ,
1

eg; if the field value is 2 then input box ‘#A’ should display if it is 2 then ‘#B’ likewise how to code it using the value stored in dataset

2

Hi @sougandhr ,

You need to wait for the page and the dataset to be ready, then get the current item that’s being displayed by the dataset, check the value and show the relevant input field.

For example, we have dataset that stores members’ details, and we want them to be able to add their info only once, meaning that we want to check if their name is saved, and if it isn’t, show the input field for storing the name.

$w.onReady(() => {
    $w('#dataset').onReady(() => {
        const item = $w('#dataset').getCurrentItem();
        
        if (!item.name) { $w('#name').show() }
        if (!item.email) { $w('#email').show() }
    })
})

And if only one field is meant to be displayed at a given time, you can do it like this - assuming that the field type if number.

if (item.fieldId === 2) { $w('#inputBoxA').show() }

Where item is the current item being dispalyed by the dynamic dataset.

However, there’s a better way than having multiple input fields on the page and show the right one, it’s done by having only a single input field that works as a master field, and controlled by the code, for example, you have something like a quiz that have 4 options per question, it’s not practical to have an input field for each and every one of them, so we make the input field work for watever option we select.

Here’s a quick example;

const input = $w('#masterInput');
input.label = 'Please select an answer first';

// By default, the input field is disabled, and have a default label

/// This is constant to store the options' data
const options = [
    {
        id: '#option1',
        type: 'Constructions'
    },
    {
        id: '#option2',
        type: 'IT'
    }
]

// A variable to store the selected answer
let selected_option;

// Prepare the events
options.forEach(option => {
    $w(option.id).onClick(() => {
        $w(option.id).label = `Type in an answer for ${option.type}`;
        selected_option = option.type;
    })
})

/* When submitting the form, use the selected option to bound the collected
value with the right data it was collected for */

Hope this helps~!
Ahmad

3

Thankyou For your answer

4

@ahmadnasriya Thankyou So much Your Code works.Thankyou for Giving Your Time

5

@sougandhr Glad that it did :blush: