We Keep Coding

How can i run an <input type="number"> onchange event using thymeleaf?

Hello,
i have a little problem that maybe you could help me with. I searched the internet for quite a long time but i didn't find any answers.
I have a little web shop using Spring and Thymeleaf. My task is now to implement the option to change the quantity of a cart item inside the cart. This value is stored in a variable ${item.quantity}.
So in conclusion if I press "up" or "down" on the input field, the item in the cart should change its quantity and the total price of all cart items should be evaluated again.
I used an <input type="number"> combined with an onchange event running a javascript function, but all my tries went wrong.
Here is the code snippet of cart.html template:
<input
type="number"
onchange="change(this.value)"
min="1"
max="5"
th:value="${item.quantity}"
>
And this is my javascript code:
<script th:inline="javascript">
/*<![CDATA[*/
function change(data) {
var quantity = /*[[${item.quantity}]]*/ data;
location.reload(false);
}
/*]]>*/
</script>
but this doesn't work.
Hopefully you understand what I mean and someone can help me, because I really don't have any idea how to else do this.

You need to send the changed quantity back to the server. As a first step do it without JavaScript. Use a simple form, for example:
<form action="/change-quantity">
<input type="hidden" name="itemId" th:value="${item.id}">
<input type="number" min="1" max="5" th:value="${item.quantity}">
<input type="submit" value="Update">
</form>
Now you need to write a POST controller for the path /change-quantity that looks up the item by the ID, change it's quantity and finaly redirects back to the page you came from.

Passing form variables from one page to another

I have an existing app http://www.successcalculator.com. Currently, it functions all on one page but I have been asked to change it to a multipage flow. I am having trouble passing data from one page to the next. I'm more of a hobbyist developer so programming is not my forte.
Here's a sample of the HTML code:
<form>
<output id="averageJobsOut">30</output>
<input type="range" id="averageJobs" value="30" min="0" max="100" step="5" oninput="averageJobsOut.value = averageJobs.value" required>
<output id="jobValueOut">30</output>
<input type="range" id="jobValue" value="30" min="50" max="2000" step="10" oninput="jobValueOut.value = jobValue.value" required>
<output id="yearsOpenOut">3</output>
<input type="range" id="yearsOpen" value="3" min="1" max="20" step="1" oninput="yearsOpenOut.value = yearsOpen.value" required>
<input type="submit" onSubmit="calculateAll()"></input>
</form>
Here is a sample of the JavaScript:
function calculateAll() {
var averageJobs = +document.getElementById("averageJobs").value;
var jobValue = +document.getElementById("jobValue").value;
var yearlyRev = parseInt((averageJobs * 50) * jobValue);
document.getElementById("yearlyRev").value = yearlyRev + " Yearly Revenue";
}
I would like the app to gather peoples input as it does now and on submission of the form I would like it to redirect people to results.html where the form results would be available.
I have adding the following JavaScript to the calculateAll() function but can't seem to get the data to move over. I also tried some basic PHP GET & POST functions in the form but could only bring over form input not the calculations.
var averageJobs = document.getElementById("averageJobs").innerHTML;
localStorage.setItem("averageJobs", averageJobs);
window.open("results.html","_self");
Any assistance or insight would be appreciated. Thanks in advance.

30
30
3
Use form action with php, instead of javascript.

Use form method to pass data and catch them via a php page. You can use POST to hide data and GET to show data that you are passing via url. For this POST is preferrable.
<form action="action_page.php" method="POST">
from the php file you can catch the data by creating your own variables and using this
$var1 = $_POST('Name_of_the_Controller');

Getting a value from jquery mobile slider

This is driving me crazy. I'm working with jquery mobile 1.4.5 and firebase and I have this code:
<html>
<body>
<div>
<label for="size">Stroke thickness:</label>
<input type="range" name="size" id="size" value="5" min="1" max="100" data-highlight="true">
</div>
<script>
//Keeps updated with the current size in firebase
currentSize.on("value", function(snapshot)
{
siz = snapshot.val();
$("#size").val(siz);
$("#size").slider("refresh");
});
$("#size").on('slidestop', function(event)
{
var a = $("#size").val();
currentSize.set(a);
});
</script>
</body>
</html>
As you can see I update the value of the slider from firebase. This works fine.
The problem is when I try to set it. It simply doesn't work and I've tried many ways, unless I put the data-role="none" attribute, then it works like a charm, but of course without the nice mobile theme.
I'll really appreciate any help.

How to update html page for all viewers?

Basically I want to update a page with the name of the last person to submit a form. I have the following code but I can only get it to update on one device. When the page is viewed form another device it doesn't have the updated name.
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
<input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();"/>
</form>
<p id="last"></p>
<script>
function updateTable(){
document.getElementById("last").innerHTML =document.forms['leds'].elements[3].value;
alert(document.forms['leds'].elements[3].value+", You are about to change the Lights! Beware that there is about a 30 second delay on the live stream.");
}
</script>
</html>

When you use javascript like this (to set a value for an element, for example) you are only changing the value on the one workstation viewing the page.
You would need some kind of datastore on the server that the web browser can push data to and retrieve data from. For example, this could be in-memory on the server (short-term and volatile) or a database management system (long term persistence).

HTML5 localStorage populate form onload

I am following the example in the O'Reilly "Building iPhone Apps with HTML, CSS and Javascript," I want the values entered from a form to populate after the app closes and reloads, similar to a php 'sticky form.'
The only aspects I changed from the example is that saveSettings is called on submit, and here I have it called on unload (previously on input blur).
Load settings is called on document ready rather than submit.
pageInit is not working though I have jquery mobile installed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$(document).ready(function(){
$(window).unload(saveSettings);
loadSettings();
});
function loadSettings() {
$('#monthly-income').val(localStorage.income);
$('#saving-per-month').val(localStorage.saving);
$('#current-age').val(localStorage.age);
}
function saveSettings() {
localStorage.age = $('#current-age').val();
localStorage.saving = $('#saving-per-month').val();
localStorage.income = $('#monthly-income').val();
}
</script>
</head>
<body>
<div data-role="content">
<div data-type="horizontal" data-role="controlgroup">
Input
Output
</div>
<input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>
<input type="number" min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>
<input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>
</body>
</html>

1) You could place your page in internet, at best providing QR code to fast load on mobile (free QR generator here), so everyone could easily test
2) Did the browser settings require to grant the domain the rights to store values in local storage? If so, onunload there's no place to accept such request. Place in your ready function one storage instruction to test
3) unload is a bit unreliable (example - browser crash). Have you considered saving values on onblur on inputs? When in large textareas, saving the value in timer, even if user is still editing, is practicised.
4) This question considers also problems with unload function. Maybe future answer to this question will solve your problem?