I need help with populating a form field

Ask the community
, , ,
1

How do you populate a form field with selected options?

I’m using Wix Editor.

I am trying to have the following happen.

  1. Have the customer make a series of selections on a page. These will all be populated in another part of the page.
  2. Have them request a quote and the information submitted to a Submission Table.

I am at a bit of a loss. I have tried doing it with CMS, in the new form, and the old form. I have googled the issue and couldn’t find the answer along with watching several youtube videos.

The form works, just the info will not go over.

Currently I was attempting this code:

$w(“#dropdown1”).onChange((event) => {
const selectedValue = event.target.value;
$w(“#textinput1”).value = You selected: ${selectedValue}; // Update the text input
$w(“#hiddenFormField”).value = selectedValue; // Update the hidden form field
});

But it doesn’t work either.

So I guess my question is two part. 1. What’s the best way to do it, and 2. How do you do it?

I hope this isnt’ too novice for you all. Thanks for your time.

2

I would build this with input elements. connected to CMS. Then code it to update the field below onChange. then add a submit button to save all the data.

maybe something along the lines of this

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
  // When the "Request a Quote" button is clicked
  $w('#requestQuoteButton').onClick(async function () {
    // Gather the customer's selections
    let customerSelections = {
      selection1: $w('#dropdown1').value,
      selection2: $w('#dropdown2').value,
      // Add more selections as needed
    };

    // Display the selections in a text element
    $w('#selectionsText').text = JSON.stringify(customerSelections);

    // Open the lightbox and pass the selections
    await wixWindow.openLightbox('Request a Quote', customerSelections);
  });
});

// In your lightbox code
$w.onReady(function () {
  // When the form is submitted
  $w('#quoteForm').onSubmit(async function () {
    // Get the form data
    let formData = $w('#quoteForm').value;

    // Insert a new row in the Submission Table
    await wixData.insert('SubmissionTable', formData);

    // Close the lightbox
    wixWindow.lightbox.close();
  });
});
1 Like
3

Thank you for replying! I will give it a shot!

1 Like