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
Related
I tried doing it two different ways:
$(document).ready(function()
{
$('input[type=button]').on('click', function(evt){
if ($(this).val() == 'Close')
return true;
var totalHours = 999; // here I am computing a total number of hours but that is irrelevant to my question
var reportedTotalHours = parseFloat($("#TotalHours").text());
var difference = Math.abs(totalHours - reportedTotalHours);
if (difference >= 0.25) // discrepancy must be less than a quarter hour
{
alert("Total of hours for each activity must equal " + reportedTotalHours + ".");
evt.preventDefault();
return false;
}
return true;
});
});
return false; should be cancelling the button click, as should evt.preventDefault();, but neither of them is working for me. What happens when the button is clicked is the form is submitted, but I want to prevent the form from being submitted until the discrepancy in hours is less than 0.25.
Try changing your input[type=button] to a button tag. Then submit your form in your onclick callback when the conditions are right.
In some browsers an input[type=button] element will submit a form if there's no input[type=submit] element.
const prev = document.querySelector('.prev')
let current = 2
if(current >= 1) {
prev.disabled = false
}else {
prev.disabled = true
}
<button class="prev">Prev</button>
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();
I have a input that generates a number upon another input keyup. however it should only generate this number when my checkbox is checked. if it doesn't it shouldn't generate there nothing. but instead it generates me the number if the checkbox is check or not .. even though the function exists only in the checked mode.. i have no idea what went wrong:
the checkbox
<div class="col-md-6">
<div class="switch switch-primary">
<input class="multi-transaction" type="checkbox" name="switch" data-plugin-ios-switch="">
</div>
</div>
jQuery
$('.multi-transaction').click(function () {
var sum = $('.amount-czk');
if($(this).prop("checked") == true){
sum.prop("disabled", false); // check
sum.css('border-color', '#ccc');
sum.val(0);
$('.amount-czk').on('keyup', function () {
var amount = parseInt($('.give-me-money').val()); // amount to pay in eur example 520
var amount_wr = parseInt($('.amount-czk').val()); // type how much we got in any currency
$('.currency-czk').val((amount_wr / amount ? amount_wr / amount : 0).toFixed(2));
});
//curchange(true);
}
else if($(this).prop("checked") == false){
console.log('do nothing');
}
});
Instead of only giving me the console.log the input keyup function stays working..
Don't bind event handlers inside another handlers, they will multiply soon causing strange issues. Try something like this instead:
$('.multi-transaction').click(function () {
var sum = $('.amount-czk');
if ($(this).prop("checked") == true) {
sum.prop("disabled", false); // check
sum.css('border-color', '#ccc');
sum.val(0);
//curchange(true);
} else if ($(this).prop("checked") == false) {
console.log('do nothing');
}
});
$('.amount-czk').on('keyup', function () {
if ($('.multi-transaction').prop('checked')) {
var amount = parseInt($('.give-me-money').val()); // amount to pay in eur example 520
var amount_wr = parseInt($('.amount-czk').val()); // type how much we got in any currency
$('.currency-czk').val((amount_wr / amount ? amount_wr / amount : 0).toFixed(2));
}
});
Just try in if condition...
if($(this).prop('checked')) {
// something when checked
} else {
// something else when not
}
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+"-");
}
});
});