How to put condition on next button in HTML/Js application?

Question

I am creating a HTML/JS application in which i need to put condition on next button so it can't move to next page i am using same button code for each section so if i want to put condition do i need to make separate button for each section ... i am not able to do it using required for radio button ..please suggest what should be done here

$('.btnNext').click(function() {
  // e.stopPropagation();
  $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
});



  
    
      
        Question 1:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
    
      
        Question 2:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
    
      
        Question 3:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
  
  Next
  Previous


  
    
      
        Question 4:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
    
      
        Question 5:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
    
      
        Question 4:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
    
      
        Question 4:
        
          
            
            1
          
          
            
            2
          
          
            
            3
          
        
      
    
  
  Next
  Previous

JS Part :-

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let fullName = document.querySelector('#fullName').value
  let email = document.querySelector('#email').value
  let age = document.querySelector('#age').value
  var ctx = document.querySelector('#resultsChart').getContext('2d');
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  var options = {
    type: 'bar',
    data: {
      labels: ["Section 1", "Section 2"],
      datasets: [{
          label: 'Total Scored',
          data: [section1Question, section2Question, 30],
          backgroundColor: '#E91E63',
          borderWidth: 1
        },
        {
          label: 'Percentage %',
          data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30],
          backgroundColor: '#004D40',
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        responsive: true,
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  }

  //Final Results and validation
  if (fullName.value != '' && email.value != '' && age.value != '') {
    if (section1Total > 0 && section2Total > 0) {
      finalResults.innerHTML += genDetails(fullName, email, age)
      finalResults.innerHTML += "Results"
      finalResults.innerHTML += genTable(section1Question, section1Total, 1)
      finalResults.innerHTML += genTable(section2Question, section2Total, 2)
      finalResults.innerHTML += "Chart Results"
      document.getElementById("control").style.display = "block";
      document.getElementById("resultsChart").style.display = "block";
      document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
      new Chart(ctx, options); //show chart
    } else {
      finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
    }
  } else {
    finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section '
  }
}

function genDetails(name, email, age) {
  var result = "Personal Info"
  result += "Full name: " + name + "
"
  result += "Email name: " + email + "
"
  result += "Age:  " + age + "
"
  return result
}

function genTable(ques, total, section) {
  var result = "Section " + section + ":
"
  var tr = "" + total + "" + ((total / (ques * 3)) * 100).toFixed(2) + ""
  result += "" + tr + "Total Score Percentage
"
  return result
}
$('.btnNext').click(function() {
  $('.nav-tabs .active').closest('li').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-tabs .active').closest('li').prev('li').find('a').trigger('click');
});

s.kuznetsov · Accepted Answer

I was bored, and with a quick hand I made this decision for you. This solution consists in the default absence of a button further, and when selecting all the radios in the corresponding block, insert it as an element, using the append() method. Like this:

$(this).closest(".section_main").find(".btn-nav-group").append('Next');

For correctness, create a container for your buttons. Like this:


    Previous

The basis of this logic lies in checking the number of all radio buttons with the selected ones. Like this:

if (checked_radio.length == all_radio.length / 3) { ... }

Also, add the same class for the main div's. I added class section_main.

$('input[type="radio"]').on("change", function () {
    let all_radio = $(this).closest(".section_main").find('input[type="radio"]');
    let checked_radio = $(this).closest(".section_main").find('input[type="radio"]:checked');

    if (checked_radio.length == all_radio.length / 3) {
        $(this).closest(".section_main").find(".btn-nav-group").append('Next');
    }
});

$(".btnNext").click(function (e) {
    e.preventDefault();
    $("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
});



    
        
            
                Question 1:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
        
            
                Question 2:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
        
            
                Question 3:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
    
    
        Previous
    


    
        
            
                Question 4:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
        
            
                Question 5:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
        
            
                Question 4:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
        
            
                Question 4:
                
                    
                        
                        
                            1
                        
                    
                    
                        
                        
                            2
                        
                    
                    
                        
                        
                            3
                        
                    
                
            
        
    
    
        Previous

How to put condition on next button in HTML/Js application?

Answers (1)

Related Questions