Enable/Disable submit button if dynamically table has no row

Question

I have form with few fields and a dynamic table (ID- installments with "Add new Row" button. Entire form has submit button. I want to disable the submit button if the dynamic table has no row. And, if that table has a content (By click on Add New Row button) then submit button will be again active.

I have searched a lot and found below code :

<script>$(document).ready(function(){
var rowCount = $('#installments tbody tr').length;
if(rowCount < 1){
    $('#submit').attr('disabled','disabled');
} else {
    $('#submit').removeAttr('disabled');
}
});</script>

The submit button is disabled on page load (As there are no records found in dynamic table). I want to activate the submit button when records are added .

Please assist. Thanks in advance.

All you need to do is run that function whenever a row is added or removed. You don't show your event handlers for that, but all that's needed is to call this same function inside those, after adding/removing the row. — Robin Zigmond
– Robin Zigmond, Commented Oct 19, 2019 at 20:32

Trueman · Accepted Answer · 2019-10-20 13:54:29Z

1

Yes, you should call a function each time you add new row, also if you have a delete button you need to call the function to check if there are any rows left, if not - disable the submit.

Let's assume the id of your button for adding is "addNewRow" and id for deleting is "deleteRow" - then the code may look like this:

 <script>$(document).ready(function(){

    $("#addNewRow").click(function(){ 
                 /* your code for adding the row*/
                 buttonEnabler(); 
                 });
    $("#deleteRow").click(function(){ 
                 /* your code for removing the row*/
                 buttonEnabler(); 
                 });

    function buttonEnabler(){
    var rowCount = $('#installments tbody tr').length;
    if(rowCount < 1){
               $('#submit').attr('disabled','disabled');
        } else {
               $('#submit').removeAttr('disabled');
               }
    }

    });
</script>

edited Oct 20, 2019 at 13:54

answered Oct 19, 2019 at 20:38

Trueman

2741 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Samiran Over a year ago

Hi, Thanks for your reply. With this code, the submit button is enabled after clicking TWICE on AddNewRow button.On first click in AddNewRow the submit button is still disabled, after second click the submit button is getting enabled. Am I doing any mistake ?

Trueman Over a year ago

Probably it is because you add new row after calling this function, you must execute code for adding, then call the functon.

Trueman Over a year ago

I've updated my post to point the place where you should put the code responsible for adding or deleting

Samiran Over a year ago

Thanks for your extended support. Yes the code was working as calling the function before adding the dynamic rows.

Mazen Amir · Accepted Answer · 2019-10-19 20:43:11Z

0

You can make function which handles the attr , call it on loading and on button click

$(document).ready(function(){
 function ButtonHandler(){
   var rowCount = $('#installments tbody tr').length;
   if(rowCount < 1){
      $('#submit').attr('disabled','disabled');
   } else {
      $('#submit').removeAttr('disabled');
   }
  }

ButtonHandler()

$('YourBtn').click(function(){
 ButtonHandler()
});

});

answered Oct 19, 2019 at 20:43

Mazen Amir

817 bronze badges

Collectives™ on Stack Overflow

Enable/Disable submit button if dynamically table has no row

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related