How to disable a form button so members can't submit more than once?

Ask the community
, ,
1

Hi! I don’t know code, so I thought I would ask here. I want to disable a button after a site member has clicked it, and them not be able to submit again by refreshing the page, etc.

Help would be much appreciated! <3

2

Hi Clarity.
if you want to do so you can write some code.
first you make a code that search for the submitted users ID
you can use this website to make a query to get the data you need
then you loop trough it to see if the current user is not in the list.
in your .then() from the query you can loop trough it with this code


 
for (var i = 0; i < result.items.length; i++) {
 // makes a loop trough your results of the query
 if (result.items[i] === wixUser.currentUser.id) {
   $w("#yourButton").disable() // disables the button if user is found
   i = result.items.length // sets i to end the loop
 } else {
   $w("#yourButton").enable() // enables it if not found
   }
    }

in the onClick event of the button you can do $w(“#yourButton”).disable()
then you do not have to refresh the page on submition.

Kind regards
Kristof.

3

Thanks, but I don’t quite understand. Which do I copy and paste from that provided link? I also pasted the code but it says that “result is not defined”. It would help if you could provide the exact code to paste.

4

Hi Clarity
here is the piece of code

import wixData from 'wix-data'; // this goes on the top of the code above the $w.onReady
import wixUsers from 'wix-users'; // this also goes on the top of the code above the $w.onReady
// this goes into the $w.onReady(function()

wixData.query("myCollection") // collection where the user inserts the form.
  .find()
  .then( (results) => {
 if(results.items.length > 0) {
 for (var i = 0; i < results.items.length; i++) {
 if (results.items[i].Owner === wixUsers.currentUser.id) { // checks if the current user is in the list
                $w("#yourButton").disable() // if in the list, disable your submit button
 break // ends the for each loop
            } else {
                $w("#yourButton").enable() // else enable it
            }
        }

    }
  } )
  .catch( (err) => {
 let errorMsg = err; // this is called if an error is called
  } );


 //this goes in the onClick function of $w("#yourButton")
  $w("#yourButton").disable() // this should work, you can also add other items to be disabled

if you do not wish to learn any code you can always hire a developer here

kind regards
Kristof

5

All the grey text is extra info to know where to place evrything and what to change to your buttons

6

Thank you, but it’s not working. It just says there is an error with the “});” at the very end. Also, I don’t see the onClick event you’ve mentioned.

7

@claritylove67
the first 2 lines you put on the top of your page code script.
the second part you add to the onReady from your page code script
the last part $w ( “#yourButton” ). disable () you put in the onClick event of your button.

to get the onClick from your button, rightclick the button, and select “show properties”
the properties screen opens, and there you can see onClick.
if you hover over it, you will see a + sign next of it.
press it and it gives it a naam
press enter to accept it and a part of code is added to your page code
there you add the last part $w ( “#yourButton” ). disable ()

Kind regards
Kristof

8

@volkaertskristof I don’t understand what I’m doing wrong. I did exactly as you stated, but nothing is working. Maybe I am putting things in the wrong place? I don’t know. I paste everything, and put it where you said but it still gives me a parsing error. And when I add the code for to disable the button through onClick, it says export has to be at the top.

9

@volkaertskristof Sorry, I got the code to work for the console but for the actual site it isn’t working, as members can still submit the button more than once. Here is the code:

import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(function () {
wixData.query("enterContest02")
  .find()
  .then( (results) => {
 if(results.items.length > 0) {
 for (var i = 0; i < results.items.length; i++) {
 if (results.items[i].Owner === wixUsers.currentUser.id) {
                $w("#button4").disable()
 break
            } else {
                $w("#button4").enable()
            }
        }

    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );

});
export function button4_click(event) {
    $w("#button4").disable() 
}
10

@volkaertskristof thank you so much, works PERFECT!
My code below. Just a small change to the “Owner” field = “_owner”

import wixData from ‘wix-data’ ; // this goes on the top of the code above the $w.onReady
import wixUsers from ‘wix-users’ ; // this also goes on the top of the code above the $w.onReady

$w . onReady ( function () {
wixData . query ( “myCollection” ) // collection where the user inserts the form.
. find ()
. then ( ( results ) => {
if ( results . items . length > 0 ) {
for ( var i = 0 ; i < results . items . length ; i ++) {
if ( results . items [ i ]. _owner === wixUsers . currentUser . id ) { // checks if the current user is in the list
$w ( “#button1” ). disable () // if in the list, disable your submit button
break // ends the for each loop
} else {
$w ( “#button1” ). enable () // else enable it
}
}

}

} )
. catch ( ( err ) => {
let errorMsg = err ; // this is called if an error is called
} );
})
export function button1_click ( event ) {
$w ( “#button1” ). disable ()
}

11

Hi @volkaertskristof

I am following your code, the only thing I need clarity on so it makes sense to me is.

What does the " i " represent in the code?

for ( var i = 0 ; i < results . items . length ; i ++ ){ if ( results . items [i]. Owner === wixUsers . currentUser . id )

12

Hi rewirebb,
“i” is a number that changes.
It starts at 0 “i=0”
And while its lower then the result.items.length it will change
Lets say the length is 12 then i will change to 1,2,3,4,5,6,7,8,9,10,11
But when currentUserId is the same aa the owner you can do something

13

Please this doesn’t work