I am working on a Cardio Test calculator which calculates heart attack risk. I want to get score based value for each input. The results logic is already working, I just need to get result score value. See the code below.
<script>
$(document).ready(function() {
$("#female").change(function() {
if ($(this).is(":checked")) {
$("#femaleage").show();
$("#maleage").hide();
}
});
$("#male").change(function() {
if ($(this).is(":checked")) {
$("#maleage").show();
$("#femaleage").hide();
}
});
$( "#cardio__test" ).submit(function( event ) {
event.preventDefault();
if ($("#score").val() <= 3) {
$(".risk__score.low__risk").show();
}
if ($("#score").val() >= 4 && $("#score").val() <= 6) {
$(".risk__score.moderate__risk").show();
}
if ($("#score").val() >= 7) {
$(".risk__score.high__risk").show();
}
if ($("#maleage").val() >= 70) {
$("#score").val() + 8;
}
$(this).hide();
});
});
</script>
Here's a link!
I tested out your codepen and I found out the value of your score is a string type instead of int as I tested using parseInt() and typeof... and the result string value is blank (maybe i changed some code in the codepen during testing) How do you check the value of the score and do you get it as a number? Anyway, to print out the result value you can do it in many ways such as
adding a new div in your results div and print the results inside the div
$(".(new div class name) h3").text($("#score").val());
or simply alert the results
alert($("#score").val());
you can simply use
var scoreValue = $("#score").val();
Related
I need to multiply priceMonthly by 30, How can I do that in this "if" function? I am using it to echo the entered number live , but I need that number to multiply by 30. Dose someone have over ideas, or can someone guide me why its not working ?
function keyup_fill(ele, ele_place) {
$(ele).on("keyup", function(event) {
if ( $(ele).attr("name") === "priceMonthly" ) {
if (!$.isNumeric($(ele).val())) {
return ($(ele).val()*30); //not working
}
}
var newText = event.target.value ;
$(ele_place).html(newText);
});
}
keyup_fill("#priceMonthly", "#priceMonthly-place");
If what you want is to show in #priceMonthly-place the result of multiplying by 30 the value entered in #priceMonthly you can do this with the code (note that I'm assuming that both ids represent input elements):
function keyup_fill(ele, ele_place) {
$(ele).on("keyup", function(event) {
// I'm assuming that `ele` is an input.
var value = $(this).val();
if ($.isNumeric(value)) {
// I'm assuming that ele_place is an input.
$(ele_place).val(value * 30);
}
});
}
keyup_fill("#priceMonthly", "#priceMonthly-place");
Ok, I have a form with lots of different inputs, each has the same class name on it. What I need to do is loop though all of these inputs, which the user can add more to, with an AJAX call, making sure all inputs are four numbers only.
Now I can get it to check that it is of a length but when I try to add a check to make sure its a number, it does not seem to work, this is my current code:
var ValidMyData = function() {
$('#FORM-ID-HERE').on('submit',function(e) {
e.preventDefault();
Numbers = $('.NumberClass');
//Check if job number is only 4 in length
function CheckNumbers() {
$(Numbers).each(function() {
var GetCurrentInput = $(this).val();
if( GetCurrentInput.length != 4 ) {
return $(this).css("background-color","#FF0004");
} else {
return $(this).css("background-color","transparent");
} //End of if
}); //End of each
} //end of inner function
}); //end of on submit function
} //end of valid check function
ValidMyData();
This works, if the inputs on my number field are not four in length, it makes the background color red, and then removes that background color if its then changed to be four.
I have tried some things but nothing as worked. I have mainly being playing with the IsNumeric() function, by adding that on my if check. Also, although this works, I don't think my return call is working right, I think I am doing something wrong but can not put my finger on it :). - When I console.log the CheckNumbers() inner function, I get undefined back.
All help most welcome.
Thanks
this code will check if it is 4 characters and if it's a number:
var ValidMyData = function() {
$('#FORM-ID-HERE').bind('submit',function(e) {
Numbers = $('.NumberClass');
//Check if job number is only 4 in length
function CheckNumbers() {
Numbers.each(function() {
var GetCurrentInput = $(this).val();
if( GetCurrentInput.length != 4 || !/([0-9])+/.test(String(GetCurrentInput))) {
return $(this).css("background-color","#FF0004");
e.preventDefault();
} else {
$(this).css("background-color","transparent");
} //End of if
}); //End of each
} //end of inner function
}); //end of on submit function
} //end of valid check function
ValidMyData();
EDIT
I updated the answer using your own code, which now will submit the form if all the inputs are filled correctly, else it highlights it and doesn't submit the form.
I apologize in advance for my ignorance... We have an order form where we'd like the users to order at least 6 items (not each necessarily but sum/combination of items that equals 6 or more). I have it totaling the quantities up but not a working onclick/onsubmit function that can alert you to reach the minimum order quantity before submitting the form. Any ideas? Thanks in advance. In lieu of posting all the actual code i'm hoping this is enough info to go on. If not I can create some dummy text to apply if necessary.
Add a class to the inputs you want to tally:
<input name="LEDname" type="text" id="v8" class="tallyable" />
Then scrub and tally them up on keyup, then enable or disable submit if value is >= 6:
$('.tallyable').on('keyup', function () {
var total = getTotal();
$('#orderCount').html(total);
enableOrDisableSubmit(total);
});
function getTotal(){
var total = 0;
$('.tallyable').each(function(){
if ($(this).val().trim().length > 0) {
var currentVal = isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
total += currentVal;
$(this).val(currentVal);
}
});
return total;
}
function enableOrDisableSubmit(val) {
if (val >= 6) {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', 'disabled');
}
}
Here is a fiddle
This is an extension of a question i asked earlier. Original is here
Use existing javascript to trigger if else in php
I've created a fiddle to further explain/show how the existing jQuery functions.
what i need is for the div hide to trigger when the + buttons increase the value over 1, so somehow on event.
I tried to add the
{ $('#foobar').hide(); }
in with the section where the qty is incremented, here
$cartAdd.click(function(evt) {
var $incrementor = jQuery(evt.target)
, quantity = parseInt($quantity.val(), 10);
but it didnt work for me.
Fiddle is here http://jsfiddle.net/Yyb8L/1/
If I understand you correctly, on the event that your #cartAdd input is clicked, you'd like to check to see if the value of iterator has increased to greater than 1, and then hide the #foobar div.
In order to do this, you would first need to update the value each time the 'inc' and 'dec' buttons are clicked.
if($incrementor.hasClass('inc')) {
quantity += 1;
$quantity.val(quantity); //the value of $quantity is updated
} else if($incrementor.hasClass('dec')) {
quantity += -1;
$quantity.val(quantity); //the value of $quantity is updated
}
Second, you would need to wrap your if/then block in a function, which would be called on the event the input gets clicked.
function checkIncrement(){
if( $('#cartAdd').find('input').val() > 1 )
{ $('#foobar').hide(); }
}
The function should be invoked only after the quantities have been updated, like so:
$cartAdd.click(function(evt) {
var $incrementor = jQuery(evt.target)
, quantity = parseInt($quantity.val(), 10);
if($incrementor.hasClass('inc')) {
quantity += 1;
$quantity.val(quantity); //the value of $quantity is updated
} else if($incrementor.hasClass('dec')) {
quantity += -1;
$quantity.val(quantity); //the value of $quantity is updated
}
checkIncrement(); //checkIncrement is invoked after values are updated.
if(quantity > 0) {
$quantity.val(quantity);
xhr.getPrice();
}
jQuery(".back").change(function(){
xhr.getPrice();
});
});
Here is a fiddle of the solution http://jsfiddle.net/boomish/V7Hnw/1/
Hope this helps!
Edit to include correct link to fiddle
Base from what I understand on your question, you want to hide the div if the value of the textbox is above 1 or if the plus button was click.
I had created a simple code for you to have a basis to attain what you need.
This is the fiddle
$(document).ready(function () {
$('#plus').on('click', function () {
$('#qty').val(parseInt($('#qty').val()) + 1);
$('#div-hide').hide();
});
$('#minus').on('click', function () {
var qty = parseInt($('#qty').val()) - 1;
$('#qty').val(qty);
if (qty == 0) {
$('#div-hide').show();
}
});
});
Hope that helps!
I want to make a bit of code that will check the value of an input box, count how many letters there are in the input box and if the value is divisable by 4 then to insert a -
Its so when the user is entering a code, in automatically inserts - after every 4 letters :)
Thanks
$("input").keyup(function () {
if(this.value.replace(/-/g, "").length % 4 == 0) {
this.value += "-";
}
});
This seems to work in the way you want
$(document).ready(function() {
$("#search").keyup(function(){
var stringFull = $(this).val();
if(stringFull.replace(/-/g, "").length % 4 == 0 ){
$(this).val(stringFull+"-");
}
});
});