Develop Reference

Can't get values of input with js

I have a inputs in loop using thymeleaf, I need when hover each iteration get the value and calculate sum
<tr th:each="person : ${persons}">
<td th:text="${person.first_name}"></td>
<td th:text="${person.last_name}"></td>
<td th:text="${person.phone}"></td>
<td><input id="age" class="form-control"
type="text" name="age" th:field="*{ages}">
</td>
</tr>
Total : <input type="text" name="sum" id="sum"/>
My js script :
<script type="text/javascript">
$(document).ready(function(){
$("#age").each(function() {
$(this).on('input', function(){
calculateSum();
});
console.log("sum :"+sum);
});
});
function calculateSum() {
var sum = 0;
$("#age").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>
My code give me on total only the first value (like it doesnt work on 2nd iteration), i dont know why !!

Ids should be unique on a page; as such, id selectors usually only return the first element with that id. You should use classes instead.
<input class="age" class="form-control" type="text" name="age">
Your selectors should then become:
$(".age").each(function(){
// ...
});

Fix JS code: Append multiple values out of checkboxes to url

I found this code that replaced the link text (= "Show") by the checked checkbox values. Now, I am looking for a code that appends/removes the checked/unchecked values to the link url itself.
function calculate() {
var arr = $.map($('input:checkbox:checked'), function(e, i) {
return +e.value;
});
$("[href$='feature=']").text('the checked values are: ' + arr.join(','));
}
calculate();
$('div').delegate('input:checkbox', 'click', calculate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>
<div>Show</div>
Show
Thank you very much for your help, guys!

I would use an .each() loop instead of $.map()...
Also, since you wish to change the href... And that it is used with an attribute selector, I would save the element in a variable before the href changes. And the same for the href "base" value itself. Because on second click, the href will not end in feature=.
So here is a working demo:
function calculate() {
var arr = [];
$('input:checkbox:checked').each(function(i,v) {
arr.push(v.value);
});
// The array in console
console.log(arr);
// Join it has a string
var arr_string = arr.join(",");
// Use the string in the link's text AND the href
link
.text('the checked values are: ' + arr_string)
.attr('href', link_href_base + arr_string);
// The link's href in console
console.log(link.attr("href"));
}
// Variables that won't change
var link = $("[href$='feature=']");
var link_href_base = link.attr("href");
calculate();
$('div').delegate('input:checkbox', 'click', calculate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>
<div>Show</div>

Clone a Textarea Field with its Value using Javascript

I have the code below, ready without errors. My problem is that, when you type a value in the TEXTAREA field the value does not copy itself along the clones in spite of what happens with the INPUT field. Try it your self below.
Thanks
//JAVASCRIPT PART
function insRow(row)
{
i=row.parentNode.parentNode.rowIndex;
var x=document.getElementById('myTable');
var new_row = x.rows[i].cloneNode(true);
x.rows[i].parentNode.insertBefore(new_row, x.rows[i].nextSibling);
}
<table id="myTable">
<tr>
<td><input size=10 type="text" name="myInput[]" value = ""/></td>
<td><textarea name="myTextArea[]" type="text" cols="10" rows="5" type="text" ></textarea></td>
<td><input type="button" id="addInv" value="Add" onclick="insRow(this)"/></td>
</tr>
<table>

wellll did you try adding it..
var x=document.getElementById('myTable');
var val = x.getElementsByTagName('textarea')[0].value;
var new_row = x.rows[i].cloneNode(true);
new_row.getElementsByTagName('textarea')[0].value = val;
x.rows[i].parentNode.insertBefore(new_row, x.rows[i].nextSibling);

use onblur to multiplicar <g:field> grails

hi i want to multiply the values ​​of my box for a decimal value and display it in other textbox with onblur.
<script type="text/javascript">
$(document).ready(function () {
$("#Agregar") {
var pred = $("#predis").val();
var result = parseFloat(pred) * 0.15;
$("#pagoTotal").val(result);
});
});
</script>
The problem is that the function does nothing
<g:field name="predis" id="predis" type="number" onblur="Agregar()" value="${predisInstance.predis}" required=""/>
<g:field name="pagoTotal" id="pagoTotal" type="number" value="${pagoTotalInstance.pagoTotal}" required=""/>

Actually you don´t have a grails problem. It is a javascript problem. Get the inputs by name.
(function($){
$(document).ready(function(){
$('input[name="predis"]').on('blur', function(){
agregar($(this));
});
});
function agregar(predis){
var predis = $(predis);
var pred = predis.val();
var result = parseFloat(pred) * 0.15;
$('input[name="pagoTotal"]').val(result);
}
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--The <g:field ...> tags would parse to something similar to the following hmtl -->
<input name="predis" id="predis" type="number" value="0" required=""/>
<input name="pagoTotal" id="pagoTotal" type="number" value="0" required=""/>

Grid with multiple input fields per row

I have a "grid" with several input fields per row. Lets say each input field represents a day of the week.
html:
<table id="grid">
<tr>
<td><input class="fri" type="text" value="foo" /></td>
<td><input class="mon" type="text" value="bar" /></td>
<td><input class="tue" type="text" value="baz" /></td>
<td><input class="wed" type="text" value="x" /></td>
<td><input class="thu" type="text" value="y" /></td>
</tr>
...
jQuery:
$('#grid').on('change', '.fri', function () {
var value = $(this).val();
//do something
});
$('#grid').on('change', '.mon', function () {
var value = $(this).val();
//do something
});
// And so on...
There can be any number of rows, all having the same fields.
I made a working fiddle of what I am trying to do.
However, I feel I am repeating myself a little too much (with the jQuery) and I was wondering if there is a way to do the above more concisely (preferably using jQuery).

You can rather use element selector instead of using individual IDs and then binding them:
$('#grid').on('change', 'input:text', function () {
var value = $(this).val();
//do something
});
Also if you have other textboxes in same table which you don't want to target then use multiple class selector:
$('#grid').on('change', '.fri,.mon,.tue', function () {
var value = $(this).val();
//do something
});

You could use event.target like this:
$('#grid').on('change', function (e) {
alert(e.target.value);
});
This would be the only jQuery you need.