Linking a text input box to a form text field

Ask the community
,
1

Hi guys,

I’m looking to find a solution to my websites form design/function.

I have a form set up on a page. I have a text box on my home page with a button which is linked to the form page. What I want to achieve is when someone inputs details to the text box on the home page and presses submit, this data will show in the first text box of the form on the form page.

If someone navigates straight to the form page I want the form to be set up normally I.e, just show standard place holder text.

Hope this makes sense and any advice is much appreciate!

2

It’s possible to do with Velo if you’re ok with using that.

3

Hi Simen,

That wouldn’t be a problem

4

So, what you need to do is on the original site do

import {memory} from 'wix-storage';
import wixLocation from 'wix-location'; 

$w.onReady(function () {

    $w('#nameOfButton').onClick(()=>{
        memory.setItem("input", $w('#nameOfInputField').value)
        wixLocation.to("/url-slug-of-form-site");
    })
});

And on the site of the form do

import {memory} from 'wix-storage'

$w.onReady(function () {
    let input = memory.getItem("input");
    if(input){
        $w('#nameOfFormField').value = input
    }
});
5

@simen thanks so much. I’ll give it a try and let you know how it goes

6

Hi Simen,

I can’t seem to get that working. I’ve added the appropriate input fields into the code above. Do I need to change the ‘wix-storage’ details?

7

Did you set the # names for the input field, button and form field?

8

Yes I’ve done for them

9

Yes I’ve done for them

10

Can you post a screenshot of your code editor?

11

964×398 38.7 KB

964×398 45.3 KB

12

Ok, first remove the top onReady functions so only what I wrote is there. You only want one onReady function per site.

on Copy of Start Selling you don’t want #input15 (which I’m guessing is the input field where they write the message that will be forwarded), instead you want the name of the field where you want to put the transfered message.

13

Ok so I’ve removed the additional text. I’ve tried changing the input #'s but not having any luck.
The box where the customer starts typing and presses submit is input#15
The form field I want this answer to show in is input #4

Really appreciate your help!

889×322 25 KB

889×322 32.9 KB

14

On line 4 in Copy of Start Selling it should say

let input = memory.getItem("input")
15

That worked! Thanks very much for your help

16

Hey Simen,

Just one question following your help the other day. Is there a way the code can be programmed so that when the input search box is filled enter can be pressed to navigate to the ‘Start Selling’ page rather than having to press the submit button?

Many thanks

17

Add this within the onReady function

$w('#input15').onKeyPress((event)=>{
        if (event.key == "Enter") {
        memory.setItem("input", $w('#input15').value)
        wixLocation.to("/copy-of-start-selling");
    }
18

Hi Simen thanks for coming back to me again.
I’ve tried to add into the code but it doesn’t seem to want to play ball? I not sure if it makes any difference but I have a number of inputs and buttons now set up for the input box (a slideshow which rotates around different placeholder texts in the search box)

See full code below

$w . onReady ( function () {

( $w ( '#button4' )). onClick (()=>{ 
    memory . setItem ( "input" ,  $w ( '#input16' ). value ) 
    wixLocation . to ( "/copy-of-start-selling" ); 
})

});
$w . onReady ( function () {

( $w ( '#button5' )). onClick (()=>{ 
    memory . setItem ( "input" ,  $w ( '#input17' ). value ) 
    wixLocation . to ( "/copy-of-start-selling" ); 
})

});
$w . onReady ( function () {

( $w ( '#button3' )). onClick (()=>{ 
    memory . setItem ( "input" ,  $w ( '#input18' ). value ) 
    wixLocation . to ( "/copy-of-start-selling" ); 
})

});
$w . onReady ( function () {

( $w ( '#button6' )). onClick (()=>{ 
    memory . setItem ( "input" ,  $w ( '#input19' ). value ) 
    wixLocation . to ( "/copy-of-start-selling" ); 
})

});
$w . onReady ( function () {

( $w ( '#button7' )). onClick (()=>{ 
    memory . setItem ( "input" ,  $w ( '#input20' ). value ) 
    wixLocation . to ( "/copy-of-start-selling" ); 
})

})

19

Ok, let’s start by going back to only one onReady function

$w.onReady(function () { 
  
    ($w('#button4')).onClick(()=>{
        memory.setItem("input", $w('#input16').value)
        wixLocation.to("/copy-of-start-selling");
    })

    ($w('#button5')).onClick(()=>{
        memory.setItem("input", $w('#input17').value)
        wixLocation.to("/copy-of-start-selling");
    })



    ($w('#button3')).onClick(()=>{
        memory.setItem("input", $w('#input18').value)
        wixLocation.to("/copy-of-start-selling");
    })



    ($w('#button6')).onClick(()=>{
        memory.setItem("input", $w('#input19').value)
        wixLocation.to("/copy-of-start-selling");
    })


    ($w('#button7')).onClick(()=>{
        memory.setItem("input", $w('#input20').value)
        wixLocation.to("/copy-of-start-selling");
    })
})

I guess I’ll just go over what the onReady function does. Basically, once the website has loaded all the elements the onReady function kicks in, and runs all the code that’s within it. In this case it activates the onClick function which is run when the buttons are clicked.

Can you be a bit more specific about what’s not working? Are the buttons not working (sending you to the right page/saving the data)? Is the data handled wrong when you go to copy-of-start-selling?

20

So all the buttons and code are working as they should in the above code.

However when I add the new code (onKeypress event) it is not working. So when I press enter its not navigating to the start selling page