CODEWITHSUNDEEP
jqueryhtml
Student
Student

Reputation: 141

Fails to apply condition through jQuery

I just want to show Customer Name Row only when Balnce Row have Negative Integer Value through jQuery if the Balnce Row have Positive Integer Value than it will show Customer Name Row .

After multiple times I'll try to do this while using if/else condition but can't got my required result. Kindly , help me out, to sort my problem. My JSFIDDLE is this. And Code is Give Below. I'm very thankful to you. :)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.pay').change(function(){
      var pay = $(this).val()-0;
      var subtoal = $('.subtotal').val() - 0;
      $('.payback').val(pay-subtoal);
    }); 
    $('.custname').change(function(){
      var n=  $('.payback').val()-0;
      if(n>=0) {
        $('.custname').hide();  //...Do stuff for +ve num
      } else {
        $('.custname').show();  //...Do stuff for -ve num
      }         
    });
  });       
</script>
</head>
<body>

<form action="" method="post" > 
  <table class="table table-bordered ">
    <tbody>
      <tr>
        <td colspan="0"><b>SubTotal :</b></td>
        <td><input type="text" name="subtotal" class="form-control subtotal"></td>
      </tr>

      <tr class="pnotes">
        <td colspan="0"><b>Cash Receive:</b></td>   
        <td colspan="0"><input type="text" name="pay" class="form-control pay">
      </tr>
      <tr class="pnotes">
        <td colspan="0"><b>Balnce : </b></td>
        <td><input type="text" name="payback"  class="form-control payback"></td>
      </tr>
      <tr class="custname">
        <td colspan="0"><b>Customer Name</b></td>
        <td colspan="0"><input type="text" name="custname" class="form-control"></td>
      </tr>
    </tbody>    
  </table>
</form>
</body>
</html>

Upvotes: 4

Views: 42

Answers (1)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Hope this helps. You can hide customer name field on page load and then display it based on the value present in Balance field. Code comments below.

$('.pay').change(function () {
	var pay = $(this).val() - 0;
	var subtoal = $('.subtotal').val() - 0;
	$('.payback').val(pay - subtoal).trigger("blur"); //Added .trigger("blur")
});

//Modified code below
$('.payback').on("blur", function () {
	var n = $.isNumeric($(this).val()) ? $(this).val() - 0 : 0;
	if (n >= 0)
		$('.custname').hide();//...Do stuff for +ve num
	else
		$('.custname').show();//...Do stuff for -ve num
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="post">
	<table class="table table-bordered ">
		<tbody>

			<tr>
				<td colspan="0">
					<b>SubTotal :</b>
				</td>
				<td>
					<input type="text" name="subtotal" class="form-control subtotal">
				</td>
			</tr>

			<tr class="pnotes">
				<td colspan="0">
					<b>Cash Receive:</b>
				</td>
				<td colspan="0">
					<input type="text" name="pay" class="form-control pay">
			</tr>
			<tr class="pnotes">
				<td colspan="0">
					<b>Balnce : </b>
				</td>
				<td>
					<input type="text" name="payback" class="form-control payback">
				</td>
			</tr>
			<tr class="custname" style="display:none;">
				<td colspan="0">
					<b>Customer Name</b>
				</td>
				<td colspan="0">
					<input type="text" name="custname" class="form-control">
				</td>
			</tr>
		</tbody>
	</table>
</form>

Upvotes: 2

Related Questions