I am saving data of how long users hold the buttons when they are writing. Now the data is saved in
const holdingTimes, but I want to add any button in html like SAVE and then send data from js to my JavaController.
html:
<div class="container">
<p>Write some text:</p>
<form>
<div class="form-group">
<textarea class="form-control" rows="5" id="myInput"></textarea>
</div>
</form>
</div>
js:
<script>
var pressedTime; var releasedTime; var holdingTime;
const holdingTimes = [];
document.getElementById("myInput").addEventListener("keydown", pressedFunction);
document.getElementById("myInput").addEventListener("keyup", releasedFunction);
function pressedFunction() {
pressedTime = Date.now();
}
function releasedFunction() {
releasedTime = Date.now() ;
holdingTime = releasedTime - pressedTime;
holdingTimes.push(holdingTime);
}
</script>
Any ideas how to build JavaController and SAVE button?
JavaController looks like:
@Controller
@Scope(WebApplicationContext.SCOPE_SESSION)
@RequestMapping("/getValues")
public class JavaController {
int [] holdingTimes;
@RequestMapping("/save")
public String getData(int[] holdingTimesFromJs, Model model) {
holdingTimes = holdingTimesFromJs;
return "redirect:/";
}
}
On click of button, call a Javascript function which will send an Ajax POST request to the Controller.
JavaScript Code:
const holdingTimes = [];
holdingTimes.push(10);
holdingTimes.push(20);
holdingTimes.push(30);
$.ajax({
'url' : "/test-url",
"data" : JSON.stringify(holdingTimes),
'method' : "POST",
'contentType' : 'application/json'
}).done(function(data) {
// handling code for success response
});
Spring Controller:
@PostMapping("/test-url")
public String testArrayUpload(@RequestBody int[] times) {
//your logic goes here
return "test";
}