Hide Buttons and Show JavaScript

Question

I have run into a problem with our javascript. I have two buttons. When a certain input has a value, we hide the button, otherwise, we show it.

Here are the buttons we want to hide and show:

<button class="btn btn-info" style="visibility: hidden;" type="button" id="button1" data-id="{{receiptno}}" data-toggle="modal" data-target="#myModal" contenteditable="false">Pay</button>
<form action="/payments/report/{{receiptno}}.pdf" method=post>
  <input type=hidden value="{{receiptno}}" name="row_print"></input>
  <button class="btn btn-danger" style="visibility: hidden;" type="submit" id="anotherbutton1" name="delete">
      <span class="glyphicon glyphicon-print"></span> Print Receipt
  </button>      
</form>

We are getting our value here. If it's '' we show the pay button, else we show the print receipt button:

<input style="visibility: hidden;" id="referto" value="{{paymentmethod}}">

Here's our javascript:

<script type="text/javascript">
  $(document).ready(function() {
    console.log($("#referto").val());
    if ( $("#referto").val() == '') { 
      document.getElementById('button1').style.visibility = 'visible';
    }
    else {
      document.getElementById('anotherbutton1').style.visibility = 'visible';
    }   
  });    
</script>

I'm really not sure why this isn't working. Any help is appreciated. Thank you!

Answer 1

Can you please try this and see if it works?

if ( $("#referto").val()) { 

It covers a lot of cases, like empty strings, nulls, etc.

Answer 2

It works fine it seems. I have tested it as below. Perhaps your value="{{paymentmethod}}" is not really returning nothing, but some whitespace. Check what is being returned from that value. Good luck.

 $(document).ready(function() { console.log($("#referto").val()); if ($("#referto").val() == '' || $("#referto").val() == ' ') { document.getElementById('button1').style.visibility = 'visible'; } else { document.getElementById('anotherbutton1').style.visibility = 'visible'; } $("#referto").on("change keydown keyup", function(){ document.getElementById('anotherbutton1').style.visibility = 'hidden'; document.getElementById('button1').style.visibility = 'hidden'; if ($("#referto").val() == '' || $("#referto").val() == ' ') { document.getElementById('button1').style.visibility = 'visible'; } else { document.getElementById('anotherbutton1').style.visibility = 'visible'; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> I have run into a problem with our javascript, let's say I have two buttons here I when a certain input has a value we hide the button, otherwise show it Here's our buttons that we want to hide and show: <button class="btn btn-info" style="visibility: hidden;" type="button" id="button1" data-id="{{receiptno}}" data-toggle="modal" data-target="#myModal" contenteditable="false">Pay</button> <form action="" method=post> <input type=hidden value="" name="row_print"> <button class="btn btn-danger" style="visibility: hidden;" type="submit" id="anotherbutton1" name="delete"><span class="glyphicon glyphicon-print"></span> Print Receipt</button> </form> We are getting our values here, if its '' we show the pay button if it's not '' we show the print receipt button: <input style="visibility: block;" id="referto" value="">