Text Input Fields for Page Navigation?

Ask the community
,
1

I’m trying to create an HTML game that uses text input fields to go to different pages, but it doesn’t seem that Wix has a solution for this (at least not on a basic level). I’d love a solution if it exists.

Here’s a more detailed example:
My page would load with an image of a locked safe that requires a code to open. Players would solve the puzzle to determine the code is “1234.” They type “1234” into the text input, press enter, and that would automatically take them to a new page that says “Congratulations, you opened the safe.” If they typed in the wrong answer, nothing happens, or better yet, the input field turns red or they receive an error message: “Incorrect code, try again.”

Any help would be greatly appreciated. I hope my explanation was clear, but please ask if you needed any clarification. Thanks in advance!

2
3

Thanks for the quick response! Would your method work if 1) there’s multiple pages within my website that require text input with different passwords? and 2) if I wanted one text input field to allow for multiple answers and therefore leading to separate pages?

4

I think it will work well :wink:

export function button4_click ( event ) {
let par1 = $w ( “#input1” ). value ;
let par 2 = $w ( “#input2” ). value ;
if (par 2 === par 1 ) {
$w( wixLocation.to(“http://www.**********.com”);
}
else {
$w ( console . log ( “Wrong password” ));
$w //Code to show “Wrong password”
}
}

This code compare two inputs, (Can also be database connected) Perfect to password protect dynamic sites.

You can also use other text elements in “#input” :slight_smile:

Repeat the code for each url you want to redirect to :wink:

5

Of course this is possible.

  1. place an input-box onto your page
  2. to avoid uneccessary page-jumping, place a Multi-State-Box onto your page, this will prevent long loading times because you do not load several pages anymore. Everything happens on the same page.

Now you have your inputbox in your page (not inside the MSB).

At least you will need a button to submit the entered CODE-COMBINATION.

And now you create your code on the mentioned page (after you have activate the DEV-MODE…

$w.onReady(()=>{
$w(‘#InputIDhere’).onChange(()=>{
let myValue=String(
$w(‘#yourInputIDhere’).value);
if(myValue=“1234”){
$w(#‘yourMSB_IDhere’).changeState(‘theRightMSBstateHere’)}

else{do something else…here…}
});
});

Sorry for bad formatted code, writing the answer from mobile → it’s a mess.

6

Hi and thanks for the help thus far. I’m still having trouble, but came across another discussion with the same problem and the solution worked for the user. The code was this:

#input1 - the input where the user types
#goButton - the button

import wixLocation from 'wix-location';//put this code (below code) under the $w.onReady() function$w('#goButton').onClick((event) => {if ($w('#input1').valid) {let toLocation = $w('#input1').value;
  wixLocation.to(`/${toLocation}`);}});

What I don’t understand is how I define my value and where do I enter it? Let’s say I want the user to type ‘1234’ and I want the location to go to a page named ‘Home’. Could you show me exactly where to enter this in the above code? To define a page in Wix, do I use the page name on the Side bar, or the url. So confusing! Thanks in advance