Filter user submission based on time

I can see now that you mentioned the fact that you only stored time w/o date in one of your first posts, and I didn’t get what you meant back then (sorry).
Anyway, you have the answer now.

@jonatandor35 I’ve added a date picker and connected it a date and time field, the time picker won’t connect if I change the field type of time or try to connect the time and date pickers to the one field. I’ve searched for a while - almost all day on how to combine both but can’t seems to find anything

@ibateman37 , I’ve never used a time picker on Wix (so maybe someone else can give you a better advice), but I guess you can combine the date value and the time value together and then submit them to 1 field.
Maybe try something like:

$w("#datePicker1, #timePicker1").onChange((event) => {
    if($w("#timePicker1").valid && $w("#datePicker1").valid){
        let timeSplit = $w("#timePicker1").value.split(":");
        let timeInMs = Number(timeSplit[0]) * 3600000 + Number(timeSplit[1]) * 60000;
        let dateTime = new Date($w("#datePicker1").value.getTime() + timeInMs);
    }
})

Then submit the dateTime value to your collection field.

@jonatandor35 I’ve been doing more research and I found out that the code I’m using will only filter on date so for example if I do a test submission with tomorrows date it appears but anything with todays date gets filtered out, it looks like new Date() only compares the date and not time as well. I’ve tried to put your code in but I get parsing errors when I try to get it to submit to my DB.

@ibateman37 that’s not true. new Date() is a precise time stamp (it’s actually the number of milliseconds that have passed since 1 January 1970 00:00:00:000 UTC which can be formatted as a precise data & time).
You probably did something wrong because I used my codes successfully.
Maybe put here the code you used for the submission.

@ibateman37 I posted an example for you here:
https://jonatandor35.wixsite.com/test/date-picker

@jonatandor35 Thank you so much, you’ve been a great help! The code works perfectly. The downside is that the rest of the user input form doesn’t load to my DB now! I’m guessing that’s because I now need to use code to get them in my DB?

@ibateman37 instead of this codeline:
wixData.save(“Reservations”, {“dateTime”: dateTime})
Write something like this:

let toSave = {
"dateTime": dateTime,
"name": $w("#input1:).value,
"address": $w("#input2").value,
"age": $w("#input3").value
}//etc. etc.
wixData.save("CollectionName", toSave)
//continue with the code from here... as you saw on my page;
  • if you go for this direction disconnect the submit button so it won’t be connected to a dataset (you don’t want to submit it twice.

Thanks @jonatandor35 I noticed that and disconnected it. The only thing I’ve got an issue with now is part of the user submission is photos, this is the line I’ve put in the toSave code you gave me but it’s not adding them to my DB.

“photo1”: $w(“#uploadButton1”).value,

@ibateman37 The value of the button is only a file-name, you need to actually upload the file, before you can save its url to database.
You can try something like this:

let image1;
$w('#myUploadButton').onChange( () => {
  if ($w("#myUploadButton").value.length > 0) {  // user chose a file
  //put here a preloader or something so the user will know it's loading
    $w("#myUploadButton").startUpload()
      .then( (uploadedFile) => {
        image1 =uploadedFile.url;
      } )
      .catch( (uploadError) => {
        console.log(`File upload error`);
      } );
  }
} );

Of course when the user clicks “Submit” you have to run a validation test to make sure or the necessary data are there.

  • in this way you can also add a line of code to show the image to the user after loading (and before saving). That’s always nice.

@jonatandor35 I amended the code you gave to the code below, added a preview image and works a treat! You’ve been absolutely fantastic helping me, really appreciate your time. Couldn’t have done it without you!

$w.onReady( function () {
$w(‘#uploadButton1’).onChange( () => {
if ($w(“#uploadButton1”).value.length > 0) {
$w(“#text19”).text = Uploading ${$w("#uploadButton1").value[0].name};
$w(“#uploadButton1”).startUpload()
.then( (uploadedFile) => {
$w(“#text19”).text = “Upload successful”;
$w(“#image1”).src = uploadedFile.url;
})
. catch ( (uploadError) => {
$w(“#text19”).text = “File upload error”;
console.log(Error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
});
}
else {
$w(“#text19”).text = “Please choose a file to upload.”;
}

@ibateman37 happy to help :slight_smile:
I think you have a mistake in the “else” block. The “else” is a case where the user clicked the upload button but didn’t select a file, so the message should be different.

Also, I don’t see your full code, but I guess you either assign the uploadedFile.url or pull the source of image1 after it appears and add it to toSave? Right?
So to do it correctly, you may want to create toSave empty object at the global scope and then assign it the values :

let toSave = {};
 $w('#uploadButton1').onChange( () => { 
//your code...
.then((uploadedFile) => {
 $w("#text19").text = "Upload successful"; 
toSave.image = uploadedFile.url; // >>> Pay attention to this line <<<<<<<<<
$w("#image1).src = uploadedFile.url; 
}).....
$w("#submitButton").onClick((event) => {
if(runValidation() === true){
//the wixData save
} else {
//message to the user
})
function runValidation(){
if($w("#name).valid && $w("#address").valid && $w("#age).valid && typeof toSave.image === "string"){
  toSave.name = $w("#name").value,
  toSave.address = $w("#address").value;
  toSave.age = $w("#age").value;
  return true;
} else {
 return false;
}
}

@jonatandor35 Thanks…again! I pulled the source from the image and added it to the toSave to the line:
“photo1”: $w(“#image1”).src, I’m a bit slow, still learning but it works fine. It took me most of yesterday to get the image to go to the DB and not the url which obviously caused errors! The other issue I’m looking at now is I put a redirect to another page when the submit button is pressed but it’s redirecting too quick and the submission hasn’t loaded into the DB. I know I need to use a wait or pause function (something like that anyway!)

@ibateman37 since the save function is a promise, all you have to do is to put the redirection in the promise resolution block (the “then” block).

$w("#submitButton").onClick((event) => {
    wixData.save("MyCollection", toSave)
    .then(() => {
       wixLocation.to("/newPagePath");   //<<<<< PUT IT HERE   
})
.catch((err) => {
    $w("#failedMsg").show();
})
})

Ah ok, thanks @jonatandor35 thought I could put it there, just couldn’t work out what to put before it. Seems so logical now!

@jonatandor35 final thing I need to sort is a click counter in my repeater, counting how many times the image has been clicked. You’ll be getting a credit on my site at this rate! “Proudly created by Wix and J.D” :smile:

Is this click counter a part of the above mentioned form or something unrelated (+ add details about what exactly you want to implement). clicks per user? click + user per session? click per all users?

@jonatandor35 Sorry, it’s separate to the submission form. It’s for the repeater on my page, anyone that clicks the image in the repeater element it counts how many image clicks. Then displays the click count in the repeater as well. What I was thinking I need to do is an image onClick event that counts into my DB in a ‘counter’ field then add a text box in the repeater to show the count. It doesn’t have to count up as the user is on the page as long as it shows the updated count if they refresh the page.