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.

William Hibberd · Answer

Alpine JS or the Sprig plugin will help with this.

foamcow · Answer

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?

How to get an input value without refreshing with twig?

2 Answers

Add your own answers!

Ask a Question