Text input element output to text

Design help Custom code
1

I’m trying to build an interactive feature on my pricing page.

50
501127×701 51.4 KB
On the “Pay as you go” plan I would like to have a text input module where a user can type in an example order value and the text block to the right would update to show what the price would be for a delivery (prefix = £ ((output*0.025)+4)) . I’ve been messing with this for a couple of hours now and still no progress due to my limited knowledge of jQuery or JS, etc.

Hopefully, someone out there can help!

Thanks,

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You’ll need to find some 3rd party custom code for this. Theres no way I know of to do this in Webflow.

3

@DFink I’ve managed to find a previous post with a solution for text mirroring (Mirror input field to a text field on keyboard strokes - #2 by Noah-R), however, I now need to add a custom formula to add to the text output to display a price rather than just mirror.

<script>
var inputBox = document.getElementById('orderValue');

inputBox.onkeyup = function(){
document.getElementById('deliveryPrice').innerHTML = inputBox.value;
}
</script>

Next problem after that would be to format the input as a financial value i.e. currency symbol “£”, decimals and 000,000 comma separators.

4

Good luck. I’m not a coder so I can’t really help with this. Up to the forums if anyone is able to help.

5

If anyone is looking for a similar solution, here it is:

<script>
var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'GBP' });

elOrderValue.addEventListener('keyup', _ => {
    let curVal = elOrderValue.value; 

    let curValFloat = parseFloat(curVal);
    if (isNaN(curValFloat)) {
        elDeliveryPrice.innerHTML = '';
        return;
    }

    elDeliveryPrice.innerHTML = formatter.format((curValFloat * 0.025) + 4);
});
</script>