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.

Radio button returns value of "on" in PhoneGap Build app

I have tried JQuery and plain Javascript in every imaginable way to try to get the value of a checked radio button within a PhoneGap Build app.
In the app on both Android and iOS the value comes back as "on" consistently.
The real value does return correctly in any browser via a webpage on desktop and mobile.
Sample input code:
<input type="radio" id="inpt1_1" name="CheckBtn" value="testValue" />
Sample jQuery code:
var selectedValue = $("input[name='CheckBtn']:checked").val();
Any help would be appreciated. Thanks!

Radiobuttons and checkboxes allways return value = on if no value attribute is present.
In the example below you can see it. Maybe your jQuery selector is not correct (maybe there is another radiobutton with this name or something like this)
$(":radio").click(function () {
$("span").text($(":radio:checked").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="inpt1_1">
<input type="radio" id="inpt1_1" name="CheckBtn" value="testValue" /> with value
</label><br>
<label for="inpt1_2">
<input type="radio" id="inpt1_2" name="CheckBtn" /> without value
</label><br>
the value is: <span></span>

Any Change in textbox will automatically check the checkbox

Hi I have coded a Grid view where we have one checkbox and two textbox. My need is that as we make any change in textbox like modify text from 0 to 1, the Checkbox should get automatically checked. This code is in asp.net and this can be done by javascript or Jquery.
Need code to do this activity.

Try this example
Html
<input type="text"/>
<input type="checkbox"/>
Script
$('input[type="text"]').keypress(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
Working demo

This will be Better answer of this question.. I initially debug by help of Manoj. Thanks again.
HTML
<input type="text" id="selector"/>
<input type="checkbox" id="myCheckbox"/>
SCRIPT
$('#selector').change(function () {
$('#myCheckbox').prop('checked', true); // Checks it
alert($('#selector').val());
});

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

jQuery: having radio buttons and a textarea update hidden form fields

Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.

You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});

For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?