User input form - unique codes redirect to different pages

Ask the community
,
1

Hi all

I am new to Wix and was hoping I could get some help with coding my page correctly.

I have a user input box called “#input1” and a button called “#button1”.

720×396 32.9 KB

Each of my users will have a unique five digit code. These codes will lead to either one of two pages - “/page-A” or “/page-B” on my website. If the wrong code is entered, I want the code to lead to “/page-fail”.

How can I make my code such that depending on what code is entered, the button redirects to the correct page?

For example - assume the codes should go to the following page:

11111 - PAGE-A (i.e. mywebsite.com is available for purchase - Sedo.com)
22222 - PAGE-A
33333 - PAGE-B
44444 - PAGE-A
55555 - PAGE-B
66666 - PAGE-B
77777 - PAGE-B
88888 - PAGE-A
99999 - PAGE-B
[Other] - PAGE-FAIL

I’ve started making my code below based on everything i’ve seen on the site - but this is missing a few elements:

A) When you type in the code in the box and press enter - nothing happens. I’m not quite sure how to achieve this.

B) More importantly, when I click the button, nothing happens.

C) I haven’t been able to add multiple codes (I think I will have about 150!) - not sure if this is the easiest way to do it?

Can anyone help? I’ve tried looking through the forum and the API help but am getting lost.

// For full API documentation, including code examples, visit https://wix.to/94BuAAs

import wixLocation from 'wix-location';
// ...
export function button1_click(event, $w) {
 if ($w('#input1') === '11111') {
         wixLocation.to("/page-a")
             } else {
                     //wixLocation.to("/page-fail")
                         }
                         }
1 Like
2

A) You need a keyPress event: https://www.wix.com/corvid/reference/$w.KeyboardEvent.html
B) Did you set this event on the element property? In addition to the code.
C) You can use “AND” with “IF” (Operator &&)

3

Hi - thanks so much for the response.

I’ve tried to follow that page and use AND functions to get multiple codes in but I still can’t get it to work. Is there something wrong with the code above? Or, if it’s not too much trouble, could you share the code that i should be using?

Thank you in advance!

4

You need to add the event handler function through the properties panel for the element as shown here.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
https://support.wix.com/en/article/how-to-change-the-text-label-of-a-button-with-events

For a onKeypress event handler function, you would need to put the onKeyPress event handler on the text box and change your code to suit.

export function input1_onKeyPress(event, $w) {

You can write something similar to this below for onKeyPress

$w.onReady(function () {

$w("#input1").onKeyPress((event, $w) => {
if (event.key === "Enter") {
// rest of code //

With this option the KeyPress event handler is written into the code itself already, so you don’t need to add it again through the properties panel for that input element.

Or, you keep it as it is and make sure that your button has the onClick event function handler added to it through the properties panel for it.

You also need to have an onReady page function on your page too underneath your imports, so that the page loads up first before any of your code runs itself.

Plus, if you use onKeyPress, you may want to look at giving the user input a little bit of extra time so that it doesn’t miss out the last letter of the users input, with the setTimeout code.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time

5

Have a look at the replies from Massa (Wix Mod) in this previous forum post as it is very similar to what you are actually needing to do.
https://www.wix.com/corvid/forum/community-discussion/concatenating-text-input-with-link

6

Hi - thanks for the above.

I’ve updated my code - but it’s still not working. Are you able to take a look and let me know where i’m going wrong?

 
import wixLocation from 'wix-location'

export function input1_keyPress(event, $w) {
$w.onReady(function (button1_click(event, $w)) {
$w("#input1").onKeyPress((event, $w) => {
if (event.key === "Enter") {
}}}}

export function button1_click(event, $w) {
 if ($w('#input1') === '11111') {
    wixLocation.to("/page-a")
    
 OR 
 
 if ($w('#input1') === '22222') {
    wixLocation.to("/page-a")
    
 OR
 
 or ($w('#input1') === '33333') {
    wixLocation.to("/page-b")
 
          } else {
                //wixLocation.to("/page-fail")
                               }
                               }
 }
7

I think the “Or” isn’t working properly. But it’s odd neither the enter button or button works. I think there’s something that’s stopping it working at all. Any ideas?

8

Try using if/else or else if instead.
https://www.wix.com/corvid/forum/community-discussion/slow-multiple-if-else-run
https://www.wix.com/corvid/forum/community-discussion/using-if-else-to-define-which-elements-are-displayed
https://support.totallycodable.com/en/article/wix-code-example-of-an-if-statement-if-this-then-that

9

Hi - thanks again for the response!

I’m really sorry but i can’t seem to get the code working with either the ‘if-else’ or the ‘or’ functions.

Could someone please take a look at my code above and tell me where I am going wrong? I would really appreciate if someone could try to fix it.

Thank you so much

10

Sorry I meant help me try to fix it! Appreciate all of the help you’re giving!

11

Thanks both! i will play around and see where I get to. Thanks so much!!

Really appreciate the help.