hi all, do you know how to add a Pre Loader if Form is being Submitted?
I have a form and i want the page to show a GIF that let the user understand that the process is working.
Does anybody know how to do it?
Thanks
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
thats working fine,
now another issue , its not loading thankyou page ...
Wix code SDK error: Thank Yout Page is an unsupported url
1- how to get the supported url for thank you page?
2- if i have upload file user input element , how to modify my code to insert it to the database ?
Hi,
Please see my reply here
to hide the gif after save, add $w('#imgLoader').hide() after the then():
//... .then(() => { wixLocation.to('thankyoupage') }) //...
yes the issue was the misspelling ...
now i have another issue ... the loading gif is stay on the page for ever ... its not disappear after the form submitted successfully !!
now i have this working code, below but i have two issues:
1 - the user input elements not cleared out after form submission.
2- the image loader stays for ever...
export function submit_form(event, $w) { //Add your code for this event here: $w('#imgLoader').show() // "yourGif" refers to preloader gif setTimeout(() => { const nameInputValue = $w('#nameInput').value; const toInsert = { name: nameInputValue, } wixData.insert('test',toInsert) .then(() => { wixLocation.to('thankyoupage') }) },2000); // set the time to preform the insert method. 2000ms }
Check out this line:
cosnt nameInputValue = $w('#nameInput').value;
You have misspelled const (cosnt).
I Think this is the reason.
Roi.
thanks for your reply
i tried this code but its not working for me ....
i have database name : test , which has one column : name
and i have a forum with a text box = nameInput
and i have a submit button called submit
import wixData from 'wix-data'; import wixLocation from 'wix-location'; $w.onReady(function () { //TODO: write your page related code here... }); export function submit_click(event, $w) { //Add your code for this event here: function submit_click() { $w('#imgLoader').show() // "yourGif" refers to preloader gif setTimeout(() => { cosnt nameInputValue = $w('#nameInput').value; const toInsert = { name: nameInputValue, } wixData.insert('test',toInsert) .then(() => { wixLocation.to('thankyoupage') }) },2000); // set the time to preform the insert method. 2000ms }
}
Just add the relevant keys to the toInsert object.
Roi.
yes, user input element = field key name inside my collection database.
for example i have a text box called firstName, and inside my collection i have a column with a field name : firstName too
Hi,
Which same name ? same field key name?
Roi.
what is the first name input and last name input ?
if i have a form with input item : productName, and price and inside my database i have same name ... how i implement this please
Hi,
Some code is required in order to make it done.
First of all disconnect the submit button.
Next you need to create an onClick event to the button.
The function should look something like this:
import wixData from 'wix-data'; import wixLocation from 'wix-location'; function submit_click() { $w('#yourGif').show() // "yourGif" refers to preloader gif setTimeout(() => { cosnt firstNameValue = $w('#firstNameInput').value; cosnt lastNameValue = $w('#lastNameInput').value; const toInsert = { firstName: firstNameValue, lastName: lastNameValue } wixData.insert('yourDB',toInsert) .then(() => { wixLocation.to('thankyoupage') }) },2000); // set the time to preform the insert method. 2000ms }
For more information:
https://www.wix.com/code/reference/wix-location.html
https://www.wix.com/code/reference/wix-data.html
Good luck!
Roi.