CODEWITHSUNDEEP
jqueryform-submitdisabled-controlsubmit-button
Jairellle
Jairellle

Reputation: 3

Enable a Disabled Submit Button when both a Select field and Input field each have Values?

I love this site, and have been able to learn so much from you all. However, here is a problem I cannot find the answer to:

I have a mini-form with a Select dropdown and an Input field (both required) with a disabled Submit button. My client needs the submit button to be disabled/grayed out until both of these fields are filled, but I cannot get the action to work.

The code I provided only works with the Input so far. I tried to incorporate "($('#selectBox').on('change', function() {" within the initial function to signal to the Select field, but it breaks everything and I don't know where to go with it.

Rather than having the fields work independently (as I appear to have been doing), I think each field needs to bounce/read off each other within the JQuery code to decipher that each field has a valid value. But I am struggling to find the connection (I am still fairly new to JS/JQ - please pardon my ignorance considering this assumption, if wrong).

I searched everywhere for a solution, but I have not had any luck finding the answer. Please let me know if I missed a link or previous question which can help me, and thank you for any insights!

https://jsfiddle.net/jdraeger/2w68qs0y/2/

$(function() {
      $('#searchInput').keyup(function() {
      if ($(this).val() == '') {
          $('.enableOnInput').prop('disabled', true);
    } else {
          $('.enableOnInput').prop('disabled', false);
        }
      });
   })
<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

Upvotes: 0

Views: 1418

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Two fields and two events...

You can write one "handler" for this. Simply use the .on() method, which allows to bind many events (keyup and change here). Then, in the comparison, check both value. If one or the other is empty, disable the button.

$(function() {
  $('#searchInput, #selectBox').on('keyup change',function() {
    if ($('#searchInput').val() == '' || $('#selectBox').val() == '') {
      $('.enableOnInput').prop('disabled', true);
    } else {
      $('.enableOnInput').prop('disabled', false);
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

This could even be writen shorter, by placing the condition directly in the true/false second argument of .prop():

$(function() {
  $('#searchInput, #selectBox').on('keyup change',function() {
    $('.enableOnInput').prop('disabled', ($('#searchInput').val() == '' || $('#selectBox').val() == ''));
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

Upvotes: 0

Aditya Narayan Shahi
Aditya Narayan Shahi

Reputation: 1

You can do so by creating a new function which will make enable your submit button and will be called whenever either text input field changes or select field changes

$('#selectBox','#searchInput').on('change', function() {
 enablingFunction();
 });

function enablingFunction(){
  if($('#selectBox').val() != "" && $('#searchInput').val() != ""){
    $('#submitBtn').prop("disabled", false);
   }
}

Upvotes: 0

Related Questions