I got a web page with some input controls, p.e. for a subtraction.
<table>
<tr>
<td><b>Value 1</b></td>
<td />
<td><b>Value 2</b></td>
<td><b>Result</b></td>
</tr>
<tr>
<td>
<%-- step="0.01" because of Firefox-browser --%>
<input type="number" id="value11" oninput="SubtractionWithParameters(document.getElementById('value11').value, document.getElementById('value21').value, 'result', 2)" step="0.01" />
</td>
<td> - </td>
<td>
<input type="number" id="value21" oninput="SubtractionWithParameters(document.getElementById('value11').value, document.getElementById('value21').value, 'result', 2)" step="0.01" />
</td>
<td>
<input type="number" id="result" step="0.01" />
</td>
</tr>
</table>
For the subtraction i defined the JavaScript function SubtractionWithParameters which calls the function Subtraction.
While entering numbers, dots and/or commas in the input controls "value11" and "value21" the function SubtractionWithParameters is called and calculates the result at once.
//Subtracts the given parameters and displays the result in the input-Control with the given controlname.
function SubtractionWithParameters(value1, value2, resultControlName, decimalNumber) {
decimalNumber = typeof decimalNumber == 'undefined' ? 0 : decimalNumber;
document.getElementById(resultControlName).value = Subtraction(value1, value2).toFixed(decimalNumber);
}
//Subtracts the given parameters and returns the result.
function Subtraction(value1, value2) {
if (isNaN(value1) || value1 == "") { value1 = 0; }
if (isNaN(value2) || value2 == "") { value2 = 0; }
var result = parseFloat(value1) - parseFloat(value2);
return result;
}
Now the problem is that IE and Firefox expecting different inputs for a floatnumber.
IE: 0.36 (with dot)
Firefox: 0,36 (with comma)
When i use Firefox and input in one of my input controls a floatnumber which contains a dot, nothing happens.
How can i handle this in my function Subtraction?
Thanks in advance!
Thanks a lot! Adding ".replace(',','.')" when giving the values to the function helps.
Related
I'm working on a DnD character creator and am trying to increase certain ability scores based on race. I have a checkbox input next to every race that looks like so:
<td>
<input
type="checkbox"
id="dragonbornRace"
onchange="updateRace();"
/>
</td>
<td>Dragonborn</td>
I also already have a section for ability score that looks like this:
<td>
<input
type="number"
value="10"
id="strScore"
onchange="updateMods()"
/>
</td>
My goal is to make it so that when dragonborn checkbox is checked, the strength increases by 2. So far I have this code, but it doesn't seem to work:
function updateRace() {
var strScore = document.getElementById("strScore").value;
if (document.getElementById("dragonbornRace").checked == true) {
strScore = strScore + 2;
}
}
When I go to test, nothing occurs when I check the box. I am probably missing something obvious, but any help would be appreciated!
The reason is that you need to assign the new score value to strScore elememt.
Also,you need to pay attention to use strScore = Number(strScore) + 2; to get the expected result
function updateRace() {
var scoreEle = document.getElementById("strScore")
var strScore = scoreEle.value;
if (document.getElementById("dragonbornRace").checked == true) {
strScore = Number(strScore) + 2;
scoreEle.value = strScore;
}
}
function updateMods(){
}
<table>
<tr>
<td>
<input
type="checkbox"
id="dragonbornRace"
onchange="updateRace();"
/>
</td>
<td>Dragonborn</td>
<td>
<input
type="number"
value="10"
id="strScore"
onchange="updateMods()"
/>
</td>
</tr>
<table>
I am trying to display the value of a input type text for both Upfront_fee and Additional_fee to a Monitory values with 2 decimals.
Neither to.Fixed or parseFloat seems to work here.
<html>
<head>
<script type="text/javascript">
function check() {
parseFloat(document.getElementById("Upfront_fee").value = 10500);
parseFloat(document.getElementById("Additional_fee").value = (document.getElementById("Practice_Qty").value-1)*1266);
}
function setDecimal() {
this.value = parseFloat(this.value).toFixed(2);
}
</script>
</head>
<body>
<table>
<th colspan="4">Quotation Values</th>
<tr><td><label>Practice Numbers:</label></td><td colspan="3"><input type="number" name="Practice_Qty" id="Practice_Qty" min="1" onChange="check();"></td></tr>
<tr><td><label>Service Providers:</label></td><td colspan="3"><input type="number" name="Providers_Qty" id="Providers_Qty" min="1" onChange="check();"></td></tr>
</table>
<hr></hr>
<table>
<tr><th colspan="2">Upfront Pricing</th></tr>
<tr><td><label>Upfront fee</label></td><td><input type="Number" name="Upfront_fee" id="Upfront_fee" min="0.00" max="99999.99"></td></tr>
<tr><td><label>Additional Directory upfront fee</label></td><td><input type="text" name="Additional_fee" id="Additional_fee"></td></tr>
</table>
</body>
</html>
you are just assigning the value 10500 in the check function. Instead, you should assign the value after parsing it and then fixing it to 2 decimal places like this.
function check(){
document.getElementById('box').value = parseFloat(document.getElementById('box').value).toFixed(2)
}
<input id="box" type="number" name="Practice_Qty" id="Practice_Qty" min="1" onChange="check();">
Note: Run the snippet, change the value in the textbox and see the result
Just like you are doing in setDecimal function but you are using this which is not pointing to your DOM element I guess. Use it like this
document.getElementById('your input id').value = parseFloat('your value').toFixed(2)
I am iterating a list in jsp file using struts 2 tag as follows.
<%# taglib prefix="s" uri="/struts-tags"%>
<head>
<s:head theme="ajax" debug="true" />
<script type="text/javascript">
function add(x) {
document.insertForm.action="load.action?mode=add&index="+x;
document.insertForm.submit();
}
function del(x) {
document.insertForm.action="load.action?mode=delete&index="+x;
document.insertForm.submit();
}
function copy(x) {
document.insertForm.action="load.action?mode=copy&index="+x;
document.insertForm.submit();
}
function validateDate(date) {
for(var i=0; i<date.length; i++) {
var x = date[i].value;
if(x == null || x == "") {
alert("please enter the date");
date[i].focus();
return false;
}
}
}
</script>
</head>
<body>
<s:form action="insert" name="insertForm">
<table border="1">
<tr>
<th>CHANNEL_ID</th>
<th>TASK</th>
<th>DATE</th>
<th>HOURS</th>
</tr>
<s:iterator value="timeTrackerRecords" status="stat">
<tr>
<td align="center"><s:select name="timeTrackerRecords[%{#stat.index}].channel_Id"
list="channelList" value="%{channel_Id}" theme="simple"
cssStyle="width:90px;">
</s:select></td>
<td align="center"><s:select name="timeTrackerRecords[%{#stat.index}].task" list="taskList"
value="%{task}" theme="simple" cssStyle="width:90px;">
</s:select></td>
<td><s:datetimepicker name="timeTrackerRecords[%{#stat.index}].date"
value="%{date}" displayFormat="yyyy-MM-dd" theme="simple" />
</td>
<td align="center"><s:textfield name="timeTrackerRecords[%{#stat.index}].hours" theme="simple"
value="%{hours}" cssStyle="width:90px;" ></s:textfield></td>
<td>
<input type="submit" value="Add" onclick="add('<s:property value="%{#stat.index}" />')" />
</td>
<td>
<input type="submit" value="Del" onclick="del('<s:property value="%{#stat.index}" />')" />
</td>
<td>
<input type="submit" value="Copy" onclick="copy('<s:property value="%{#stat.index}" />')" />
</td>
</tr>
</s:iterator>
</table>
<br>
<s:submit value="Insert" align="left" onclick="return validateDate(document.insertForm.date)"/>
</s:form>
</body>
date validation is not working with below line of code. Inside the validateDate(date) function date is coming undefined.
<td><s:datetimepicker name="timeTrackerRecords[%{#stat.index}].date"
value="%{date}" displayFormat="yyyy-MM-dd" theme="simple" />
</td>
date validation is working with below line of code.
<td>
<s:datetimepicker name="date" value="%{date}" displayFormat="yyyy-MM-dd" theme="simple" />
</td>
The only difference is declaring date field as follows.
name="date"
name="timeTrackerRecords[%{#stat.index}].date" (is used to pass the form data(date) to action class)
Requesting you to please help me on this.
Thanks in advance.
While changing the name of the date-picker, you don't change the parameter being passed to the validate function
onclick="return validateDate(document.insertForm.date)"
Just change this appropriately, according to the name of the datepicker.
Solution 2
Another good style, is to give the date-picker an id and use that id in the validate function to retrieve the value of it, something like
document.getElementById('mydate').value; for datepicker :
<s:datetimepicker id="mydate" ...>
and hence, the function can change to
function validateDate() {
var date=document.getElementById('mydate').value;
alert(date);
for(var i=0; i<date.length; i++) {
var x = date[i].value;
if(x == null || x == "") {
alert("please enter the date");
date[i].focus();
return false;
}
}
}
Update Solution 3
Since we are having multiple elements and the validation should work on all of them, so we have to put up a class for identifying those elements and then see if any of those is empty or null. For this we have to include jquery.
<head>
<script src="http://code.jquery.com/latest.js"/>
</head>
<s:datetimepicker class="validate-date" .../>
<s:submit onclick="return validate()" .../>
<script>
function validate(){
var success=true;
$(".validate-date").each(function(element){
var x = element.val();
if(x == null || x == "") {
alert("please enter the date");
date[i].focus();
success=false;
break;
}
});
return success;
}
</script>
The above code is UN-TESTED, but I'm sure something like that will work fine.
I came across this problem. It adding numbers using parseFloat or parseInt.
IF textbox1 value is 4 and textbox2 value is 2 then i got output as (see script)
My doubt is why in addition alone
parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())
gives correct value but
parseFloat($('#txt1').val() + $('#txt2').val())
is not giving correct value whereas
parseFloat($('#txt1').val() - $('#txt2').val()),
parseFloat($('#txt1').val() / $('#txt2').val()),
parseFloat($('#txt1').val() * $('#txt2').val())
are giving correct value.
Its simple but i couldn't find solution.
=====jQuery
function Calculate() { //--> Output
$('#lbl1').html(parseFloat($('#txt1').val() + $('#txt2').val())); //--> 42
$('#lbl2').html(parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())); //--> 6
$('#lbl3').html(parseFloat(4 + 2)); //--> 6
$('#lbl4').html(parseFloat($('#txt1').val() - $('#txt2').val())); //--> 2
$('#lbl5').html(parseFloat($('#txt1').val() * $('#txt2').val())); //--> 8
$('#lbl6').html(parseFloat($('#txt1').val() / $('#txt2').val())); //--> 2
}
=====HTML
<table>
<tr>
<td>
<input type="text" id="txt1" />
</td>
<td>
<input type="text" id="txt2" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Calculate" onclick="Calculate()" />
</td>
<td>
<label id="lbl1">
</label>
|
<label id="lbl2">
</label>
|
<label id="lbl3">
</label>
|
<label id="lbl4">
</label>
|
<label id="lbl5">
</label>
|
<label id="lbl6">
</label>
</td>
</tr>
</table>
$.val() returns a string value.
So in your first example you convert both returned strings to numbers and the calculation is fine.
If you use parseFloat($('#txt1').val() + $('#txt2').val()) the + does not work as the arithmetic operator, but as a string concatenation. So you concatenate both strings and convert them afterwards, which gives a wrong result.
The examples using - will work, as there is no string operation using - and by thus alls values get implicitly converted to a number before the operation is applied.
$('#txt1').val() + $('#txt2').val() it gives String value
you can not use - , * , /operator on strings
parseFloat($('#txt1').val()), parseFloat($('#txt2').val()) returns numbers not strings
I have a table which is generated from data from a datbase. It might have 3 rows and 2 cells.
Each cell has a checkbox in it and 2 hidden form fields.
So, a typical row might look like this:
<tr>
<td>
<input type="checkbox" id="Assign" onclick="setchanged(this);">
<input type="hidden" id="hfChanged" value="0">
<input type="hidden" id="hfAgentID value="272">
</td>
<td>
<input type="checkbox" id="Assign" onclick="setchanged(this);">
<input type="hidden" id="hfChanged" value="0">
<input type="hidden" id="hfAgentID value="324">
</td>
</tr>
The requirement is - when a checkbox is clicked, it should set the value of the hfChanged hidden field in the same cell to 1.
This works in Internet Explorer:
function setchanged(me)
{
me.parentElement.all("hfChanged").value = 1;
}
How can I set the value of hfChanged in Standards Compliant browsers like Firefox or Chrome?
Use repeating classes instead of IDs
<tr>
<td>
<input type="checkbox" class="Assign" onclick="setchanged(this);">
<input type="hidden" class="hfChanged" value="0">
<input type="hidden" class="hfAgentID value="272">
</td>
<td>
<input type="checkbox" class="Assign" onclick="setchanged(this);">
<input type="hidden" class="hfChanged" value="0">
<input type="hidden" class="hfAgentID value="324">
</td>
</tr>
Then change your function to select by class name, and iterate the result.
function setchanged(me) {
var changed = me.parentNode.querySelectorAll(".hfChanged");
for (var i = 0; i < changed.length; i++) {
changed[i].value = 1;
}
}
The .querySelectorAll method will not work in IE6/7 if that matters to you. If it does, it's not hard to adjust a little for greater compatibility.
I see now that there's only one in the same cell. In that case, you can do this instead.
function setchanged(me) {
me.parentNode.querySelector(".hfChanged").value = 1;
}
You can use the following function to find out the next element as given in this answer
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
Working demo here.
Code:
function setchanged(me){
next(me).value = me.checked == true ? 1 : 0;
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
This code is not tested, but could give you a starting point.
$("input[type=checkbox]").change(function(){
$(this).siblings(".hfChanged").prop("value", this.checked ? 1 : 0);
});
Note: Change id to class.