Auto-fill textbox and Validating Dates

Ask the community
,
1

Hi, I am trying to do up a “Create Event” Form whereby Event Creators can check the following checkboxes to indicate their target audience:

  1. Year 1 Students
  2. Year 2 Students
  3. Year 3 Students
  4. Year 4 Students
  5. Master Degree Students

After pressing the Confirm Button (#confirmBtn), the textbox (#targetAudience) will be auto-filled via the following function:

export function confirmBtn_click(event, $w) {
//Add your code for this event here:

$w("#targetAudience").value = ""; 

if($w("#year1Students").checked) 

{ 
	$w("#targetAudience").value = $w("#targetAudience").value + "Year 1 Students, "; 
	
} 

if($w("#year2Students").checked) 

{ 
	$w("#targetAudience").value = $w("#targetAudience").value + "Year 2 Students, "; 
	
} 

if($w("#year3Students").checked) 

{ 
	$w("#targetAudience").value = $w("#targetAudience").value + "Year 3 Students, "; 
	
}	 

if($w("#year4Students").checked) 

{ 
	$w("#targetAudience").value = $w("#targetAudience").value + "Year 4 Students, "; 
	
} 

if($w("#masterStudents").checked) 

{ 
	console.log("master"); 
	
	$w("#targetAudience").value = $w("#targetAudience").value + "Master Degree Students"; 
	
} 

$w("#targetAudience").expand(); 

console.log($w("#targetAudience").value);	 
	
$w("#confirmBtn").hide();

}

So far, I have managed to auto-fill the textbox.

However, when I submit the form, the data in the auto-filled textbox does not appear in the relevant field in my Collection Table.

Also, is it possible to validate dates in Wix Code:

For example, startDate < endDate?

2

Hi,
Can you please make sure the textbox is connected to the same dataset as your submit button?
Also, for date validation you can use the minDate and maxDate properties of the date picker .
Whenever someone sets a start date, you can update that to be the minDate of the second date picker, and vice versa.

3

I am having the same exact problem! I change the value of the textbox like so:

$w(“#textBox3”).value = $w(“#text23”).text;

Yet it is not saved to the column in the database when I submit

4

Same exact problem here… It’s driving me nuts! Why is the collection table not capturing the auto-filled inputs? We need help on this one, Wix!

5

Hi, luisplaz and Manny. Did you manage to achieve your goals?
If not, please share a link to your site and explanation of the wanted scenario.
We’ll be more then happy to assist
Roi

6

Hi, Having the same problem here. Both input text box and submit button are connected to the same data collection dataset. But the auto-filled textbox values are not saved in the database ( an empty row is created). However, if I manually enter a value in the textbox, everything is saved successfully.

7

Hi Hiranya,
Can you please share a link to your site so i can inspect ?
Roi

8

https://www.heo-robotics.com/developer-neo . I only have a single textbox and the submit button at the moment so it would be easier to isolate the problem. They are both connected to NEO dataset. If I allow the textbox to autofill and then press submit, only a blank space is saved in the dataset. But if I manually fill it and click submit, everything is ok. In wix code, I use,

$w(“#input1”).value = ‘autofill’;

to set the value of the input textbox. Thanks !

9

On the topic of autofill. Can you code in to autofill a column with same exact info. Example:
Have a form submit that wish to have the database autofill the name, bio and image of the person submitting (each person has database assigned to them individually)…do not want them to have to fill in the personal info each time that they submit data.

10

I’ve been running into the same issue. My goal was to use a dynamic page, and to take the ID associated with the page being viewed, and insert it into a different collection linked with a separate dataset using Write-Only. I found if I populated input values and linked them to the dataset, then hid them from view (because the customer really doesn’t care to see it), the value would populate, but when submitting the dataset, it would never write to the collection.

To get around this, I inserted the data directly into the collection and included input values where needed. This was executed in an onClick action of a button:

import wixData from ‘wix-data’;

export function addCommentBtn_click(event, $w) {

let linkId = $w(“#input1”).value;
let addCommentBox = $w(“#addCommentBox”).value;

function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}

let commentRandomId = getRandomInt(1000000000000000).toLocaleString();
let noCommas = commentRandomId.replace(/,/g,‘’);

let toInsert = {
“commentId”: noCommas,
“linkId”: linkId,
“comment”: addCommentBox
};

return wixData.insert(“Comments”, toInsert)
.then( () => {
$w(“#dataset2”).refresh();
$w(“#addCommentBox”).value = null;
});

}

There are a couple things going on here for me. First I identify a variable linkId and give it a value of whatever is populated in #input1 (This happens to be the Primary ID of the dynamic page being displayed). I then pull the value of what the user populated into the #addCommentBox textbox and associate that with the variable addCommentBox.

You can safely ignore the getRandomInt as I used it only to populate a unique number for each comment injected into the collection. It’s not fool proof, but it works for our volume. The next two lines take that random number and define the length, change it to a string value, and remove the commas before inserting into the collection.

The more important part is setting up the insert into the collection. We define a “toInsert” variable and call out the field key, then what we want to populate that key in the row being inserted. Here I’m populating the value with the commas removed into “commentId”, the linkId field with the value in #input1, and the comment field with the value the user populated into the input box #addCommentBox.

The last part of the code commits those values into the collection, then refreshes a separate dataset which is Read-Only that a table is using to view the values and associate them with the dynamic ID being displayed. The results are refreshed in the tables associated with that dataset and I finish with clearing the information the user populated in the #addCommentBox input box so they can enter another comment if necessary.

I’m only just learning java script so forgive me for any lack of best practices here. In any case, I hope this information helps someone moving forward.

Best Regards,

Dan P.

11

I just asked the same question on the forum. I got an answer that I didn’t totally understand. I’m glad I’m not the only one.

Also, I’m going to try your work around, Dan! Thanks for sharing your code!

12

Hi there,

Has anyone solved this? I am facing the same issue with the auto-filled forms.

$w(" #i nput1").value = $w(" #text 1").text;
When I submit the form, it does not get saved in the database.

Thanks.

Ben

13

Hi Little Red Dot,
Setting values through code does not affect the dataset, this is by design.
You can use the dataset “setFieldValue” API to change the value of the field you want.
For example: $w(“#myDatasetID”).setFieldValue(“myFieldKey”, $w(" #text1 ").text)

14

Thanks Tomer! It works perfectly.

For anyone looking for an example, check out this website https://www.vorbly.com/Vorbly-Code/WIX-CODE-AUTO-FILL-FORM-WITH-USER-INPUTS.

Good luck!

Ben