How to get an input value without refreshing with twig?

Question

One way to read a dynamically inserted value is to refresh the page and get it in a twig variable through the url, something like this:

{% set amount = craft.app.request.getQueryParam('amount') %}

But I am looking for a solution to get a value inserted into an input without refreshing the page, of course, after sending the form (i thing). Do you know if thats possible? Maybe with javascript.

Answer 1

Yes you would do this using Javascript so is a little outside the scope of this StackExchange site but here's something that might help get you moving...

Getting the value is easy with something like

document.querySelector('#myElement').value

You'd need to trigger that in some way, perhaps when the user leaves the field. So (assuming your input has an ID of "myElement"...

document.querySelector('#myElement').addEventListener('blur', function(el){
    let theValue = el.value
})

What this is doing...

Get the element on the page with an ID of 'myElement'

Adds a listener to it for the 'blur' event (when the user leaves the element)

When that happens it executes a function and passes the element into it

Sets a variable (theValue) with the value of the element.

You now have a javascript variable named 'theValue', but what do you want to do with it?

Answer 2

Alpine JS or the Sprig plugin will help with this.