Show field if true, hide field if false?

Want to have a notification box displayed if amount in fieldA is higher than amount in fieldB.

Currently have some code working but the notification box toggles on and off not depending on the actual amount.

What am I missing?

jquery:

 $(document).ready(function() {
     $('#fieldA').change(function(){
                if($(this).val()>$('#fieldb').val()){
                  //display 开发者_开发百科it on the form
                  $('.labelNotification').toggle();
                  $('.labelNotification').append('Not recommended to have FieldA figure higher than FieldB.');
                }
            })
      });

HTML:

< p style="display: none;" class="error labelNotification">

---

This is tailor-made for the toggle(boolean) method. Also, you have to be careful about appending to the notification label ... what if the user changes his answer twice? It's better to have multiple notification objects, each of which can contain stuff for a single type of notification.

$(function() {
    $('#fieldA').change(function() {
        var isLarger = +$(this).val() > +$('#fieldB').val();  // Note: convert to number with '+'
        var $labelNotification = $('.labelNotification');
        $labelNotification.toggle(isLarger);
        if (isLarger) {
            //display it on the form
            $labelNotification.html('Not recommended to have FieldA figure higher than FieldB.');
        }
    })
});

---

If you're comparing numerical values (which it seems like you are), you should use parseInt or parseFloat to convert the (string) value returned by val() to an integer. According to the documentation for val, the function always returns a string value.

---

I found the problem ,

First thing is you need to have semicolon properly as below

    $('#fieldA').change(function () {
            if ($(this).val() > $('#fieldB').val()) {
                alert("its greater");
                //display it on the form
$('.labelNotification').append('Not recommended to have FieldA figure higher than FieldB.');
 $('.labelNotification').show();               
            }
else {$('.labelNotification').hide();
$('.labelNotification').html('');}
        });

Second thing , when you toggle it it won't show for the second time

if 40 > 30

and again if you entery 50 and 50 > 30 it won't show

this is second problem

final problem is empty the label all the time

$('.labelNotification').html('')'

---

Toggle is not the best approach for your situation.

You want to compare and then decide.

Since you are looking at numbers I would strongly suggest using a number type to do the comparison, either using parseInt() or parseFloat().

The text in the notification label only needs to be set once, since you don't have any comment for it showing something when B > A. I would suggest setting this in your HTML.

<span class="labelNotification" style="display:none">Your Warning Text</span>
<!-- if your CSS class has `display:none` remove the style attribute -->

as for the jQuery.

$(function() {
    $("#fieldA").change(function() {
       var a = parseInt($(this).val());
       var b = parseInt($("#fieldb").val());
       // handle if a or b is not a number -->  isNaN(a) || isNaN(b)

      if( a > b ) {
        $('.labelNotification').show()
      } else {
        $('.labelNotification').hide()
      }    
    });
});