XF 2.2 Increments of 10/20 on number box

[mjda]

So I'm wanting to add buttons that will allow members to add larger amounts to the XF number box on a form. I've got the buttons added to the page, but I'm wondering if someone can help me with the JS required to make them work? I have no idea where to even start.

Here's what the form looks like. When they click on +10 or +20 I want it to increase the number in the box by that amount.

Any help on this would be much appreciated.

 

[asprin]

You can use the "step=10" attribute on the number box so that each time they click +, number get increased by 10. Of course this way you can only use one step and will be fixed.

 

[Chris D]

Something like this should work:

const numberInput = document.querySelector('#numberInput') // get the number input

const step10 = document.querySelector('#step10') // get the +10 button
const step20 = document.querySelector('#step20') // get the +20 button

if (numberInput && step10)
{
    // increment by 10 when clicked
    step10.addEventListener('click', () =>
    {
        numberInput.stepUp(10) // this assumes the step value is 1, and clicking the +/- buttons increments/decrements by 1, if step value is 10 then change this to numberInput.stepUp()
    })
}

if (numberInput && step20)
{
    // increment by 20 when clicked
    step20.addEventListener('click', () =>
    {
        numberInput.stepUp(20) // this assumes the step value is 1, and clicking the +/- buttons increments/decrements by 1, if step value is 10 then change this to numberInput.stepUp(2)
    })
}

 

[mjda]

Something like this should work:

Yes, thank you Chris! I've got this working perfectly now.

 

[mjda]

Ok, so I may have gotten a little ahead of myself thinking this worked. It does, but not how I thought it might. I use this is an overlay form on a page to edit different items. If I open up one of the edit forms, then close it, then open another, it doesn't work. I'm guessing because at that point the numberInput is already pointing to the first one that opened.

I guess I'm needing something that works dynamically.

 

[Chris D]

Yes. My example was a little simplified and it uses IDs which have to be unique but if you’re loading multiple per page or have it opening in separate overlays then it can cause this.

What you probably want to do is write the code in such a way that targets every number box but the code binds the click event to the closest +10/+20 buttons.

Ideally you’d extend the existing XF.NumberBox handler in JS which might make this easier.

On my phone now so difficult to give a more specific example but hopefully that makes sense.

 

[mjda]

Ideally you’d extend the existing XF.NumberBox handler in JS which might make this easier.

On my phone now so difficult to give a more specific example but hopefully that makes sense.

This is what I'm looking into right now but knowing almost nothing about JS doesn't help.

I'm sure I'll be able to figure it out, though, now that I know I'm on the right track. Thanks again!

 

[Chris D]

This post by @Jeremy P goes into a little some of the ways you can extend our core JS code:

Post in thread 'Extending JS function'
https://xenforo.com/community/threads/extending-js-function.144830/post-1484377

 

[mjda]

I was able to extend the JS. I have it so that it will successfully build the buttons for me, and it'll bind the click. However, I can't get it to go up by 10.

This will work for increasing the number by 1:

stepButtonClick: function(e)
{
    this.step('up');
}

But this will not:

stepButtonClick: function(e)
{
    this.stepUp('10');
}

It gives me an error saying this.stepUp is not a function. I'm not sure why that is considering the code you gave me earlier seemed to work fine using numberInput.stepUp(10).

 

[Jeremy P]

The stepUp method is on HTMLInputElement, whereas this refers to the handler object itself. You can get the input from the handler object with this.$textInput. You'd probably want to use this.$textInput.stepUp(20) in your event handler.

 

[mjda]

That didn't work either. It gave me the error this.$textInput.stepUp is not a function. However, I was able to make it work with this:

stepButtonClick: function(e)
{
    this.newStep($(e.target).data('step'));
},

newStep: function(step)
{
    var $textInput = this.$textInput,
        $value = parseInt($textInput.val());
    
    $textInput.val($value + step);
}

 

[Jeremy P]

Oops, should have said this.$textInput[0].stepUp(20) to account for jQuery wrapping the node. In any case, if it already works...

 

[mjda]

Oops, should have said this.$textInput[0].stepUp(20) to account for jQuery wrapping the node. In any case, if it already works...

Yep, that works too! I'll leave that just so I can delete my other function. Thank you for your help! The good news is that I did learn a little bit about JS today. Again, thank you to you and Chris for the help!