I'm sure this is basic stuff but I'd like any text input that's left blank to have a value of zero so it can still be included in a function and not mess with the final sum of the equation.
At the moment I'm just setting <input type="text" id="id" value="0"> since nothing will be divided by a var value = document.getElementById("id"); but I don't want to see the zeros in the text boxes.
Is there an better way to not include empty inputs in an equation?
You can use the || operator along with a default value to exclude empty text boxes (or none existent ones) all in one line:
var value = document.getElementById("id").value || "0";
Or, if you want an integer value (since it looks like you're going to do calculations):
var value = +document.getElementById("id").value || 0;
Dont set the value on the input. Don't use a placeholder either it will show in the input.
var value = document.getElementById("id").value;
if (value !== "") {
//use it here
}
Since you're searching for a numeric value to be used in a equation, you can just do all the calculations internally to avoid displaying those values in the inputs, for example:
var value = parseInt(document.getElementById("id"));
if(isNaN(value)){
value = 0;
}
You just first parse the result to int (or float, any type that works for you), then you verify if it's a valid number, and if not, then you just assign it a value of zero. That way you can use it in your equation and you will not need to display that zero in the input.
Related
Is there any smart, minimalistic way to always show the prefix (positive, negative) of a number in a HMTL input field? (e.g. +1, 0, -1)
I have only found s solution for PHP:
How to prefix a positive number with plus sign in PHP
I have to use <input type="text"> since there are different implementations for text=number in different browsers: Localization of input type number
Why am I doing this?
I have an input field that shows the percentage that can be added (or subtracted) to a certain value.
Basevalue: 10
Mofification %: +10
Results: 11
The easiest way would be using some basic javascript. Add a script at the end of your HTML page (before the body closing tag) then give to the input an id, for example prefixedInput. Then you can write your little script
var inputField = document.getElementById("#prefixedInput");
var inputFieldValue = inputField.value;
if (inputFieldValue > 0) {
inputField.value = "+" + inputFieldValue;
}
if (inputFieldValue < 0) {
inputField.value = "-" + inputFieldValue;
}
Now, that works in a way that isn't really useful because this function will be executed just one time when the page will load, so if you have assigned to your input a value, this will be prefixed with its sign. However if you want to bind this behaviour to some actions (e.g. prefixing the value even if the user inserts the value after the intial page load) you will be forced in using event listeners.
Hopefully I get this format right. I know this is a newbie question and probably pretty obvious but I am confused on how to check these fields. I have two input fields on a JSP file:
<input id="CMDScheduleNumber" type="number" class="textsmall" maxlength="5"
onKeyPress="return numbersonly(this, event)"/>
<input id="CMDContractYear" type="number" class="textsmall" maxlength="4"
onKeyPress="return numbersonly(this, event)"/>
I have a function in a script called "searchEFT" that is checking if either the schedule number or contract year is populated then both must be populated.
<script type="text/javascript">
//function for onchange
$(document).ready(function () {
$("#searchEFT").click(function () {
var Cmd_Sched_Number = document.getElementById("CMDScheduleNumber");
var Cmd_Contract_Year = document.getElementById("CMDContractYear");
var Cmd_Status = document.getElementById("CMDSchedStatus");
var Cmd_Creation_Date = ocument.getElementById("CMDCreationDate");
if (Cmd_Sched_Number == "") {
If(Cmd_Contract_Year !== "")
alert("Schedule Number and EFT Contract Year must be both populated");
return;
}
else if (Cmd_Sched_Number == "") {
alert("Schedule Number and EFT Contract year must be both populated");
return;
}
When I tried to do a debugger if the Cmd_Sched_Number field the value is shown as "" but the valueasnumber is shown as 'NaN'. So when I do a check, should I check it was "" or check it as numeric with isNaN and/or IsNull?
Thanks for the help
var Cmd_Sched_Number = document.getElementById("CMDScheduleNumber");
Gets the Element.
Use .value to get value from the Element
Something like:
var Cmd_Sched_Number = document.getElementById("CMDScheduleNumber").value;
Also, since you have jQuery already, consider using it.
Like:
var Cmd_Sched_Number = $("CMDScheduleNumber").val();
Custom code validations are really a mess. How many conditions you can check? There are a lot of open source libraries and they do the job pretty much well.
I would recommend you to use validate.js. Its very simple and easy to use. It sets the rules on the fields and validate according to them.
Probably you will have to do little more efforts right now to shift your code, but it will be very easy then.
As Aragorn correctly pointed out, make sure you're getting the values, not the Jquery objects or DOM elements.
function isPopulated(val) {
return !(val === '' || isNaN(val));
}
//and then in your click event handler...:
if((isPopulated(Cmd_Sched_Number) || isPopulated(Cmd_Contract_Year)) && !(isPopulated(Cmd_Sched_Number) && isPopulated(Cmd_Contract_Year))) {
//Handle the case where one is populated and the other isn't, assuming you want to treat any non-numbers as not populated.
}
This is if you want a common block for any scenario of one populated and the other not, it will be evaluated like an XOR.
The reason my isPopulated function checks for both an empty string and isNaN is that isNaN('') will evaluated false.
If you don't care whether the entered value is actually numeric or not, then you would maybe want to check value.length > 0, for example.
I have a little problem with my jQuery script: instead of counting up all variables, the script puts them next to each other. How do I count up the variables? (I am new to jQuery, so maybe I overlooked something or made a stupid mistake).
This is the line of code that should count up the variables.
totalcost = ((commissioncost + paypalcost) + qrticketcost);
http://jsfiddle.net/bsuh5q8k/1/
Thanks.
Often when you retrieve a value from a field using jquery's .val(), you'll get the string value (String type) instead of the numeric value you desire here. For instance, the field value may be 37.50, but you're getting "37.50" from .val()
So when you do this:
commissioncost = $('input[name=price]').val();
You'll get the String value.
So instead, try this:
commissioncost = Number($('input[name=price]').val());
This will convert/cast the value into a Number for you.
Also, a word of caution: just be sure whatever value is in that field, it can be evaluated as a Number, otherwise comissioncost will equal "NaN" (not a number) and will give you the same grief you're experiencing now. The rudimentary method to check if the type conversion was successful is:
commissioncost = Number($('input[name=price]').val());
if(isNaN(commissioncost)){
// oops, value wasn't a number!
}else{
// hooray! value was a number (most of the time - but that's a longer discussion)
}
commissioncost is being treated as a string. So when you add it thinks you're wanting to concatenate.
When you pull it from the input, explicitly tell Javascript that it's a number/float.
commissioncost = parseFloat($('input[name=price]').val());
I have this bit of code, it's supposed to take the value from one field, and calculate the value from it based on a certain percentage (in this case 60%).
I created a hidden field to store the value in the html, but when I run the calculation and check it in Firebug it gets a NaN value. Can anyone tell me what I can do to produce the number I need?
(Apply_RequestedAmtX_r != 0 & Apply_RequestedAdvanceAmtY_r !=0){
var AmtX= ($('#Apply_RequestedAdvanceAmtX_r').val());
var AmtY= ($("#Apply_AmtYAfterSplit_r").val());
var MaxAMT = parseInt((AmtY*60)/100);
$('#mna').val(MaxAMT
val returns a string. Now, the way you're using those variables, they'll get automagically converted to numbers (although it's best practice to parse them yourself).
One or the other of your values has a character in it that prevents the value from being automatically converted to a number; and then since that's NaN, any math involving it will be NaN. If you examine AmtX and AmyY in Firebug before using them, you should see whatever that character is.
Again, parsing isn't the actual problem here, but you're using parseInt in exactly the wrong place (unless you were trying to use it to truncate the fractional portion of the number, in which case there are better choices). Here are the right places:
var AmtX= parseInt($('#Apply_RequestedAdvanceAmtX_r').val(), 10);
var AmtY= parseInt($("#Apply_AmtYAfterSplit_r").val(), 10);
var MaxAMT = (AmtY*60)/100;
MaxAMT will likely have a fractional portion. If you want MaxAMT to be an integer, then:
var MaxAMT = Math.round((AmtY*60)/100);
// or
var MaxAMT = Math.floor(AmtY*60)/100);
// or
var MaxAMT = Math.ceil(AmtY*60)/100);
...depending on your needs.
I have a textbox and need to send the value of the text box when you type some number and the radio button is checked, to a jquery function. The code I'm using now is:
var radiobuttoncustom = 0;
if (document.getElementById('radiobuttoncustom').checked) {
radiobuttoncustom = document.getElementsByName("some_number").value;
}
I will then display the results using "radiobuttoncustom" but when the results is displayed it is NaN instead of the number. Right now I'm using the textboxes name to get the value.
getElementsByName returns an HTMLCollection, not an element, which would not have a value attribute.
Have you tried:
radiobuttoncustom = document.getElementsByName("some_number")[0].value;
edit: if you are dealing with numbers, you should also parse them as such:
radiobuttoncustom = parseInt(document.getElementsByName("some_number")[0].value, 10);
Since you are using jquery, why not
$('input[name=some_number]').val();
and
if($('#radiobuttoncustom').prop("checked"))