CODEWITHSUNDEEP
javascriptjqueryhtml
James Flattery
James Flattery

Reputation: 145

Hide element based on value of other elements

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;
    }
}

Upvotes: 2

Views: 8380

Answers (4)

MazzCris
MazzCris

Reputation: 1840

$(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();

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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..

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

Fiddle

Upvotes: 0

shammelburg
shammelburg

Reputation: 7308

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.

Upvotes: 0

Tushar
Tushar

Reputation: 87203

See the comments 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.com/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

Upvotes: 3

Related Questions