Develop Reference

How to print the values in the same input text field using JS

I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(h+w+g+t);
document.getElementById('result').innerHTML=total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2"id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<!--
<p
id="result">
</p>
-->
<button id="btn" onClick="JS()">Calculate</button>

There are two keys to resolving your issue:
Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
Set the value of the input element, not the innerHTML. If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText.
See example here:
function JS() {
var h = +document.getElementById('h').value;
var w = +document.getElementById('w').value;
var g = +document.getElementById('g').value;
var t = +document.getElementById('t').value;
let p_result = document.getElementById('p_result');
var total = (h + w + g + t);
document.getElementById('result').value = total;
p_result.innerText = total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2" id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<br>
<p id="p_result" style="color:red;"></p>
<br>
<button id="btn" onClick="JS()">Calculate</button>

function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(Number(h)+Number(w)+Number(g)+Number(t));
document.getElementById('result').value =total;
}
.value instead of .innerHTML
also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1 , 2 , 3 , 4 without converting to number will be 1234 if you convert to number will be 10

HTML Input thousand seperator

I have a input of type text in a HTML form.
<from>
<input type="text" name="price" value="20000">
<button type="submit">Save</button>
</form>
I want the input text to be displayed comma separated on UI and when the form is submitted, I want the actual value.
If I want to write in javascript as
$('form').serialize()
then I should get the value for price as 20000 and not 20,000
Is this possible without writing any methods in javascript which will parse the comma seperated string to a number?

Not possible without javascript methods...Try to use parseInt() and toLocaleString() method here...
var inputValue = parseInt($("input").val());
$("input").val(inputValue.toLocaleString());
console.log(inputValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="price" value="20000">
<button type="submit">Save</button>
</form>

var number=20000;
document.getElementsByName("price")[0].value = number.toLocaleString();
function getValue()
{
number = +document.getElementsByName("price")[0].value.replace(',', '');
console.log(number);
}
<from>
<input type="text" name="price">
<button type="submit" onclick="getValue()">Save</button>
</form>
For more Details
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

you can achieve like this in php.
$output = 49995;
$followers = number_format( $output , 0 , '.' , ',' );
echo $followers;
I have given js fiddle like Fiddle Demo

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=""/>

calculate division of fields dynamically using Jquery or Javascript

I'm "trying" to figure out how to calculate a division between to fields dynamically to display in another field, the thing is, all examples I've seen are sums, and those used something like this: $('#field').each(function(){....});.
I can't do that because there's no way of know which is the dividend and which is the divisor. I tried using "bind", to try to attach the function to the field. It didn't work.
Also tried putting "onChange="CalcularSaldo()" on the input field; no luck, but mainly because i'm pretty sure my function is wrong:
<script type="text/javascript">
$(document).ready(function() {
function calcularSaldo() {
var costo = document.getElementById("costo_ad").value;
var vida = document.getElementById("vida_util").value;
document.getElementById("saldo_dep").value = costo / vida;
}
});</script>
Inputs:
<label for="costo_ad">Costo de Adquisicion</label>
<input name="costo_ad" type="text" id="costo_ad" class="round default-width-input" />
<label for="vida_util">Vida Util</label>
<input name="vida_util" type="text" id="vida_util" class="round default-width-input" />
<label for="saldo_dep">Saldo a Depreciar</label>
<input name="saldo_dep" type="text" id="saldo_dep" class="round default-width-input" disabled />
and the function should be something like this:
saldo_dep = costo_ad / vida_util

suppose we have the following fields
<input type="number" id="field1">
<input type="number" id="field2">
<span id="label"></span>
so, you'd want to attach the jquery function to some action on the fields, like after the user finishes entering text in either of the boxes
$("#field1, #field2").keyup( function(){
var n1 = $("#field1").val();
var n2 = $("#field2").val();
var result = n2/n1;
$("#label").text(result);
});
Example is in jsFiddle... http://jsfiddle.net/A3qat/5/

Separate a string around a certain character

Context: I have a text field in my form that is meant for entering an amount of money. I want variables for dollars and cents. Can javascript find the location of the decimal point, and separate it into two integers?

"$111.01".split('.'); yields ['$111', '01']
Then it's a matter of cleaning that up (.replace) and coercing them into ints (parseInt).

here i such Example:
http://jsfiddle.net/9FDrN/1/
HTML:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<input type="text" id="amount" value="$100.01">
<input type="text" id="dollars" value=""><br/>
<input type="text" id="cents" value=""><br/>
​
JS:
$(document).ready(function(){
var amount_val = $("#amount").val();
var out = amount_val.split(".");
$("#dollars").val(out[0].replace("$",""));
$("#cents").val(parseInt(out[1],10));
});​