disable button in case of empty element in class

Question

I want to disable submit button if there is any empty field in class element.

$(document).ready(function (){
  fees = [];
$('#button').attr('disabled',true); 
});

function submitButton() {           
  // var fees = $('.fee').val();
    var total = $('#total').val();
    $(".fee").each(function(index, value){ 
       fees.push($(this).val().trim()); 
    });   
    if(fees.includes('') && total = '') {
        $('#button').attr('disabled',true);
    }   else {
        $('#button').attr('disabled',false);        
    }   // /else

}//fuction

JS fiddle link

var fees = $('.fee').val() is going to get the value of the first .fee element, and it isn't going to be an array(it will likely be a string), so your fees.push calls arent going to work and cause an error — Patrick Evans
– Patrick Evans, Commented Jul 16, 2019 at 11:25
@PatrickEvans sorry forget removing it. I used loop for it. How can I make it work? — Dishko
– Dishko, Commented Jul 16, 2019 at 11:29

Lucas · Accepted Answer · 2019-07-16 12:30:44Z

Just check if there is content inside the inputs, if you activate the button by removing the disabled class

$('input').on('keyup', function(){
  var enable = true
  $('input').each(function(index, element){
      if ($(element).val() == "" || $(element).val() == null){
        enable = false;
      }
  });
  
  if (enable){
    $('button').removeAttr('disabled');
  }else{
    $('button').attr('disabled','disabled');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" /><br /><br />
<input type="text" /><br /><br />
<input type="text" />

<button disabled>Confirm</button>

Edit 1.0:

$(document).ready(function (){
  fees = [];
$('#button').attr('disabled',true);	
});
	//submit button enable disable
function submitButton() {			
  var total = $('#total').val();
	$(".fee").each(function(index, value){ 
        fees.push($(this).val().trim()); 
     });   
	
}//fuction



function disableButton(){
     var enable = true
      $('input.useToCheck').each(function(index, element){
          if ($(element).val() == "" || $(element).val() == null){
            enable = false;
          }
      });
      
      if (enable){
        $('button').removeAttr('disabled');
      }else{
        $('button').attr('disabled','disabled');
      }
}


  $('input').on('keyup', function(){
 disableButton();
    });
    
  $('#more').on('click', function(){
 disableButton();
    });

//autocomplete script    
$(document).on('focus','.search',function(){
let type = $(this).data('type');

$(this).autocomplete({
    source: [{
    	label: 1,
      value: 1,
    	data: {
        t_id: 1,
        Fee: 9.99
      }
    }, {
    	label: 2,
      value: 2,
    	data: {
        t_id: 2,
        Fee: 1
      }
    }],
    autoFocus: true,
    minLength: 1,
    select: function( event, ui ) {
        let id_num = $(this).attr('id').substring(5);

        $(this).val(ui.item.value);
        $('#fee_' + id_num).val(ui.item.data.Fee);
        $('#total').val(ui.item.data.Fee);
        //$(this).attr('data-type', ui.item.type);
        return false;
    },
  });
});

var i=$('table#first tr').length;
$("#more").on('click',function(){
	html = '<tr>';
	html += '<td><input type="text" data-type="type" onKeyUp="submitButton();" id="test_'+i+'" class="search useToCheck" placeholder="Enter 1 or 2 only"> </td>';
	html += '<td><input type="number" id="fee_'+i+'" class="fee" placeholder="Fee"></td>';
	html += '</tr>';
	$('table#first').append(html);
	i++;
   disableButton();
    $('input').on('keyup', function(){
 disableButton();
    });
});

#button {
 margin: 50px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--hidden div-->
<div class="Popup">
<table id="first">
	<thead>
		<tr>
			<th>Name</th>
			<th>Fee</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" data-type="type" onKeyUp="submitButton();" id="test_1" class="search useToCheck" placeholder="Enter 1 or 2 only"></td>	
		<td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
    <td><a id="more"> More Row </a></td>
	</tr>
</tbody>
</table>
<h3> Table 2 </h3>
<table id="tests">
	<thead>
		<tr>
			<th>Student</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" data-type="type" onKeyUp="submitButton();" id="student" class="search useToCheck"></td>	
		<td><input type="number" id="total"></td>
	</tr>
</tbody>
</table>
</div>
<button type="button" id="button"> submit </button>

By adding new row it should redisable the button. Because initially its adding empty row.

random · Accepted Answer · 2019-07-16 11:40:35Z

Add keyup event to the input, Check if the elements .fee and '#total have value and then enable the button else disable.

$(document).ready(function() {
  const btn = $('button');
  btn.attr('disabled', true);

  $('input').on('keyup', function() {
    const fees = $('.fee').val();
    const total = $('#total').val();

    const isDisabled = (fees && total) ? false : true;
    btn.attr('disabled', isDisabled);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Popup">
  <table id="first">
    <thead>
      <tr>
        <th>Name</th>
        <th>Fee</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td>
        <td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
        <td><a id="more"> More Row </a></td>
      </tr>
    </tbody>
  </table>
  <h3> Table 2 </h3>
  <table id="tests">
    <thead>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" data-type="type" id="student" class="search"></td>
        <td><input type="number" id="total"></td>
      </tr>
    </tbody>
  </table>
</div>
<button type="button" id="button"> submit </button>

Collectives™ on Stack Overflow

disable button in case of empty element in class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related