Input Value Redirect

Hi,

I have an input filed on my page, And I want when someone choose 1001 number for example in #input1 and press #button1 will be redirect to https://www.wix.com/ for example.

I am not good in coding. Can you tell me where is the problem here ?

import wixLocation from ‘wix-location’ ;
// …

export function button1_click ( event , $w ) {
if ( $w ( ‘#input1’ ) == = “1001” ) {
wixLocation . to ( “https://wix.com” );
}
}
}

Try this one…

import wixLocation from'wix-location';

let myValue

$w.onReady(()=>{
	$w('#input1').onChange(()=>{console.log("My value setted!")
		myValue=setTimeout(()=>{$w('#input1').value},100);
	});
	$w('#button1').onClick(()=>{console.log("Button-1 clicked!")
		wixLocation.to("https://wix.com");
	});
});

It works! Thanks. But what if I want more than one value?

Like 1001 number redirect to wix.com
And 1002 number redirect to wix.com/login

@madsteer Why not directly inputting the wished address into the INPUT-FIELD and be redirected to the wished site?

If you want to use your version thought, then you will need to use if-else-queries.

Or you create a DATABASE and connect your database to your function and control every values, right from there.

@russian-dima I need to create simple website that have input filed in the middle. When you type numbers from 1001-1999 for example. They redirect you to different sites or pages.

So… Is there any way to type maybe long code with every number and every site ( wixLocation . to ) or duplicate codes ?

Like I said. I am not good in coding. I have no idea how to use if-else-queries or create a database.

Hope you help me with this :blush:.

@madsteer
If i would be you, i would create a DATABASE.

How to do?

  1. Activate DEV-MODE (developer-mode) in your Wix-Editor.
  2. Open the following menu in your Wix-Editor.


3) Create a new DATABASE and give it a unique and plausibel NAME / ID.
4) Open the created DATABASE (You will see something like this…)

The database has 2-different modes —> PREVIEW & LIVE (live is when site is published.)

  1. Ok, now add 2x new DATA-FIELDS into your DB.

  2. Call them index & url (index = 1001 / url = https://www…))

  3. Add some values and fill your DATABASE (you can do it first in PREVIEW-MODE).

  4. When your DB is completely setted-up for some test-runnings, then you start to search for the right codes, which you will need to code the right functions (search & filter-functions).

  5. Ok, let’s see what could match our needs…

a) This looks very good…https://www.wix.com/velo/reference/wix-data/query

Let’s query our DB…

import wixData from 'wix-data';

let myValue  

$w.onReady(()=>{ 	
  $w('#input1').onChange(()=>{console.log("My value setted!") 		  
    myValue=setTimeout(()=>{$w('#input1').value},100);
  }); 
  	
  $w('#button1').onClick(()=>{console.log("Button-1 clicked!") 		  
    searchIndex(myValue) 	
  }); 
});

function searchIndex(VALUE){// VALUE = value from your inputfield.
  let DATAFIELD = "myDatafieldID" //<put in here the ID of your DATAFIELD (INDEX)
  wixData.query("myCollectionID") //<---- put in here the ID of your new DB !
  .eq(DATAFIELD, VALUE) //<---- This one is new and will do the filtering !
  .find()
  .then((results) => {
    let items = results.items
    if(items.length > 0) {
      let myURL = results.items[0].url; console.log(myURL)
      wixLocation.to(`${myURL}`);      
    } else {
      // handle case where no matching items found
    }
  })
 }

This function will seach your database for the right value of the inputted index.

You put in an index (“1001”) into the INPUTFIELD.
The function filter the DB for this value and gives you back the corresponding/related value back of URL-DB-FIELD (myURL).

That’s it.

Another way, would be to work with DATASETS, which perhaps could be a much easier way.

@russian-dima Hi, This looks amazing!

I created DB with 3 DATA-FILED ( Title , index ( Numbers ) , url ( URL ) )
I putted in title, 1 and 2, And in index, 1001 and 1002, And in url, first url and second url.

I copied DB query code. And I putted it in Home page code. I changed DB ID and DATAFILED ID.

Am I right ? What else ?

@madsteer Waiting till tomorrow, cause going to bed now :wink:.
But you are on the right track.

Your next steps…

  1. Test your new project in the PREVIEW of the editor (right handed corner).
  2. Taking a look onto the outputs in the console.
  3. Checking if you get ERRORS. Understanding the errors.
  4. Be carefully with DATA-TYPES.

a) STRINGS
b) NUMBERS
c) URLs (turning back to normal STRING?)

Do some testings by converting the DATA-TYPES (for example from STRING into NUMBER or vice-versa). Changing them in code-part…

let my STRING = String(1)
let myNumber = Number(“222”)

And always taking a look onto the OUTPUTS in the CONSOLE of the WIX-EDITOR or in the console of your prefered WEB-BROWSER (for example in goodgle-Chrome it would be F-12 + navigating to —> CONSOLE).

You can console-log everything—> console.log( myValueHere )
This ways to can analyse your own code and it’s behaviour!

Good luck! :wink:

Forgot to tell you! When you want to inspect your project in your browser, than you will have first to PUBLISH YOUR WEBSITE ! → then you will have the values also in your LIVE-DB.

And also do not forget to set DB-Permissions (while testings set them to the lowest security-level)!

If you want get more information about filtering and search-engines, take a look here…https://www.media-junkie.com/pflegeservice

And for more JS-learn-stuff here…
https://russian-dima.wixsite.com/meinewebsite

@russian-dima Hmmmm,

When I choose the number and press the button nothing happen.

No errors in Dev console . No errors in Chrome console.

Only ( My value setted! , Button-1 clicked! )

import wixData from 'wix-data';
import wixLocation from'wix-location';

let myValue  

$w.onReady(()=>{ 
  $w('#input1').onChange(()=>{console.log("My value setted!") 
    myValue=setTimeout(()=>{$w('#input1').value},100);
 }); 
 
  $w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
    searchIndex(myValue) 
 }); 
});

function searchIndex(VALUE){// VALUE = value from your inputfield.
 let DATAFIELD = "index" //<put in here the ID of your DATAFIELD (INDEX)
  wixData.query("SitesID") //<---- put in here the ID of your new DB !
 .eq(DATAFIELD, VALUE) //<---- This one is new and will do the filtering !
 .find()
 .then((results) => {
 let items = results.items
 if(items.length > 0) {
 let myURL = results.items[0].url; console.log(myURL)
      wixLocation.to(`${myURL}`); 
 } else {
 // handle case where no matching items found
 }
 })
 }

@madsteer
Show me a screenshot of your DB (or make an example-DB if data is secret).
Set at this part of code a ->log–>

.then((results)=>{console.log(results.items)
    let items = results.items......

-You checked your DB?(DB has values?)
-You test in on LIVE or PREVIEW? (DBs are synced?)
-If testing on LIVE, setted-up all needed DB-permissions?
-All entered IDs are right?
You can also create more console-checkpoints, like …

functionsearchIndex(VALUE){console.log("Searchfunction started.")

…or…

if(items.length >0){console.log("Length ok, data found.")

…or…

....}else{console.log("No data found.").......

…and so on.

Investigate and analyse your own code and than you will be able to get your code running.

Similar situation here…
https://www.wix.com/velo/forum/coding-with-velo/how-can-i-retrieve-a-value-from-database

@russian-dima

Hi,

I test it in LIVE.
How I sync DB ?
I guess the IDs are right check screenshots.

And after add all log commands you can see No data found.

How I can fix this ?

@madsteer Change this …

$w('#input1').onChange(()=>{console.log("My value setted!")      myValue=setTimeout(()=>{$w('#input1').value},100);});

to… (try again)

$w('#input1').onChange(()=>{console.log("My value setted!")          
    myValue = $w('#input1').value; console.log("My-Value: ", myValue)
});

I did a quick TEST-RUN with this code here and everything worked for me…

import wixData from 'wix-data';
//import wixLocation from'wix-location';

let myValue  

$w.onReady(()=>{ 
  $w('#input1').onChange(()=>{console.log("My value setted!") 
    myValue = $w('#input1').value
    console.log("My-Value: ", myValue)
 }); 
 
  $w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
    searchIndex(myValue) 
 }); 
});

function searchIndex(VALUE){// VALUE = value from your inputfield.
 let DATAFIELD = "index" //<put in here the ID of your DATAFIELD (INDEX)
  wixData.query("Team") //<---- put in here the ID of your new DB !
 .eq("vorname", VALUE) //<---- This one is new and will do the filtering !
 .find()
 .then((results) => {console.log(results)
 let items = results.items
 if(items.length > 0) {
 let myURL = results.items[0].url; console.log(myURL)
 //wixLocation.to(`${myURL}`); 
 } else {
 // handle case where no matching items found
 }
 })
 }

Check your settings and change my last suggested fix.

Pay also attention to → STRING or NUMBER?

In your case you are searching for —> NUMBER.

myValue = Number($w('#input1')).value

@russian-dima We’re close to solve it.

The URL was found!

But the button isn’t redirect me.

import wixData from 'wix-data';
import wixLocation from'wix-location';

let myValue  

$w.onReady(()=>{ 
 $w('#input1').onChange(()=>{console.log("My value setted!") 
    myValue = Number($w('#input1')).value; console.log("My-Value: ", myValue)
});
 
  $w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
    searchIndex(myValue) 
 }); 
});

function searchIndex(VALUE){console.log("Searchfunction started.")// VALUE = value from your inputfield.
 let DATAFIELD = "index" //<put in here the ID of your DATAFIELD (INDEX)
  wixData.query("SitesID") //<---- put in here the ID of your new DB !
 .eq(DATAFIELD, VALUE) //<---- This one is new and will do the filtering !
 .find()
 .then((results) => {console.log(results)
 let items = results.items
 if(items.length > 0) {
 let myURL = results.items[0].url; console.log(myURL)
 //wixLocation.to(`${myURL}`); 
 } else {
 // handle case where no matching items found
 }
 })
 }

BTW. Thanks for help I appreciate that! :heart:

Edit : The positive thing about my problem is that the whole website depends on redirecting so when you fix it you fixed everything! And you just have to work in design.

@madsteer If you take a closer look → your REDIRECTION is DEACTIVATES (commented-out). I did it, because i did not need it.

REACTIVATE the REDIRECTION-CODE-PART again.

You can test it with a simple hard coded URL…
wixLocation . to ( “https://wix.com” );

To feed the REDIRECTION with the right URL out of your DATABASE…
Ok, this one last step you will find by yourself, you now should be able to do it on your own…
console.log(results)
console.log(results.items)
console.log(results.items[0].url)
console.log(results.items[1].url)
…and so on…

Happy coding.:wink: And do not forget to like it if you really liked it.

@russian-dima

Where I should put it in ?


import wixData from 'wix-data';
import wixLocation from'wix-location';

let myValue  

$w.onReady(()=>{ 
 $w('#input1').onChange(()=>{console.log("My value setted!") 
    myValue = Number($w('#input1')).value;
});
 
  $w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
    searchIndex(myValue) 
    wixLocation.to("https://wix.com"); 

 }); 
});

function searchIndex(VALUE){console.log("Searchfunction started.")// VALUE = value from your inputfield.
 let DATAFIELD = "index" //<put in here the ID of your DATAFIELD (INDEX)
  wixData.query("SitesID") //<---- put in here the ID of your new DB !
 .eq(DATAFIELD, VALUE) //<---- This one is new and will do the filtering !
 .find()
 .then((results) => {console.log(results)
 let items = results.items
 if(items.length > 0) {
 let myURL = results.items[0].url; console.log(myURL)
 wixLocation.to(`${myURL}`); 
 } else {
 // handle case where no matching items found
 }
 })
 }

@madsteer This is the important part…
EXAMPLE:

.then((results) => {console.log(results)
   let items = results.items
   if(items.length > 0) {
      let myURL = "https://www.google.de/"
      wixLocation.to(myURL); 
  }
  else {...}
});

IN YOUR CASE:

.then((results) => {console.log(results)
   let items = results.items
   if(items.length > 0) {
      let myURL = results.items[0].url; console.log(myURL)
      wixLocation.to(myURL); 
  }
  else {...}
});

This is the wrong way…(but you also could do it like this, if you would use a return function) and await for the RESULT.

$w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
    searchIndex(myValue) 
    wixLocation.to("https://wix.com"); 
 }); 

@russian-dima

With this code.

When I choose any number. It redirect me to the same URL.

For Example : 1001 redirect to https://wix.com/1001 ,
1935 redirect to https://wix.com.1001.

import wixData from 'wix-data';
import wixLocation from'wix-location';

let myValue  

$w.onReady(()=>{ 
 $w('#input1').onChange(()=>{console.log("My value setted!") 
    myValue = Number($w('#input1')).value;
});
 
$w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
    searchIndex(myValue) 
    wixLocation.to("https://wix.com"); 

 }); 
});

function searchIndex(VALUE){console.log("Searchfunction started.")// VALUE = value from your inputfield.
 let DATAFIELD = "index" //<put in here the ID of your DATAFIELD (INDEX)
  wixData.query("SitesID") //<---- put in here the ID of your new DB !
 .eq(DATAFIELD, VALUE) //<---- This one is new and will do the filtering !
 .find()
 .then((results) => {console.log(results)
 let items = results.items
 if(items.length > 0) {
 let myURL = results.items[0].url; console.log(myURL)
 wixLocation.to(myURL); 
 } else {
 // handle case where no matching items found
 }
 })
 }

I think you did not have read my last post very carefully!
You still have this WRONG part here…

$w('#button1').onClick(()=>{
	console.log("Button-1 clicked!")searchIndex(myValue)      	
	wixLocation.to("https://wix.com"); 
});

What happens here???

-You click on button1.
-you make a console.log to tell that button-1 is cklicked to see it later in console.
-you start the function → “searchIndex()” —> with tehe value → “myValue”
-but you also start immediately the redirection ???

Your redirection should not start before you got the RESULT out of DB for URL.

Try this one…

import wixData from 'wix-data';
import wixLocation from'wix-location';

//------User-Interface---------
var DATABASE = "SitesID"  //<---- put in here the ID of your new DB !
var DATAFIELD = "index"   //<--put in here the ID of your DATAFIELD (INDEX)
//------User-Interface---------

var myValue  

$w.onReady(()=>{ 
   $w('#input1').onChange(()=>{
      myValue = Number($w('#input1')).value;
      console.log("My value "+ myValue +" setted!") 
   });
 
   $w('#button1').onClick(()=>{console.log("Button-1 clicked!") 
      searchIndex(myValue) 
   }); 
});

function searchIndex(VALUE){console.log("Searchfunction started.")
   wixData.query(DATABASE) 
  .eq(DATAFIELD, VALUE) 
  .find()
  .then((results) => {
     let items = results.items; console.log(items)
     if(items.length > 0) {console.log("Item found! Redirection starts in 3-secs.")
        let myURL = results.items[0].url; console.log("Item-URL: ", myURL)
        setTimeout(()=>{wixLocation.to(myURL);},3000);
     }else {console.log("No matching data found in DB."}
   })
}