How do I disable the submit button until all fields are complete in a bootstrap modal?

Question

How do I check if the input fields are filled up before I enable the submit button in the modal? I'm also trying to figure out how I can call my function once I open my button. I tried calling a function on click but it won't work.

I'm not sure how to implement a function to check the input fields and how to call the function when the modal is opened

function checkModal() {}

function validate() {
  if ($('#id').val() &&
    $('#fname').val() &&
    $('#lname').val() &&
    $('#sub1').val() &&
    $('#sub2').val() &&
    $('#sub3').val() &&
    $('#sub4').val() &&
    $('#sub5').val() &&
    $('#grade1').val() &&
    $('#grade2').val() &&
    $('#grade3').val() &&
    $('#grade4').val() &&
    $('#grade5').val().length > 0) {
    // disable bootstrap button
  }
}

$(document).ready(function() {
  validate();
  $('#id, #lname, #fname, #sub1, #sub2, #sub3, #sub4, #sub5, #grade1, #grade2, #grade3, #grade4, #grade5').change(validate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="exampleModalLabel">New Student Form</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">

        <h6>ID</h6>
        <input type="text" id="id">
        <h6>Lastname</h6>
        <input type="text" id="lname">
        <h6>Firstname</h6>
        <input type="text" id="fname">
        <h6>Course</h6>
        <select name="courses" id="courses">
          <option value="BS Information Technology">BS Information Technology</option>
          <option value="BS Information Systems">BS Information Systems</option>
          <option value="BS Computer Scicence">BS Computer Scicence</option>
          <option value="BS Data Science">BS Data Science</option>
        </select>

        <hr>

        <div class="container1">
          <h6>Subject 1</h6>
          <input type="text" id="sub1" required>

          <h6>Subject 2</h6>
          <input type="text" id="sub2" required>

          <h6>Subject 3</h6>
          <input type="text" id="sub3">

          <h6>Subject 4</h6>
          <input type="text" id="sub4">

          <h6>Subject 5</h6>
          <input type="text" id="sub5">
        </div>

        <div class="container2">
          <h6>Grade</h6>
          <input type="text" id="grade1">

          <h6>Grade</h6>
          <input type="text" id="grade2">

          <h6>Grade</h6>
          <input type="text" id="grade3">

          <h6>Grade</h6>
          <input type="text" id="grade4">

          <h6>Grade</h6>
          <input type="text" id="grade5">

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" aria-disabled="true" onclick="checkModal()" id="add_student">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Your JS was invalid. I made you a snippet and change `;` to `)` and closed the `checkModal() ` since it should not wrap the document.ready — mplungjan, Apr 05 '21 at 07:02

mplungjan · Accepted Answer · 2021-04-05T07:59:05.047

You can find all empty and disable if any found

const empty = $('.modal-body :input')
  .filter(function() { 
    return this.value.trim() === "" 
  }).length>0;
$('#add_student').prop('disabled',empty);

Perhaps from the start:

$(function() {
  const $inputs = $('.modal-body :input');
  const $addStudent = $('#add_student');
  $inputs.on('change',function() {
    const empty = $inputs
      .filter(function() { return this.value.trim() === "" })
      .length>0;
    $addStudent.prop('disabled',empty);
  });
})

score 1 · Answer 2 · answered Apr 05 '21 at 06:58

for the disabled, you can use prop("disabled", true); to your button. Try the below code.

if (
    $('#id').val() == '' ||
    $('#fname').val() == '' ||
    $('#lname').val() == '' ||
    $('#sub1').val() == '' ||
    $('#sub2').val() == '' ||
    $('#sub3').val() == '' ||
    $('#sub4').val() == '' ||
    $('#sub5').val() == '' ||
    $('#grade1').val() == '' ||
    $('#grade2').val() == '' ||
    $('#grade3').val() == '' ||
    $('#grade4').val() == '' ||
    $('#grade5').val() == ''
){
    $('#add_student').prop("disabled",true);
}

Khan Asfi Reza · Answer 3 · 2021-04-05T07:42:21.270

Give all of your inputs a common class like modal__inputs

// Select all inputs
const all_inputs = document.querySelectorAll(".modal__inputs");
// Set disabled variable false
let disabled = false;

// Map through all the inputs, 
//if any input is empty the disabled variable will be set to true

for(let i=0;i<all_inputs.length;i++){
  if(all_inputs[i].value.trim() === ""){
    disabled = true;
    break;
  }
}

// Set button disabled
const button = document.getElementById("add_button");
button.disabled = disabled;

How do I disable the submit button until all fields are complete in a bootstrap modal?

3 Answers3