Disable button in jQuery until all required fields have values (specifically with select)

Question

At the moment I have the following form:

<table>
                        <tr><td class="labelTD"><label for="manifestNumber">Manifest No.:</label></td><td class="detailsTD"><input type="text" class="form-control" placeholder="Manifest Number" name="manifestNumber" id="manifestNumber" required></td><td><span class="requiredInput">*</span></td></tr>
                        <tr><td class="labelTD"><label for="claimOrigin">Carrier Origin:</label></td><td class="detailsTD"><select id="claimOrigin" class="form-control" required name="claimOrigin">
                            <option></option>
                            @foreach($origins as $origin)
                             <option value="{{ $origin->id }}">{{ $origin->customer_name }}</option>
                             @endforeach
                            </select></td><td><span class="requiredInput">*</span></td></tr>
                        <tr><td class="labelTD"><label for="originTerminal">Origin Terminal:</label></td><td class="detailsTD"><select class="form-control" required><option selected value="">Please Select</option><option value="CINC-Cincinatti">CINC-Cincinatti</option></select></td><td><span class="requiredInput">*</span></td></tr>
                        <tr><td class="labelTD"><label for="date">Date Unloaded:</label></td><td class="detailsTD"><input type="date" name="claimDate" id="claimDate" class="form-control" required></td><td><span class="requiredInput">*</span></td></tr>
                    </table>

With this button at the end:

<button id="createManifestButton" class="btn btn-primary">Create New Manifest</button>

Now I've been trying to use others' examples but the script is refusing to work for me, namely the select option.

At the moment, I'm using this jsfiddle: http://jsfiddle.net/qKG5F/3370/ which is based on the answers from this question: Disabling submit button until all fields have values

Unfortunately, in the comments, no one ever responded to the questions about other uses (like radio buttons, checkboxes), but the select issue was never responded to. So is there anything I can do? I want to disable the button specifically because it runs an AJAX script and for the sake of the average user, I just want to disable the button until all fields, including the select are filled out.

mejiajuanbta · Answer 1 · 2018-03-08T02:45:35.287

(function() {    
    $('.manifestSubmit').change(function(){
      $('.manifestSubmit').each(function(idx, elm){ 

        if (elm.value == 'Please Choose' || elm.value.length == 0) {
          $('#register').attr('disabled', 'disabled');
          return false;      
        }

        if ((idx+1) == $('.manifestSubmit').length)
          $('#register').removeAttr('disabled');
      });
    });
})()

You can do what says "Rasmus Stougaard" with the option tag and avoid the condition (elm.value == 'Please Choose' || )

score 1 · Answer 2 · answered Mar 08 '18 at 01:59

1

In your example the select "blank" option should have the value "" like this:

<option value="">Please Choose</option>

Check this updated fiddle http://jsfiddle.net/qKG5F/3380/

answered Mar 08 '18 at 01:59

Rasmus Stougaard

433
2
11

score 1 · Accepted Answer · answered Mar 08 '18 at 02:05

Based on the previous jsfiddle you linked, I forked and altered to code to work with your form. See here: http://jsfiddle.net/xrc35p7b/6/

(function() {
  $('.form-required').change(function() {

    var empty = false;
    $('.form-required').each(function() {
      if ($(this).val() == '') {
        empty = true;
      }
    });

    if (empty) {
      $('#createManifestButton').attr('disabled', 'disabled');
    } else {
      $('#createManifestButton').removeAttr('disabled');
    }
  });
})()

All form fields (of any type) with the class "form-required" will need to have a non-blank value in order to enable the button.

Disable button in jQuery until all required fields have values (specifically with select)

3 Answers3