Customized Form - Dynamic Element Submission to Dataset

Ask the community
, , , ,
1

Question:
I have created a customized form on my website and it works fine sending all needed inputs to my form dataset. However, I would also like to send another dynamic value to my form dataset. This value is not part of the form (let’s say for instance the title of the page) and it is dynamic, since it is connected to (another) dataset.

What should I do?

Product:
Wix Editor

What are you trying to achieve:
I want that when a user submit my customized form, I receive either information from input elements of the form as well as another dynamic text element present in the page.

What have you already tried:
I tried to run this Velo code and it does not work:

import wixData from 'wix-data';

$w.onReady(() => {
    $w("#button7").onClick(() => {  
        $w("#Agriturismi").onReady(() => {  
            let currentItem = $w("#Agriturismi").getCurrentItem();
            console.log("Current Item:", currentItem);  

            let propertyName = currentItem["propertyName"];  // ✅ Correct Field ID
            console.log("Property Name Retrieved:", propertyName);

            if (!propertyName) {
                console.error("Error: Property Name is undefined or empty.");
                return;
            }

            let formData = {
                "propertyName": propertyName,  // ✅ Now using the correct field Id
            };

            wixData.insert("Booking Reservation Form", formData)  
                .then(() => console.log("Data saved successfully!", formData))
                .catch(err => console.error("Error saving data:", err));
        });
    });
});
2

give this a try

$w.onReady(() => {

    $w("#Agriturismi").onReady(() => {
        let currentItem = $w("#Agriturismi").getCurrentItem();
        let propertyName = currentItem["propertyName"]; // Ensure this key matches your dataset
      
        $w("#button7").onClick(() => {
           $w("#bookingReservationFormDataset").setFieldValue("propertyName", propertyName)
                .then(() => {
                    return $w("#bookingReservationFormDataset").save();
                })
                .then(() => {
                    console.log("Data saved successfully with dynamic value!");
                })
                .catch(err => {
                    console.error("Error saving data:", err);
                });
        });
    });
});
3

Thanks Dan. I’ll try.

Meanwhile I’ve found this workaround but in my case it works and achieve my objective :smiley:
Basically it fill a hidden form text field in my customized form with information needed

import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';

$w.onReady(() => {
    // Get the full URL and extract the last part
    let fullUrl = wixLocationFrontend.url;
    let lastPart = fullUrl.substring(fullUrl.lastIndexOf("/") + 1);

    // Replace "-" with spaces and capitalize each word
    let formattedName = lastPart
        .replace(/-/g, " ") // Replace hyphens with spaces
        .split(" ") // Split into words
        .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
        .join(" "); // Join back into a single string

    // Populate the hidden input field with the formatted text
    $w("#hiddenInput").value = formattedName;
});
1 Like