Dropdown user input

Ask the community
,
1

I am a beginner, and need help. I have 2 dropdown user inputs (with values). How can I add these two inputs’ values into a total value inside a display box anywhere in the page. Any help will be greatly appreciated .

2

Hi,

-Add an onChange() event handler for each of the dropdown that runs when user input a new data.
-Save the data at global variables ($w(‘#dropdown1’).value)
-In order to know if the user input in both dropdown data, add a condition at each handler that check if there is a data at the other variable, if so, display them both.
-After displaying, inside the condition, empty the variables.

Here you can read more about an onChange() event.

Best of luck!
Sapir

3

I am terrible in writing code. Is the codes shown below is correct?

export function dropdown1_change(event)
{($w(‘#dropdown1’).value)
//Add your code for this event here:
}

export function dropdown2_change(event)
{($w(‘#dropdown2’).value)
//Add your code for this event here:
}

export function dropdown1_click(event)
{($w(‘#dropdown1’).value)
//Add your code for this event here:
}

export function dropdown2_click(event)
{($w(‘#dropdown2’).value)
//Add your code for this event here:
}

4

Hi,

You need function1 and 2, that activated while user input data.
At these functions insert your code (save at each one the value that was input in a new variable) and add a condition in one of them.
View the link I sent before, you can scroll down and see an example of code.

Best,
Sapir

5

My code knowledge is very limited. I most likely can follow if you could provide some example.

6

Hi,
If you wish to save the user’s choice from the items in the dropdown, use an onChange() event handler:

let saveDropdown1="";
let saveDropdown2= "";

export function dropdown1_change(event) {
    saveDropdown1  = $w('#dropdown1').value
}

export function dropdown2_change(event) { 
    saveDropdown2  = $w('#dropdown2').value
     if(saveDropdown1.trim()=== ""){ 
     //here take the two variables and display them in a text elements at       your box 
      saveDropdown1= "";
      saveDropdown2= "";
  
       }
}

If you wish to save the user’s input, use an onkeyPress() event handler

let saveDropdownUserInput1= "";
let saveDropdownUserInput2="";

export function input1_keyPress(event) {
    saveDropdownUserInput1  = $w('#dropdown1').value 
} 

export function input2_keyPress(event) {    
  saveDropdownUserInput2  = $w('#dropdown2').value  
   if(saveDropdownUserInput1.trim()=== ""){
     //here take the two variables and display them in a text elements at       your box     
    saveDropdownUserInput1="";
    saveDropdownUserInput2= "";
  }
 }

View this links, they will give you an information on how to code your functions:
Wix Code Tutorial: Adding Custom Interactivity with Events
onChange() event handler.
onKeyPress() event handler.
show() and hide() functions on elements- can be used at your display box.

Best of luck!
Sapir

7

I created a text element next to my 2 dropdown and label it’s ID as Total.
I have not idea how to display them in my text element.

//here take the two variables and display them in a text elements at       your box 
      saveDropdown1= "";
      saveDropdown2= "";
  
       }
}
8

Here is my code

let savedropdown1=“”;
let savedropdown2= “”;

export function dropdown1_change(event) {
savedropdown1=$w(‘#dropdown1’).value
}

export function dropdown2_change(event) {
savedropdown2 = $w(‘#dropdown2’).value
if (savedropdown1.trim()=== “”){

} 
}

Where are those two variables should go? I have a text box and it’s is ID text1, Which is the event I should choose: onViewportEnter:, onViewportLeave:, onMousein:, onClick: and onDblClick?

9

Hi,

Follow the code that I wrote you before and in the condition add the code line :

$wi(  "the id of the element" ).text= savedropdown1+ savedropdown2;

The variables you can just write at the page site beneath the onReady() function.

Best,
Sapir

10

Sorry to bother you again, there is an error when I input your code

$wi(  "the id of the element" ).text= savedropdown1+ savedropdown2;

the error is $wi

Like I said before, I have zero knowledge about coding,

I don’t understand what you meant “in the condition add the code line:”

And also your meaning of "The variables you can just write at the page site beneath the onReady() function

I can see onViewportEnter, onViewportLeave, onMousein, onClick, onDblClick,

But I can’t see the onReady() function.

11

This is my example page.

1604×848 45.7 KB

12

Hi,

The error is the i letter, I accidentally wrote that.
Second, in the condition means inside of the if’s body :


if (condition) {
   //  body
}

About functions, the onViewportEnter, onViewportLeave… are an export functions that you can add for each element that you add to your site, these functions are activated when a specified event is accord on the element.
For example onClick() function will be activated after clicking on the element.
Here you can read how to work with the element’s event.

onReady() function is presented in the code page of each page you add to your site, and it been used when you wish to add code that run before the user starts interacting with your page.
Here you can read about working with code panel.
Here you can read about onReady() function.

I suggest you first to read these articles about Wix Code Basics and watch some videos.

Second, I suggest you to read a little bit about code in JS it will help you understand better.

Best of luck!
Sapir