<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Insert the modal elements $('body').append('<div id="submit-alert" class="modal fade">\ <div class="modal-dialog">\ <div class="modal-content">\ <div class="modal-header" style="min-height:40px;">\ <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>\ <h4 class="modal-title"></h4>\ </div>\ <div class="modal-body">\ <p>You have not answered all questions!</p>\ </div>\ <div class="modal-footer">\ <a href="#" class="btn btn-default proceed">Proceed Anyway</a>\ <a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>\ </div>\ </div>\ </div>\ </div>'); // Listener on the modal "Proceed" button $('#submit-alert a.proceed').on('click', function(e) { e.preventDefault(); $('#movenextbtn').prop('disabled', false).removeClass('disabled active').trigger('click'); }); // Listener on the "Next" button $('#movenextbtn').on('click', function(e) { // Conditions when to show the modal pop-up // In this example, show the modal IF: // The modal pop-up is not currently shown // AND // ( // Q1 (multi-choice) has less than one checked item // OR // Q2 (list-radio) is unanswered // OR // Q3 (numeric) is unanswered // ) if(!$('#submit-alert').is(':visible') && ($('.multiple-opt:eq(0) input[type="checkbox"]:checked').length == 0 || $('.list-radio:eq(0) input[type="radio"]:checked').length == 0 || $('.numeric:eq(0) input[type="text"]:eq(0)').val() == '')) { e.preventDefault(); $('#submit-alert').modal('show'); } $('#movenextbtn').prop('disabled', false).removeClass('disabled active'); }); }); </script>