exporting text from input box to another input box on another page?

Ask the community
, ,
1

Hi,
i am trying to create a search bar for my store.
i have created a dynamic page with repeaters to show my product, i have made an input box and its set to filter the input to show a product, it works great.
however i have now created another input box on my header as a search bar with a button to hit search.
i want the input from the header to be sent to the page where my repeaters are and into the input box and for this page to open when i hit the search button on my header.
Is this possible?
i need code from one input box to another on another page and also for that new page to load to show results,
Thank you

2

Hello Matt,

Yes this is possible using wix’s storage API. On button click (‘Search’), create an item in local storage with the value of the input fields value. Then, redirect as normal to the other page. In the other page, inside its on page ready function, get the item in local storage and set the input fields value that is on that page to the local storage value you stored previously.

Here is how it would look:

 //Page 1
 import {local} from 'wix-storage'; 

$w('#searchButton).onClick(() => {
   const searchTerm = $w('#searchField').value
   local.setItem("searchTerm", searchTerm); 
})

Here is more on local storage.

//Page 2
import {local} from 'wix-storage'; 

//Inside page ready code
$w('#searchField2).value = local.getItem("searchTerm");

Hope this helps,
Majd

3

Hi Majd,
Thanks so much for your reply, I have entered the code and has no errors however I think its to do with my searching code. I copied a wix code video to add search filter to dynamic page and show results in repeater. It does it on keypress though.
How would I change this just to search the ‘product’ database and show results in repeater once the ‘enter’ key or ‘searchbutton’ is pressed?

Below is the code I have put on my ‘site’ for the exporting of text in my input box on my header,
I have another code on here so that a button I press takes shoppers to previous page from the cart.

import {local} from ‘wix-storage’;

$w(‘#searchButton’).onClick(() => {
const searchTerm = $w(‘#searchField’).value
local.setItem(“searchTerm”, searchTerm);
})

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixLocation from ‘wix-location’;
import { local, session } from ‘wix-storage’;

let previousUrl = session.getItem(‘previousUrl’);
session.setItem(‘previousUrl’, wixLocation.url);

export function getPreviousPageLink() {
if (previousUrl === session.getItem(‘previousUrl’)) {
wixLocation.to(‘/’)
} else {
wixLocation.to(previousUrl);
}
}

export function continueShopping_click(event) {
getPreviousPageLink();
return false ;
}

and below is the code on the dynamic page for getting the data from the input box on the header;

import wixWindow from ‘wix-window’;
import {local} from ‘wix-storage’;

$w.onReady( function () {
$w(‘#iTitle’).value = local.getItem(“searchTerm”);

$w(“#columnStrip5”).show();
$w(“#hoverBox1”).show()

}
) ;

import wixData from ‘wix-data’;

let debounceTimer;
export function iTitle_keyPress(event,$w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);
}
let lastFilterTitle;
function filter(title){
if (lastFilterTitle !==title){
$w(‘#dynamicDataset’).setFilter(wixData.filter().contains(‘name’,title));
lastFilterTitle = title;
}
}

Any Help would be greatly appreciated.
Thanks
Matt

4

Hi again,
i have sorted it all out. I can now enter text in the search bar on the header and press the search button and it opens another page displaying all my products and puts the text from the bar in the header into the search bar on the page.
i now need it to have already loaded the results when it loads. right Now when the page loads the text is in the input box but I have to press the search button on that page too for it to perform the search.

Can i I use code so that when I press the search button on the header that it also presses the button on the other page, so that when it loads I don’t have to press search button again on the new page?

then I am going to cover the search bar on the new page with a text box saying search results. its my idea of cheating so that the search can only be performed by the header.

i would also like for when I press ‘enter‘ on The keyboard that it does the same task as the ’clicking’ the search button.

Is this possible?

Thanks
matt

5

Hi matt I was wondering if you could please help me. I have a dropdown on my homepage (dropdown1) and I would like my users top select a service from the drop down list. Under the dropdown I have a button that says “find a pro”. I would like them to click that button (button8) after they make their selection. I would like button8 to then take them to a different page which has a mulitpage form a created using a slideshow. I need to find out how I can get the service selection from dropdown1 on the homepage to automatically go into a user input field on my multipage form/slideshow. I need this to happen because I need the service selection from dropdown1 to be added to the same row in my data collection as the rest of the form. I created a user input text box (textBox5) as the first item on my multipage form hoping I could get the service selection from dropdown1 to go to it but I am having a very hard time figuring this out. I tried to use the code you used but I am getting errors. Could you tell me how you finally did this? I would really appreciate the help.

Thanks,
Bethany