Remove disabled attr from button if text has value not working

Question

I'm creating a multi-step popup form and only want the #next button to be active if the input fields are selected. I've managed to get it working for checkboxes and radio fields but for some reason it's not working for text and textarea fields.

I'm using the same code as the checkbox and radio fields but instead of checking is(:checked) I'm targeting .val() != "".

When testing this, It only works if I go to the .multi-step-section, fill in the text field, go back to the previous screen and then back to the section with the field. I think the active class is still looking at the previous section.

Is there a way of checking to make sure the input[type="text"] and input[type="textarea"] fields are checked on the current active screen before disabling the button?

Link to full popup form: https://jsfiddle.net/5yd23jah/

$(function() {
  $('.multi-form-actions button').on('click', function() {

    var el = $(this).attr('id');
    var active = $('.multi-step-section.active');

    active.add(active.siblings()).removeClass('active');

    if (el == 'prev') {
      active = active.prev('.multi-step-section').addClass('active');
      $('#progressbar > span').css({
        'width': $('#progressbar > span').width() / $('#progressbar').width() * 100 - sectionProgress + '%'
      });
    } else if (el = 'next') {
      active = active.next('.multi-step-section').addClass('active');
      $('#progressbar > span').css({
        'width': $('#progressbar > span').width() / $('#progressbar').width() * 100 + sectionProgress + '%'
      });
    }

    if ((active).find("input[type='radio'], input[type='checkbox']").is(':checked')) {
      $('#next').removeAttr('disabled');
    } else if ((active).find("input[type='text'], input[type='textarea']").val() != "") {
      console.log('not empty');
      $('#next').removeAttr('disabled');
    } else {
      $('#next').attr('disabled', 'disabled');
    }

    if (active.is(":not(:first-child)")) {
      $('#prev').show();
    } else {
      $('#prev').hide();
    }

    if (active.is(":last-child")) {
      $('#next').hide();
      $('#submit').show();
    } else {
      $('#next').show();
      $('#submit').hide();
    }
  });
});



  
    
  
  
    
      Question 1
      Loft
        Garage ceiling
        Floor
        Ceilings
        Stud walls
        Special project
        
        
        
      
    
    
      Question 2
      
    
    
      Question 3
      up to 30m2
        30-60m2
        60-100m2
        0ver 100m2
        
        
        
      
    
    
      Question 4
      Ready to go
        In the next couple of months
        In a few months
        
        
        
      
    
    
      Question 5
      Domestic
        Commercial
        Construction
        
        
        
      
    
    
      Question 6
      
      
        or

mplungjan · Accepted Answer

You mean

    var active = $('.multi-step-section.active');  
    var dis = active.find("input[type='radio']:checked").length == 0;
    dis = dis && active.find("input[type='checkbox']:checked").length == 0;
    dis = dis && active
      .find("input:text,textarea")
      .map(function(idx, elem) {
        return $(elem).val() || null; // beware of valid values of 0 (zero)
      }).get().length == 0;

    $('#next').prop('disabled', dis);

Code for progressbar:

  $('#pBar').prop("max",$('.multi-step-section').length).val(0); // loading
  ...
  $('#pBar').val(active.index()); // each click on the prev/next

Running example

// reusable function
function checkInput() {
    var active = $('.multi-step-section.active');  
    var dis = active.find("input[type='radio']:checked").length == 0;
    dis = dis && active.find("input[type='checkbox']:checked").length == 0;
    dis = dis && active
      .find("input:text,textarea")
      .map(function(idx, elem) {
        return $(elem).val() || null;
      }).get().length == 0;

    $('#next').prop('disabled', dis);
}

$(function() {
  $(":input").on("input", checkInput); // any input 

  $('#pBar').prop("max",$('.multi-step-section').length).val(0);

  $('.multi-form-actions button').on('click', function() {

    var el = $(this).attr('id');
    var active = $('.multi-step-section.active');
    var count = $('.multi-step-section').length;
    active.add(active.siblings()).removeClass('active');

    if (el == 'prev') {
      active = active.prev('.multi-step-section').addClass('active');
    } else if (el = 'next') {
      active = active.next('.multi-step-section').addClass('active');
    }
    $('#pBar').val(active.index());


    checkInput(); // reset the continue if needed


    if (active.is(":not(:first-child)")) {
      $('#prev').show();
    } else {
      $('#prev').hide();
    }

    if (active.is(":last-child")) {
      $('#next').hide();
      $('#submit').show();
    } else {
      $('#next').show();
      $('#submit').hide();
    }
  });
});

.multi-step-section {
  display: none
}

.active {
  display: block
}

#progressbar { background-color:green;}



  
    
  
  
    
      Question 1
      Loft
        Garage ceiling
        Floor
        Ceilings
        Stud walls
        Special project
        
        
        
      
    
    
      Question 2
      
    
    
      Question 3
      up to 30m2
        30-60m2
        60-100m2
        0ver 100m2
        
        
        
      
    
    
      Question 4
      Ready to go
        In the next couple of months
        In a few months
        
        
        
      
    
    
      Question 5
      Domestic
        Commercial
        Construction
        
        
        
      
    
    
      Question 6
      
      
        or
      
      
    
  
  
    

    
  

70 %

Remove disabled attr from button if text has value not working

Answers (1)

Related Questions