Forms. Numbers must be different

Ask the community
, ,
1

Question:
[Has 5 input boxes and a send button for judging in a competition from places 1 – 5. How can I prevent not the same number from being given multiple times. All in numbers must be different and between 1 and 30, before one can submit. Is there anything here that can help me with a code?]

2

For a HTML-Component…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Competition Judging</title>
</head>
<body>

<h2>Competition Judging</h2>
<form id="judgingForm">
  <label for="place1">1st Place:</label>
  <input type="number" id="place1" name="place1" min="1" max="30" required><br><br>

  <label for="place2">2nd Place:</label>
  <input type="number" id="place2" name="place2" min="1" max="30" required><br><br>

  <label for="place3">3rd Place:</label>
  <input type="number" id="place3" name="place3" min="1" max="30" required><br><br>

  <label for="place4">4th Place:</label>
  <input type="number" id="place4" name="place4" min="1" max="30" required><br><br>

  <label for="place5">5th Place:</label>
  <input type="number" id="place5" name="place5" min="1" max="30" required><br><br>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById("judgingForm").addEventListener("submit", function(event) {
  // Prevent the form from submitting by default
  event.preventDefault();

  // Retrieve values from input fields
  var place1 = parseInt(document.getElementById("place1").value);
  var place2 = parseInt(document.getElementById("place2").value);
  var place3 = parseInt(document.getElementById("place3").value);
  var place4 = parseInt(document.getElementById("place4").value);
  var place5 = parseInt(document.getElementById("place5").value);

  // Check if all inputs are unique
  if (new Set([place1, place2, place3, place4, place5]).size !== 5) {
    alert("Please ensure all places are unique.");
    return;
  }

  // Submit the form if all inputs are valid
  this.submit();
});
</script>

</body>
</html>

For your wix website…maybe something like…

$w.onReady(()=> {$w("#submitButton").onClick(submitForm);});

function submitForm() {
    let inputs = [];
		inputs[0] = $w("#input0");
		inputs[1] = $w("#input1");
		inputs[2] = $w("#input2");
		inputs[3] = $w("#input3");
		inputs[4] = $w("#input4");

    let uniqueInputs = new Set();
    let areInputsUnique = true;

    inputs.forEach(input => {
        if (!input || uniqueInputs.has(input)) {
            areInputsUnique = false;
        } else {
            uniqueInputs.add(input);
        }
    });

    if (!areInputsUnique) {
        // Show error message
        $w("#errorMessage").text = "Please ensure all inputs are unique.";
        return;
    }

    // Submit the form
    // Note: Implement your form submission logic here
}

Tweaking and modifying the code a little bit and it should do what you need.

4

Thank You :slight_smile:
I tried the HTML form and it worked, but how do I get the result into the CMS database?
Can the Submit button be changed to not be active until the form is correctly filled in?
Forms

5

You are talking about HTML-Version, but what i do see on the shown pic is the Wix-Forms-Version running on your wix-website and beein an out-of-the-box-product by wix.

So, your written text and the shown pic do not match.

You should first decide, which way you go.

Can the Submit button be changed to not be active until the form is correctly filled in?

Yes, this can be done.
You will find all what you can do with Wix-Forms here…
https://www.wix.com/velo/reference/wix-forms-v2/events

6

I would like to use Wix Forms, and that submit button doesn’t appear until all of the book’s have been filled in correctly. Is it possible?