I am trying to hide a table based on the value of two fields, so that if field2 is equal to field1 the table is hidden.

JSfiddle

HTML:

<form>
    Expected Number of Items: <input type="text" value="14" name="totalItems" id="totalItems">
    <p>
    Number of Items Entered: <input type="text" value="14" name="enteredItems" id="enteredItems">
</form> 
<p>
<table border="1" style="width:100%" id="hideThis">
  <tr>
    <td>This should be hidden when "totalItems" equals "enteredItems"</td>
  </tr>
</table>

JS:

function toggleClass(eid, myclass){
    var theEle = document.getElementById(eid);
    var eClass = theEle.className;

    if(eClass.indexOf(myclass) >= 0){
        theEle.className = eClass.replace(myclass, "");
    }else{
        theEle.className  += "" +myclass;
    }
}

I am trying to hide a table based on the value of two fields, so that if field2 is equal to field1 the table is hidden.

JSfiddle

HTML:

<form>
    Expected Number of Items: <input type="text" value="14" name="totalItems" id="totalItems">
    <p>
    Number of Items Entered: <input type="text" value="14" name="enteredItems" id="enteredItems">
</form> 
<p>
<table border="1" style="width:100%" id="hideThis">
  <tr>
    <td>This should be hidden when "totalItems" equals "enteredItems"</td>
  </tr>
</table>

JS:

function toggleClass(eid, myclass){
    var theEle = document.getElementById(eid);
    var eClass = theEle.className;

    if(eClass.indexOf(myclass) >= 0){
        theEle.className = eClass.replace(myclass, "");
    }else{
        theEle.className  += "" +myclass;
    }
}

• javascript
• jquery
• html

• 1 address the issue clearly – Hari Ram Commented Jul 14, 2015 at 13:27
• The JSFiddle he provided uses jQuery – MazzCris Commented Jul 14, 2015 at 14:01
• Sorry, this may be a dumb question. but do I not need jQuery to do this? – James Flattery Commented Jul 14, 2015 at 14:23
• Generally speaking you don't need jQuery for anything. Anything you can achieve with jQuery can also be done in plain JavaScript. However jQuery does make a lot of things much easier. – Simba Commented Jul 14, 2015 at 14:47
• You don't necessarily need jQuery, it just makes things easier, in many cases. I've added a non-jQuery implementation in my answer, if you want to get an idea. – MazzCris Commented Jul 14, 2015 at 14:47

4 Answers 4

See the ments in the code.

// Function to hide/show the table based on the values of inputs
function toggleTable() {

  // Hides the table if the values of both input are same
  $('#hideThis').toggle($('#totalItems').val() !== $('#enteredItems').val());
}

$(document).ready(function() {
  // Bind the keyup event on both the inputs, call the function on event
  $('#totalItems, #enteredItems').on('keyup', toggleTable).trigger('keyup');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>Expected Number of Items:
  <input type="text" value="14" name="totalItems" id="totalItems">
  <p>Number of Items Entered:
    <input type="text" value="14" name="enteredItems" id="enteredItems">
</form>
<p>
  <table border="1" style="width:100%" id="hideThis">
    <tr>
      <td>This should be hidden when "totalItems" equals "enteredItems"</td>
    </tr>
  </table>

jsfiddle Demo

$(document).ready( function() {
    $('#totalItems, #enteredItems').keyup(function(){
        if( $('#totalItems').val() == $('#enteredItems').val() ){
            $('#hideThis').hide();
        }else{
            $('#hideThis').show();
        }
    });    
});

If you need to check also at page load:

function checkFields(){
    if( $('#totalItems').val() == $('#enteredItems').val() ){
        $('#hideThis').hide();
    }else{
        $('#hideThis').show();
    }
}

$(document).ready( function() {
    $('#totalItems, #enteredItems').keyup(function(){
        checkFields();
    });   
    checkFields();
});

Plain JavaScript implementation:

function checkFields(){
    if(  document.getElementById('totalItems').value == document.getElementById('enteredItems').value ){
        document.getElementById('hideThis').style.display = 'none';
    }else{
        document.getElementById('hideThis').style.display = 'inline-block';
    }
}

document.getElementById('totalItems').addEventListener('keyup', function (){
   checkFields();
}, false);

document.getElementById('enteredItems').addEventListener('keyup', function (){
   checkFields();
}, false);

checkFields();

Here is the new JSFiddle

$(document).ready(function () {
    var webpart_ID = 'hideThis';
    var FieldA_id = 'totalItems';
    var FieldB_id = 'enteredItems';
    if ($('#' + FieldA_id).val() === $('#' + FieldB_id).val()) 
        $('#' + webpart_ID).hide();
    else 
        $('#' + webpart_ID).show();
});

This works.

You can bind a keyup events for both the text boxes, from where you can call a function to check if both the values are same..

pare();
$("#totalItems,#enteredItems").keyup(function() {
    pare();
});
function pare() {
    if ($("#totalItems").val() == $("#enteredItems").val()) {
        $("#hideThis").hide();
    } else {
        $("#hideThis").show();
    }
}

Fiddle