Hi Guys,
Is there a way to achieve this Item Counter in Pro-Forms
?
Any guidance is appreciated.
Thanks,
Sheldon
?
This one is a lil tricky. The main issue is that Pro Forms currently still has issues when inputs are inside a block/div. When that is the case, the value isn’t submitted or at least I haven’t figured out how yet.
That means we first need to pass the values to other “regular non-block-nested” fields and then submit those. I’m sure this will be fixed at some point so we can save one step.
Imma try n break it down as best as I can but for now I won’t go into the styling of things. Should you run into issues about the styles once you’ve rebuilt the structure and confirmed it submits, feel free to post back. I have however exported the the form as a template. No idea how well / accurate it will import but here it is → Filen
First, the layout:
We’ve got 1 Block to act as a grid for the fields.
Each field consists of the title, some svg and a wrapper in which we have the actual field and a minus and plus icon.
Then, outside of the grid, we have 1 regular text field per number field. I’ve tried using hidden fields but somehow they didn’t submit, so you’ll have to hide the text fields using css.
Overview of the classes I’ve used, so the code later on works:
The hidden text fields have the class custom_number__hidden
VERY IMPORTANT: Each Number field and Text field, need to share a unique attribute:
Second number and text field would have the value of number_02 and so on.
Now the code:
We need 2 Events, one for the plus icon and one for the minus icon
PLUS:
// Get the parent
const parent = event.target.closest('.custom_number__wrapper');
//Get our custom attribute
const attr = parent.querySelector('.custom_number').getAttribute('data-field')
//Using our custom attribute, get the hidden field with the same attribute
const hidden = document.querySelector(`.custom_number__hidden[data-field="${attr}"] input`);
//Get our number input
const input = parent.querySelector('.custom_number input');
//Get the value of the number input and increase it, making sure to set it 0 IF there is no value set
var value = parseInt(input.value);
value = isNaN(value) ? 0 : value;
value++;
//Pass the new value to our number input and our hidden field
input.value = value;
hidden.value = value;
MINUS:
// Get the parent
const parent = event.target.closest('.custom_number__wrapper');
//Get our custom attribute
const attr = parent.querySelector('.custom_number').getAttribute('data-field')
//Using our custom attribute, get the hidden field with the same attribute
const hidden = document.querySelector(`.custom_number__hidden[data-field="${attr}"] input`);
//Get our number input
const input = parent.querySelector('.custom_number input');
//Get the value of the number input and decrease it, making sure it can't go below 0
var value = parseInt(input.value);
value = value < 1 ? 1 : value;
value--;
//Pass the new value to our number input and our hidden field
input.value = value;
hidden.value = value;
Lemme know if u got it working 
Oh, really? Definitely need to check this later. Never had this problem for some reason 
So all form actions are ignoring fields that are inside blocks?
haha yep, unless I’m doing something wrong. Tried a few times to use blocks inside the form just for easier layouting (if that’s even a word) but no dice 
Note that I mostly test by checking the submissions in the backend cause my testserver ain’t got e-mail delivery set up
Someone else had submitted the issues with a video as well: Pro Form Issue Nesting Fields in Blocks
Ohhh! This is a bug only related to the form submissions action! All other actions should consider those fields! Will add a hotfix later on the day 
hi @Daniele I have set up everything to the letter but the counter does not work yet. I will message you privately with the link.
Hmm… what exactly is the problem here?
The plus and minus buttons are not firing. So no increments are happening. I check everything not sure what else.
From where your plus and minus icons are coming? How did you create the logic? Just including the plus and minus UI will not change the value. You need to do this using javascript, for example with the Bricksforge Panel, or following @manc `s way
oh wow…I thought it was your instructions. I got confused in the thread an tried to implement @manc way…
Really sorry about this…How can I find a solution to this?
Sheldon
To find a solution I need to be able to see it It worked on my end so something must be missing, just impossible to tell without more info or access
Item Counter Forms has been resolved many, many thanks to @manc for his patience and help. Very much appreciated sir 
2 Likes