jQuery event handler logic - javascript

I'm having a problem figuring out where I'm going wrong in my code that is supposed to automatically fill in "railQuantity" for a form I am building. Currently my code only "works" when either 6ft or 8ft "fenceHeight" is selected but either way it uses the total = (Math.ceil(footage / 8) * 3); equation. It will, however, correctly blank out when I choose "Select Fence Height". So I am trying to figure out where I am going wrong with my logic so that it does not correctly use the equation for the corresponding fenceHeight. Any and all help is appreciated! Thanks you guys!
Html snippet:
Fence Description:
<select name="fenceHeight" id="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="4" id="fH4">4 Ft.</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
Javascript snippet:
//Quantity for Rails
$('#fenceHeight, #footage').bind('keypress keydown keyup change', function() {
var footage = parseFloat($(':input[name="footage"]').val(),10);
var total = '';
if($(':input[name="fenceHeight"]').val() != "select"){
if(parseFloat($(':input[name="fenceHeight"]').val() == "8")) {
total = (Math.ceil(footage / 8)* 4);
}
if(parseFloat($(':input[name="fenceHeight"]').val() == "4" || "6")) {
total = (Math.ceil(footage / 8) * 3);
}
$(':input[name="railQuantity"]').val(total.toString());
} else {
$(':input[name="railQuantity"]').val('');
}
});

Try
var $footage = $('#footage'),
$fenceHeight = $('#fenceHeight'),
$railQuantity = $('input[name="railQuantity"]');
$footage.add($fenceHeight).bind('keypress keydown keyup change', function () {
var footage = parseFloat($footage.val(), 10),
fenceHeight = $fenceHeight.val();
var total = '';
if (fenceHeight != NaN) {
if (fenceHeight == '8') {
total = (Math.ceil(footage / 8) * 4);
}
if (fenceHeight == '4' || fenceHeight == '6') {
total = (Math.ceil(footage / 8) * 3);
}
$railQuantity.val(total);
} else {
$railQuantity.val('');
}
});
Demo: Fiddle

These lines are wrong:
if(parseFloat($(':input[name="fenceHeight"]').val() == "8")) {
total = (Math.ceil(footage / 8)* 4);
}
if(parseFloat($(':input[name="fenceHeight"]').val() == "4" || "6")) {
total = (Math.ceil(footage / 8) * 3);
}
You're not comparing the result of parseFloat with the strings, you're comparing the val() with the strings and passing the result of the comparison to parseFloat. And in the second one, you're comparing val() with the result of 4 || 6, which is 4 -- you can't combine comparisons with or in programming languages like you can in English. Change it to:
var height = $(':input[name="fenceHeight"]').val();
if (height == "8") {
total = (Math.ceil(footage / 8)* 4);
} else if (height == "4" || height == "6") {
total = (Math.ceil(footage / 8) * 3);
}

Related

decimal places auto format in price jquery

i am trying to covert decimal places on type input field like
Number starts from 0.00
so at first place it will be 0.00 in input field
than i type 1 than it should become 0.01
than i type 2 than it should become 0.12
than 0 so it should become 1.20 and lastly
when i type 0 than it should become 12.00
0.01, 0.12, 1.20, 12.00.
I tried some methods which already given in SO but not successful.
Please suggest me another methods if possible. thank you.
i tried like this
$(document).on('keyup','.price',function(e){
var value = $(this).val();
if(value.length <= 6) {
if(e.which == 190 || e.which == 46 || e.which == 44 || e.which == 188){
var amountDots = 0;
var amountCommas = 0;
if(value.indexOf(',') > -1){
amountCommas = value.match(/,/gi).length;
}
if(value.indexOf('.') > -1){
amountDots = value.match(/./gi).length;
}
if((amountDots >= 1 && amountCommas >= 1) || amountCommas > 1 || value.length == 1){
$(this).val(value.substr(0,value.length - 1));
return false;
}
else{
$(this).val(value.substr(0, value.length - 1) + ',');
}
}
$(this).val(value/100); //here is the value will insert
} else {
$(this).val(value.substr(0,value.length - 1))
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="price" />
Ok, totally different solution that works when deleting characters:
$(document).on('keypress','.price',function(e){
var char = String.fromCharCode(e.which);
if(isNaN(char)) char = '';
var value = $(this).val() + char;
value = value.replace('.','');
$(this).val((value/100).toFixed(2));
if(!isNaN(char)) return false;
}).on('keyup','.price',function(e){
var value = $(this).val();
value = value.replace('.','');
$(this).val((value/100).toFixed(2));
});
https://jsfiddle.net/14shzdo5/
With each new keystroke, assuming it's a number, append it to the end, multiply by 10 and display the result.
The following logic works for the basic scenario. You may have to separately handle clearing out the text input.
$(document).ready(function() {
$("#my-input").on('keyup', function(e) {
var v = String.fromCharCode(e.keyCode);
if (!isNaN(v)) {
var dv = $("#my-display").val();
$("#my-display").val(dv + '' + v);
$(this).val(($("#my-display").val() / 100).toFixed(2));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="my-input" />
<input type="hidden" id="my-display" />

Javascript: How do I fire an event as a result of a change to multiple textboxes?

I am building a sample application, a mockup of a medical records system, using Oracle Apex. On one page, the object is to enter patient vitals. What is required is that, once the patient's height (feet and inches) and weight are entered, which are three separate textboxes, the BMI is automatically calculated. I attempted to set this using dynamic actions, but the result was that, anytime any one of the textboxes was changed, the calculation would fire. I would like this calculation to only fire if and only if all three textboxes have both been changed and have valid data. Listed below is the current status of the Javascript function:
function getBMI() {
var feet = parseInt(document.getElementById('P601_HEIGHTFT').value);
var inches = parseInt(document.getElementById('P601_HEIGHTIN').value);
var weight = parseInt(document.getElementById('P601_WEIGHT').value);
var height = (feet * 12) + inches;
var warning = document.getElementById('BMIWarning');
while ((feet == '') && (inches == '') && (weight == '')) {
document.getElementById('P601_BMI').value = '';
}
var BMI = (weight / Math.pow(height, 2)) * 703;
document.getElementById('P601_BMI').value = BMI.toFixed(2);
if(BMI < 18.5) {
warning.style.color = "red";
warning.innerHTML = "Patient is underweight";
} else if (BMI >= 18.5 && BMI < 25.0) {
warning.innerHTML = "";
} else if (BMI >= 25.0 && BMI <= 29.9) {
warning.style.color = "red";
warning.innerHTML = "Patient is overweight";
} else if (BMI > 29.9) {
warning.style.color = "red";
warning.innerHTML = "Patient is obese";
}
}
While it would function properly after all values were entered, the fact that the function fired after each individual textbox was highly undesired.

Adobe Livecycle Designer Javascript Calculation

My if statement below is not working on a numeric field that is set to calculate in Adobe Livecycle Designer and I can't figure it out. All of my field names are accurate and those fields are set as numeric. It keeps showing a value of 0.
Any help or guidance is appreciated.
if (RadioButtonList.btn2.selectedIndex == 0 || RadioButtonList.btn4.selectedIndex == 0) {
this.rawValue = ((Table3.Row1.Cell3 * NumericField1) / Table3.Row1.Cell4);
} else if (RadioButtonList.btn1.selectedIndex == 0 || RadioButtonList.btn3.selectedIndex == 0) {
if (DropDownList1.rawValue === "Concierge") {
this.rawValue = ((Table3.Row1.Cell3 * NumericField1) * 0.06);
}
if (DropDownList1.rawValue != "Concierge" && DropDownList1.rawValue != "" ) {
this.rawValue = ((Table3.Row1.Cell3 * NumericField1) * 0.04) / Table3.Row1.Cell4;
}
} else {this.rawValue = 0;}
If the problem still persists I would suggest you do following:
Select RadioButtonList and in the Object palette -> Binding tab verify values for each radio button you have.
Then rewrite your code to look it similar to this:
if (RadioButtonList.rawValue == 2 || RadioButtonList.rawValue == 4) {
this.rawValue = ((Table3.Row1.Cell3 * NumericField1) / Table3.Row1.Cell4);
}
else if (RadioButtonList.rawValue == 1 || RadioButtonList.rawValue == 3) {
if (DropDownList1.rawValue === "Concierge") {
this.rawValue = ((Table3.Row1.Cell3 * NumericField1) * 0.06);
}
if (DropDownList1.rawValue != "Concierge" && DropDownList1.rawValue != "" ) {
this.rawValue = ((Table3.Row1.Cell3 * NumericField1) * 0.04) / Table3.Row1.Cell4;
}
}
else {
this.rawValue = 0;
}
As a value for each button I choose a number of a button.

Javascript: Many conditions but different actions

I'm creating a BMI calculator.
This is my code so far:
var $ = function(id) {
return document.getElementById(id);
}
var calculateBmi = function() {
var weight = parseInt($("weight").value);
var height = parseInt($("height").value);
if (weight > 0 && height > 0 && weight !=isNaN && height !=isNaN){
var bmi = Math.floor((weight / (height * height)) * 703);
$("bmi_message").innerHTML = "" + bmi;
}
if (bmi > 18.5) {
$("bmi_message").innerHTML = ": Underweight";
}
else if (bmi >= 18.5 && bmi <= 24.9) {
$("bmi_message").innerHTML = ": Normal";
}
else if (bmi >= 25 && bmi <= 29) {
$("bmi_message").innerHTML = ": Overweight";
}
else if (bmi > 30) {
$("bmi_message").innerHTML = ": Obese";
}
else if (isNaN(weight)) {
$("weight_message").innerHTML = "Enter numerical weight value (lbs)";
}
else if (isNaN(height)) {
$("height_message").innerHTML = "Enter numerical height value (kg)";
}
}
window.onload = function () {
$("calculateBmi").onclick = calculateBmi;
}
I have all these conditions (bmi > x OR bmi < x) that require different actions. Each range should result in a different text being displayed in my span element, however this is not happening. Could someone explain to me what is wrong and maybe provide me with better practices?
In your code
if (bmi > 18.5) {
$("bmi_message").innerHTML = ": Underweight";
}
will always be true for any value higher than 18.5 so you wont get any other value but always Underweight.
Try
if (bmi < 18.5) {
$("bmi_message").innerHTML = ": Underweight";
}
This only points out a third particular issue in your code. You are checking if weight (and height) are numbers with weight != isNaN, but:
100 != isNaN // --> true
'text' != isNaN // --> true
isNaN isn't a static value but a function to use like so:
var weight = 100; isNaN(weight) // -->false
!isNaN(weight) // --> true
var height = 'text'; isNaN(height) // --> true
!isNaN(height) // --> false
You should consider all three answers here together to get the right code.

Acrobat JavaScript calculations with Radio Buttons & Checkboxes

I'm trying to write a Javascript calculation for an insurance sales form that I've designed. I'm very new to JS, and am having trouble getting the script to work. I would really appreciate if you could help point out what I'm missing! Thanks so much.
The script is meant to calculate an insurance premium based on two checkboxes (vars cb1 & cb2), a pair of radio buttons which indicate whether insured vehicles are for short or long haul trips (var haul), and the number of insured vehicles (vars trucks_num, cars_num, pvthire_num, buses_num, trailers_num).
At the end, I want the premium (var premium) to be displayed in the field "totalpremium".
I really appreciate your help!
Thank you :).
var cb1 = this.getField("cbexcellent");
var cb2 = this.getField("cbsatisfactory");
var haul = this.getField("haul");
var premium = this.getField("totalpremium");
var trucks_num = this.getField("over4.5t_num").value;
var cars_num = this.getField("cars_num").value;
var pvthire_num = this.getField("pvthire_num").value;
var buses_num = this.getField("buses_num").value;
var trailers_num = this.getField("trailers_num").value;
if((cb1 == "1") && (cb2 == "0") && (haul.valueAsString == "short")) {
var premium = (trucks_num.value * 150) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
if((cb1 == "0") && (cb2 == "1") && (haul.valueAsString == "short")) {
var premium = (trucks_num.value * 190) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
if((cb1 == "1") && (cb2 == "0") && (haul.valueAsString == "long")) {
var premium = (trucks_num.value * 190) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
if((cb1 == "0") && (cb2 = "1") && (haul.valueAsString == "long")) {
var premium = (trucks_num.value * 235) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
this.getField("totalpremium").value = premium.valueAsString
Check that the export values of your checkboxes match the values indicated as required in your if statements. By default these are set to Yes or No. If they don't match your script won't run right.

Categories