How to display input box accoriding to value

Ask the community
,
1

I have 4 input Box #A #B #C #D

  1. First input Box(#A) is The value given by users ( values can be 1,2,3)

  2. if the first input box(#A) has 1 Then #B Should display and If it is 2 Then #C Should display Likewise
    How To Do it
    Help Me With code

2

You can use the functions hide() and show() on the #B, #C, and #D input fields, depending on the value entered in the #A input field.

3

It already used It But doest Seems To Be Working

$w . onReady ( function () {

if ( parseFloat ( $w ( ‘#A’ ). value )== 1 ){
$w ( ‘#B’ ). show ( ‘slideIn’ );
$w ( ‘#C’ ). hide ( ‘slideIn’ );
$w ( ‘#D’ ). hide ( ‘slideIn’ );}
if ( parseFloat ( $w ( ‘#A’ ). value )== 2 ){
$w ( ‘#B’ ). hide ( ‘slideIn’ );
$w ( ‘#C’ ). show ( ‘slideIn’ );
$w ( ‘#D’ ). hide ( ‘slideIn’ );}
if ( parseFloat ( $w ( ‘#vehicletype’ ). value )== 3 ){
$w ( ‘#B’ ). hide ( ‘slideIn’ );
$w ( ‘#C’ ). hide ( ‘slideIn’ );
$w ( ‘#D’ ). show ( ‘slideIn’ );}

});

it doesn’t Works

4

The onReady() function only runs when the page is ready. For more information about the page onReady() function, see the following:

You should use the onInput() function to get the user’s input. You can then put your code (hiding and showing the other input boxes) inside of that function, like this:

$w("#myElement").onInput( (event) => {
   let newValue = Number(event.target.value);
   if(newValue === 1) {
      $w('#B').show('slideIn');
      $w('#C').hide('slideIn');
      $w('#D').hide('slideIn');
   }
   if(newValue === 2) {
      $w('#B').hide('slideIn');        
      $w('#C').show('slideIn');
      $w('#D').hide('slideIn');
   }
   if(newValue === 3) {        
      $w('#B').hide('slideIn');        
      $w('#C').hide('slideIn');        
      $w('#D').show('slideIn');
   }
} );

To learn about programming with Velo, read the following articles that will help you start working with Velo:

  • About Velo by Wix - what Velo is and what features it has.

  • Getting Started with Velo by Wix - step-by-step tutorial on how to start using Velo.

  • Onboarding to Velo by Wix - introduction to Velo with short tutorials.

See these sites for information on programming in Javascript:

5

I Use onReady() because the value of user input is taken from the different page and I want the result to work when this page loads. so I am displaying the value from the dataset given by the user on another page. The value is already submitted by the user So I am displaying input box based on that submitted value.

that is the value of Input Box #A is getting from the dataset which user submitted on another page. Based On That retrieved Value we are displaying the Input Box #B,#C,#D
And still, This does not work

6

@sougandhr If the #A text box is connected to a dataset that’s connected to a collection containing the correct value, then you will need to put your code inside of a dataset onReady() which is inside of the page’s onReady(). The reason for this is that the dataset is not necessarily ready when the page is, and therefore, input box #A might not yet have the correct value.

$w.onReady(function(){
   $w("#dataset1").onReady( () => {
      console.log("The dataset is ready");
      // your hide/show code goes here
   } );
});

I believe that a better way to do this would be to use wix-storage. Pass the value from one page, using setItem(), to the other page that would retrieve the value getting getItem().

7

Still does nt works

Here input value 2 is (#A) And remaining 3 boxes are #B #C #D(15,8,10)

the value 2 is the value retrieved from dataset1 which is the value submitted by the user previously . The Customers can submit only 1 or 2 or 3 on the previous page of that box so we need to display the remaining #B, #C, #D according to that retrieved value. so we need to validate by the retrieved value from dataset not onInput values

$w . onReady ( function () {
$w ( “#dataset1” ). onReady ( () => {
console . log ( “The dataset is ready” );
let newValue = Number ( $w ( ‘#A’ ). value );
if ( newValue === 1 )
{
$w ( ‘#B’ ). show ( ‘slideIn’ );
$w ( ‘#C’ ). hide ( ‘slideIn’ );
$w ( ‘#D’ ). hide ( ‘slideIn’ );
}

if ( newValue === 2 ) {

        $w ( '#B' ). hide ( 'slideIn' ); 
        $w ( '#C' ). show ( 'slideIn' ); 
        $w ( '#D' ). hide ( 'slideIn' );

}

if ( newValue === 3 ) {

        $w ( '#B' ). hide ( 'slideIn' ); 
        $w ( '#C' ). hide ( 'slideIn' ); 
        $w ( '#D' ). show ( 'slideIn' );

}
});
});

The problem is here the input is taken from dataset/collection, The input Here is a Value that is already given by the user previously and we display it on another page by connection to collection/dataset

8

@sougandhr Try adding a console.log() after getting the value, like this:

let newValue = Number($w('#A').value);
console.log(newValue);

Do you see the correct value in the console?

9

Using a dataset is not the best way to do this as you can’t be sure that the current item of the dataset will remain the same from page to page.

A more reliable way to do this is to use wix-storage . Save the value on the first page using setItem() , and the on the second page, retrieve the value getting getItem() .

10

@yisrael-wix Ok Thankyou For You Help

11

@yisrael-wix

1374×327 13.6 KB

12

@sougandhr Did you try adding a console.log() after getting the value, like this:

let newValue = Number($w('#A').value);
console.log(newValue);

What value do you get?

13

@yisrael-wix No

14

Ok Then Can you pls suggest me a code to retrieve a value from dataset/field name and use or get that value for doing some operation on that retrieved value. This Will help me to convert in to my on code. For My Purpose wix storage is not usefull.

15

I just Want to use that retrieved value Right now the value is not getting.
For example, The retrieved value is 2 how can I add those two with another input box.