Get value of h1 of dynamic page and add it to a form

Hi,

I have a dynamic page where the title (h1) is generated based on the title of a hotel name. Then on the same dyanamic page, I have a form which users can submit. As I want to know from which page they submitted the form, I need to put the h1 name into a field of the form.

So let’s say the h1 title is “Sheraton New York City” I would like to take this input and save it as #input5 of my form which is on the same page below a picture of the hotel.

I tired the following, but it is not working

import wixSite from ‘wix-site’;
;
$w.onReady( function () {
let myTitle = $w(“#title”).text;
console.log(myTitle)

//$w(“#input5”).value = myTitle;
});

It returns “title” but not the actual title which comes from the dynamic page and can change depending on what the user selects.

Anyone have an idea?

Kind regards
Sven

Have a read of this example from Vorbly.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-LINK-TWO-DYNAMIC-PAGES

thanks

I have put this code here on the first page and this works

export function table1_click(event, $w) {
//Log the current item of the container.
var nameOfLocation= ($w(“#dataset1”).getCurrentItem().title);
console.log($w(“#dataset1”).getCurrentItem().title);
}

how I can now get the variable nameOfLocation on the dynamic page?

I also tried this:
import wixLocation from “wix-location”;

let nameOfLocation= ($w(“#dataset1”).getCurrentItem().title);
console.log($w(“#dataset1”).getCurrentItem().title);
wixLocation.to(“/wedding-database/” + nameOfLocation);
}

On the first page and then trying to access the variable nameOfLocation but I don’t find anything on the site you shared how to access it.

You can see the test that I did for this here.
https://givemeawhisky.wixsite.com/datatest

To do the example you need to make up your Tours dataset first and then make dynamic pages from that dataset.

This will add the dynamic pages for you and you can edit them how you want.

Then just make up your page making sure that you have the matching element id name that you use in your code.


As this is what is used in the code itself with the Wix Location link which you take from your page settings when you made up the url name and added the tourid field.

import wixLocation from "wix-location";

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

export function bookNow_click(event, $w) {
let tourid = $w('#tourid').text;
wixLocation.to("/tours/orderform/" + tourid);
}

On the second dynamic page you will have the same Tour Id text element already added to it, I have just moved mine to the top left of the page.

This is automatically connected to the tour dataset and the appropriate tour id value is shown on this page.

On my example I have just added another user input box for showing the same tour id in the booking form, as well as adding a user inout box for name too.

The code I have used on this page is only needed if you want to do what I have done and show the tour id in a user input so that you can have it in the form and save it to another dataset along with the users other entries.

$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
$w("#dataset1").onReady( () => {
$w('#input2').value = $w('#dynamicDataset').getCurrentItem().tourid;
$w("#dataset1").setFieldValue("tourid", $w('#input2').value);
});
});
});

There are other easier ways where you can simply use Wix Storage to save the specific data and then have it show again on another page.
https://www.wix.com/corvid/reference/wix-storage.html

You can find previous posts here about that.
https://www.wix.com/corvid/forum/community-discussion/help-how-to-pass-data-from-one-dynamic-page-to-another
https://www.wix.com/corvid/forum/community-discussion/solved-wix-storage-transferring-data-between-pages

Or you can simply use code to pass data from your page to a lightbox instead.
https://www.wix.com/corvid/reference/wix-window.lightbox.html

Again there are many previous posts that you can see for this too.
https://www.wix.com/corvid/forum/community-discussion/pass-data-from-repeater-into-dynamic-lightbox

Plus, Nayeli (Code Queen) has done a tutorial on it too that you can view.
https://www.totallycodable.com/wix/corvid/open-a-lightbox-when-clicking-an-item-in-a-repeater-using-a-button

This worked!
https://www.wix.com/corvid/reference/wix-storage.html#session

Great stuff, thanks a lot for your help, highly appreciated.

I have one more thing I am struggeling with related to this. So far, I just wanted to to save the title and display it. If I want to do the same with a date, it is not working. probably because of the format. I have two different date tickets, however somehow the format is not working.

on the first page I am using:
export function table1_click(event, $w) {
session.setItem(“mySelectedDate”, $w(“#datePicker1”).value);
}

On the second page (where the date should be displayed in an existing date tiker), I am using:

let myDateSelected = session.getItem(“mySelectedDate”); // “value”
//$w(“#datePicker1”).value = myDateSelected;

The error I get
Wix code SDK error: The value parameter that is passed to the value method cannot be set to the value Wed Apr 08 2020 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit). It must be of type date.

Any idea what I is wrong with the code?

@svenstrebel

Have a search of the forum for formatting dates as there are many previous forum posts about changing the value from the date field to just the date and not the time as well.

You can also edit it in the dataset as well.
https://support.wix.com/en/article/formatting-the-date-and-time-field-in-your-database-collection

@givemeawhisky Thank you. It was working, however now I am facing new issues, it doesn’t get boring

I had a table before which I changed now to a repeater as the table did not look great. With the table, I was able to link the dynamic page to a column and just click on the word. Now with the repeater I want to click on the picture (image4). This works fine as long as I do not have code. Unfortunately, I need to save the values of the element clicked with the code below:

export function image4_click(event) {
//let nameOfLocation= ($w(“#dataset1”).getCurrentItem().title);
session.setItem(“myLocationName”, $w(“#dataset1”).getCurrentItem().title);
session.setItem(“mySelectedDate”, $w(“#datePicker1”).value);
console.log(“working”)
}

Having this code leads to the fact that the dynamic pace does not load when image4 is clicked. So I somehow need to incorporate the url. Any idea how to do that?

@svenstrebel
It won’t work in a repeater because when you use a repeater you have containers which will show and repeat the same thing, so if you use normal code like you have it won’t get the selected item from that repeaters container.

You need to code for repeaters differently which you can see here.
https://www.wix.com/corvid/reference/$w.Repeater.html
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-input-repeaters

If you search the forum you will find many previous posts about buttons in repeaters with code samples in them that you can look at, like a few here.
https://www.wix.com/corvid/forum/community-discussion/resolved-linking-a-button-from-a-repeater-to-a-dynamic-page
https://www.wix.com/corvid/forum/community-discussion/button-from-repeater-not-working
https://www.wix.com/corvid/forum/community-discussion/how-can-i-add-a-dynamic-link-to-the-container-of-a-repeater

thank you very much for your help, I will have a look and see if it works.

@givemeawhisky thank you very much for your help. I will have a look and try to make it work.