jQuery - set one input equal to 5% of another and more 1

jquery get input value by name
jquery multiple attribute selectors
jquery selector
jquery attr
jquery set input value by name
jquery find
multiple value input field with jquery
jquery set value of textbox

I have two input fields - a donation and a tip field. I need to set the tip field equal to 5% of the donation field when the donation field is changed. And I need to make sure both fields are never less than $1.

I have this, but it's not working correctly:

$('#donationAmount').change(function() {
    var donationAmount = $('#donationAmount');
    var tipAmount = $('#tipAmount');

    if(parseFloat(tipAmount.val()) <= 1){
        tipAmount.val(1);
    }else{
        tipAmount.val(parseFloat(donationAmount.val()*0.05).toFixed(2));
    }

    if(parseFloat(donationAmount.val()) < 1){
        donationAmount.val(1);
    }
});

The code below should grab the donation amount and if it's below $1.00 set it to $1.00, then calculate the tip at 5% and if it's below $1.00 set it to a $1.00 and repopulate both fields. I would recommend validating on the back end as well since the field can be changed to arbitrary value in a number of ways.

$('#donationAmount').on('change', function(){ 
  var $donationAmount = $(this);
  var $tipAmount = $('#tipAmount');

  var donation = Number($donationAmount.val());
  var tip;

  donation = (donation >= minimum)? donation:1;
  tip = (donation*0.05 >= minimum)? donation*0.05:1;

  $donationAmount.val( donation.toFixed(2) );
  $tipAmount.val( tip.toFixed(2) );
});

javascript - jQuery, The code below should grab the donation amount and if it's below $1.00 set it to $1.00, then calculate the tip at 5% and if it's below $1.00 set it  I have some question about jquery selection. In my case, how to match if the option.value equal something, mark a selected for it. Online code here repeat code again. It caused Uncaught TypeError:

You criterias:

  1. Tip must be 5% of donation
  2. Both must be 1.00 of greater

You need to compare two values to a "minimum". The first is the value entered by the user and the second is the result of a calculation.

To shorten the code and to make it easier to read, I used some ternary operator instead of if/else statements.

Here are the steps in order (and that was the main cause of your issue):

  1. get the input.
  2. check if it is greater than the minimum to set the donation.
  3. do the 5% math
  4. check if math is greater than minimum to set the tip.

Both values were compared and possibly replaced by the minimum.

  1. send the two correct values to the input elements.

$('#donationAmount').change(function(){
  var minimum = 1.00;
  var donation_input = parseFloat($(this).val());
  var donation = (donation_input<minimum) ? minimum : donation_input;
  
  var math = donation*0.05;
  var tip = (math<minimum) ? minimum : math;

  $(this).val(donation.toFixed(2));
  $("#tipAmount").val(tip.toFixed(2));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Donation: <input type="text" id="donationAmount"><br>
Tip: <input type="text" id="tipAmount">

Multiple Attribute Selector [name=”value”][name2 , attributeFilter2: Another attribute filter, reducing the selection even more. attributeFilterN: Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. <!doctype html> <input id="man-news" name="man-​news">. <input  yes but the question is "How to add a Not Equal To rule in jQuery.validation" you may reply to this. this is a different case – Alp Altunel Sep 17 '18 at 13:08 add a comment | 0

Check the tip amount (to see if it is at least $1) after the calculating 5% of the donation amount instead of before.

Tip must be at least 5% of donation:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Donation Amount:
<input type="number" id="donationAmount"/><p/>
Tip Amount:
<input type="number" id="tipAmount"/>
<script>
$('#donationAmount').change(function() {
    var donationAmount = $('#donationAmount');
    var tipAmount = $('#tipAmount');
    var donation = parseFloat(donationAmount.val());
    var tip = parseFloat(tipAmount.val());
    if(donation<1){
      donation = 1;
      donationAmount.val(1);
    }
    if(tip/donation<0.05){
     tipAmount.val((donation*0.05).toFixed(2));
    }
    if(tipAmount.val()<1){
     tipAmount.val(1);
    }
});
</script>

JQuery, If we use this method to set value, it will set one or more than one value attribute for set Example 1: In this example the value of the input element is set by val()  Description: Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value. attribute: An attribute name. value: An attribute value. Can be either a valid identifier or a quoted string. This selector is equivalent to :not ( [attr='value']). Because [name!="value"] is a jQuery

<input type="url">, input elements of type url are used to let the user enter and edit a URL. This must be an non-negative integer value smaller than or equal to the See Labels and placeholders in <input>: The Input (Form Input) element for more This may be based upon a parent's spellcheck setting or other factors. An  The .val() method is primarily used to get the values of form elements such as input, select and textarea.When called on an empty collection, it returns undefined.. When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option.

<input type="search">, input elements of type search are text fields designed for the user to enter for more details), the value can be any text string or an empty string ( "" ). It is not as semantically useful as other ways to explain your form, and To set an upper limit on the length of the input data, use the maxlength attribute. September 5, 2019, 5:44am #1 Hi i am making a long form and need to copy input value to another input. On click of check box “Same As Registered Office” all the value should copy from

JavaScript isNaN() Function, isNaN(5-2) //false isNaN(0) //false The isNaN() function determines whether a value is an illegal number (Not-a-Number). JavaScript Version: ECMAScript 1  The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties.

Comments
  • So check if the tipAmount value is less than a dollar after the calculation.... Some reason you do it before you calculate it....
  • You should use PHP for payments. Javascript and any Frontend based language can be edited by your visitors. You should create a form with a checkbox <input type="checkbox" name="donationtip" id="donationtip"><label for="donationtip">Would you like to leave a tip?</label> If it's a donation and not a payment, why you need a tip ?
  • Your solution allows a tip greater than 5%... It may be correct for OP, but just to mention....
  • @LouysPatriceBessette I have edited my code for both possibilities.
  • It also allows the "donation" to be less than 1.
  • « I need to make sure both fields are never less than $1»
  • @LouysPatriceBessette Thanks for telling me. I have fixed it.