Adding and displaying page input in text box + validating [SOLVED]

Ask the community
,
1

Hello,
Trying out Wix code, amazed by the flexibility but baffled by a simple problem, probably due to my lack of code experience:

I have 10 ratings input items on a page that will feed into a collection. Each rating input is 0 to 5 using stars. I want to make sure users only allocate a maximum of 30 stars across the 10 inputs. I therefore want to do two things:

  1. I want to display to users in a text box the amount of stars they have left, out of 30, to place in the various ratings inputs.
  2. I want to prevent users from submitting their ratings if they use more than 30 stars across all 10 inputs.

I have placed a text box on the page, which I have labelled AttributeSum, to show the remaining stars that users can place. The ratings inputs are labelled ratingsInput1 and so on until ratingsInput10.

Could anyone suggest the right code to use to make 1. and 2. happen please? I’m confused between sum( ), aggregate( ) and other choices.

Thanks in advance for any hint in the right direction :slight_smile:

2

I’m sure there’s a more elegant way to do it, but the code below solved it - The submit button is #button1 with ‘Enabled by default’ clicked off, and the instruction text box is #Instructions1; I also had to use an input box rather than a text box to show how many stars users had left, since I could set that input box to show a value rather than text only. Happy to hear from people on how to optimise this, but right now I’m a happy bunny :slight_smile:

import wixData from ‘wix-data’;

$w.onReady( function () {
$w(“#AttributeSum”).value = 30
$w(“#ratingsInput1”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
}
})
$w(“#ratingsInput2”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput3”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput4”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput5”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput6”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput7”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput8”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput9”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value= totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
$w(“#ratingsInput10”).onChange( (event) => {
let ratingsInput1 = $w(“#ratingsInput1”).value;
let ratingsInput2 = $w(“#ratingsInput2”).value;
let ratingsInput3 = $w(“#ratingsInput3”).value;
let ratingsInput4 = $w(“#ratingsInput4”).value;
let ratingsInput5 = $w(“#ratingsInput5”).value;
let ratingsInput6 = $w(“#ratingsInput6”).value;
let ratingsInput7 = $w(“#ratingsInput7”).value;
let ratingsInput8 = $w(“#ratingsInput8”).value;
let ratingsInput9 = $w(“#ratingsInput9”).value;
let ratingsInput10 = $w(“#ratingsInput10”).value;
let totalRatings = ratingsInput1 + ratingsInput2 + ratingsInput3 + ratingsInput4 + ratingsInput5 + ratingsInput6 + ratingsInput7 + ratingsInput8 + ratingsInput9 + ratingsInput10
$w(“#AttributeSum”).value = 30 - totalRatings
if (totalRatings >= 31) {
$w(“#AttributeSum”).value = totalRatings - 30;
$w(“#Instructions1”).text = “Remove”;
$w(“#button1”).disable();
} else {
$w(“#Instructions1”).text = “You may use”;
$w(“#button1”).enable();
}
})
})