How to make an input field that accepts multiple, specific values?

Ask the community
,
1

I want an input field on my form where users enter a “code” that allows them to submit the form. We’ll have many codes that are valid, sent to people so they can use our site, and our end so we can validate and track where they came from.

For example, Jim’s Hearing Center will send their users the code “JIM”, while Bob’s Hearing Center will send their users the code “BOB”. We need to be able to add many more codes as time goes on.

Here is the website, the input field I want to do this with is the “Promo Code” field.
https://jdproulx.wixsite.com/cs-hearing-page/copy-of-free-batteries

I’ve tried searching through the REGEX sites but I can’t find a way to do it. And my coding skills are non existent.

Can anyone help? Please let me know how I can explain further.

2

Hi,
You can create a database collection that will contain all the valid codes.

After that, add an input field and submit button. On submit button click , query() the database with the value from the input field. If the result item length is bigger than 0, perform a certain action you wish to do if the code is valid. If not, display an error message.
Example code:

import wixData from 'wix-data';

$w.onReady( function() {
  $w("#submitButton").onClick( (event) => {
  wixData.query("codesDatabase")
  .eq("codeFieldInDatabase", $w('#input').value)
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      //perform valid code action
    } else {
      // handle case when the code is not valid
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );
} );
} );
3

Thank you for the reply. I tried to implement this but it’s not working, so I probably made a mistake. I added the database collection with a field of valid codes (testcode1, testcode2, testcode3, testcode4). I added the code as follows below using my database name and input names. But when I use the form on the live site, it accepts any “promo code”, not limited to the ones in my dataset.

Also, how do I add a message for “Please enter a valid promo code” and “Promo code accepted!” when they enter an incorrect or correct code?

import wixData from 'wix-data';

$w.onReady( function() {
  $w("#submitbutton").onClick( (event) => {
  wixData.query("PromotionCodes")
  .eq("PromoCodeField", $w('#input9').value)
  .find()
  .then( (results) => {
 if(results.items.length > 0) {
 //perform valid code action
    } else {
 // handle case when the code is not valid
    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );
} );
} );