javascript - Hide element based on value of other elements -
i trying hide table based on value of 2 fields, if field2
equal field1
table hidden.
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 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; } }
$(document).ready( function() { $('#totalitems, #entereditems').keyup(function(){ if( $('#totalitems').val() == $('#entereditems').val() ){ $('#hidethis').hide(); }else{ $('#hidethis').show(); } }); });
if need check @ 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();
Comments
Post a Comment