1

I have a small form where I have two input boxes, 1 select box and 1 checkbox and submit button.

I want the submit to be enabled when all fields are filled. Til now I am able to enable submit button after both input box value filled but I am not able to enable for select box and checkbox.

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#SaveNxt').attr('disabled', 'disabled');

$('#contentHoldEdu input').change(function() {
  name = $('#Name').val()
  admissionyr = $('#AdmissionYear').val()
  SeatProgramLevel = $('#courseSelect option:selected').text();
  //SeatAvailableFaculties = $('.eduSelectedCheck').val()

  if ((name.length > 0) && (admissionyr.length > 0) && (course.length > 0)) {
    $('#Save').removeAttr('disabled');
  } else {

    $('#Save').attr('disabled', 'disabled');
  }
})
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" />

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="0" disabled selected default>--Select--</option>
                    <option value="B.tech">B.tech</option>
                    <option value="mba">Mba</option>
                   </select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" /></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button">submit</button>
    </div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Arpit Gupta
  • 371
  • 3
  • 20
  • course is not defined - how about `$('#courseSelect')[0].selectedIndex>0` and `$("[type=checkbox]").is(":checked")` – mplungjan Apr 04 '17 at 13:43
  • @mplungjan could you please help me with some working fiddle with my current jquery code? – Arpit Gupta Apr 04 '17 at 13:46
  • Many other problems with your code 1. Both the input (name and AdmissionYear) have same 'name' attribute. Correct that otherwise form will not save values 2. Is there any specific reason why you have put in a table for alignment, instead of a div? 3. Assign an id or class to the checkbox field – Shariq Hasan Khan Apr 04 '17 at 13:54

5 Answers5

1

I wpuld say excecute the function onkeyup for input text box. Otherwise if the user fills in the input textbox last he would not be able to directly click on the submit button. check out my code below

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#SaveNxt').attr('disabled', 'disabled');

function changeDetected(){
  name = $('#Name').val()
  admissionyr = $('#AdmissionYear').val()
  SeatProgramLevel = $('#courseSelect').val();

  if ((name.length > 0) && (admissionyr.length > 0) && (SeatProgramLevel.length > 0) && ($('#confirmRoom').attr('checked') != undefined) && ($('#confirmRoom2').attr('checked') != undefined) && ($('#confirmRoom3').attr('checked') != undefined)) {
    $('#Save').removeAttr('disabled');
  } else {

    $('#Save').attr('disabled', 'disabled');
  }
}
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" onkeyup="changeDetected()"/>

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" onkeyup="changeDetected()" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1" onchange="changeDetected()">
<option value="">--Select--</option>
                    <option value="B.tech">B.tech</option>
                    <option value="mba">Mba</option>
                   </select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" id="confirmRoom" onchange="changeDetected()"/></td>
                  <td>Yes</td>
                </tr>
                <tr>
                  <td>
                    <input type="checkbox" id="confirmRoom2" onchange="changeDetected()"/></td>
                  <td>Yes</td>
                </tr>
                <tr>
                  <td>
                    <input type="checkbox" id="confirmRoom3" onchange="changeDetected()"/></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button" disabled="disabled">submit</button>
    </div>
lhavCoder
  • 961
  • 5
  • 7
  • thanks , but i have one doubt what if we have more than two checkbox ? – Arpit Gupta Apr 04 '17 at 14:19
  • you add onchange="changeDetected()" on each of them. and you'll have to check if they have been checked inside the changeDetected function. – lhavCoder Apr 04 '17 at 14:20
  • if you dont want to keep checking, you could put all the input elements in a form tag and put the required atrribute in the input tags. This way you dont need to keep checking your changeDetected() function. The form wont allow you to move foward unless all inputs have been filled. Let me know if you want a code snippet for that. – lhavCoder Apr 04 '17 at 14:29
  • hey @IhavCoder i dont want to use Required attr in input tags , i want to achieve it by jquery only because later i will convert my form into dynamic so all checkbox , options in select will come from backend. it would be great if you help me by jquery only (Fiddle with multiple checkbox) – Arpit Gupta Apr 05 '17 at 05:25
  • i edited the above the code. check it out.... (modify the html according to your needs ) – lhavCoder Apr 05 '17 at 11:21
  • i rechecked its working. Why do you say its not working? – lhavCoder Apr 06 '17 at 12:39
  • sorry! it was chrome browser issue. – Arpit Gupta Apr 06 '17 at 12:42
  • if any of the answers helped you, you could upvote them :) – lhavCoder Apr 06 '17 at 12:56
0

To check if a checkox is checked: https://stackoverflow.com/a/7960219/978649

And to check if select has the value that you expect just use like a common input text:

if($('#courseSelect').val() == '1') { ... }
// or
if($('#courseSelect').val() != '0') { ... }
Community
  • 1
  • 1
Lucas Franco
  • 383
  • 2
  • 13
0

This should work.

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#SaveNxt').attr('disabled', 'disabled');

$('#contentHoldEdu input').change(function() {
  name = $('#Name').val()
  admissionyr = $('#AdmissionYear').val()
  SeatProgramLevel = $('#courseSelect option:selected').text();
  checkCtrl =  $("#thisCheck").is(':checked');

  if ((name.length > 0) && (admissionyr.length > 0) && checkCtrl == true && SeatProgramLevel != '--Select--' ) {
    alert('enable' + SeatProgramLevel + checkCtrl );
    $('#Save').prop('disabled','');
  } else {
     alert('disable' +  SeatProgramLevel + checkCtrl );
    $('#Save').prop('disabled', 'disabled');
  }
})
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" />

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="0" disabled selected default>--Select--</option>
                    <option value="B.tech">B.tech</option>
                    <option value="mba">Mba</option>
                   </select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input id="thisCheck" type="checkbox" /></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button">submit</button>
    </div>
ProgrammerV5
  • 1,915
  • 2
  • 12
  • 22
0

You could use the design pattern "State Machine" to handle situations, such this one. Here is you can checkout a simple example of that pattern: http://www.dofactory.com/javascript/state-design-pattern

The State pattern provides state-specific logic to a limited set of objects in which each object represents a particular state.

Dmytro Medvid
  • 4,988
  • 3
  • 25
  • 29
0

This can be accomplished with no HTML modification and in only one function:

function isReady() {
  contentReady = 0;
  $('#contentHoldEdu input, #contentHoldEdu select').each(function () {
    if ($(this).val() && !($(this).val() == "on" && !$(this).is(":checked"))) {
      contentReady++;
    }
  });
  $("#Save").attr("disabled", contentReady != 4)
}


var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#Save').attr('disabled', true);

$('#contentHoldEdu input, #contentHoldEdu select').on('input',isReady)

function isReady() {
  contentReady = 0;
  $('#contentHoldEdu input, #contentHoldEdu select').each(function () {
    if ($(this).val() && !($(this).val() == "on" && !$(this).is(":checked"))) {
      contentReady++;
    }
  });
  console.log(contentReady);
  $("#Save").attr("disabled", contentReady != 4)
}
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" />

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="" disabled selected default>--Select--</option>
                    <option value="B.tech">B.tech</option>
                    <option value="mba">Mba</option>
                   </select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" /></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button">submit</button>
    </div>
Neil
  • 14,063
  • 3
  • 30
  • 51