How to hide a button until a selection is made in the dropdown in jquery?

I have three dropdowns on the page. Upon selecting a value in the first dropdown, the other two dropdowns gets populated. Now, I want to have a button appear upon making a selection in either second or third dropdown.

Here’s what I have tried:

dropdowns:

<form class="cmxform" action ='functions/processform.php' id="Form1" method="post">
           <legend> Faculty Transaction Form</legend>
            <label for="addname">Please Select School</label>
           <select class="form-control" name="school" id="school">
                <?php
                $nameslist = $getschool->getSchool();
                oci_execute($nameslist, OCI_DEFAULT);
                while ($row = oci_fetch_array($nameslist, OCI_ASSOC+OCI_RETURN_NULLS)) {
                    echo '<option value="' . $row['SCHOOLPROPERNAME'] . '">' . $row['SCHOOLPROPERNAME']. '</option>';
                }
                ?>
           </select>
            <label for="names">Please Select Name</label>
          <select class="form-control" name="names" id="names1234">
               <option value='0' >Select Name</option>

        </select>
            <label for="names">Recall FTF in progress</label>
          <select class="form-control" name="ftf" id="ftf">
               <option value='0' >Select Name</option>

        </select>
            <p>Paid/Unpaid/Terminated:</p>
            <div>
            <input type="radio" id="paid" name="paid" value="paid" >
            <label for="paid">Paid</label>
            </div>
            <div>
            <input type="radio" id="unpaid" name="unpaid" value="unpaid" >
            <label for="unpaid">Un-Paid</label>
            </div>
            <div>
            <input type="radio" id="terminated" name="terminated" value="terminated" >
            <label for="terminated">Terminated</label>
            </div>
        </form>
        <input type="submit" name="submit" id="recallFTF"  value="Recall FTF"  />

    </div>
</div>

Jquery:

$(document).ready(function(){
$('#names1234').change(function() {
  $('#recallFTF').show();
  if ($('#names1234').val() === '') {
    $('#recallFTF').show();
  } else {
      $('#recallFTF').hide();
  }
});

 });

The above code works the opposite. With that, there’s always the button which disappears on selection made in the second dropdown. I have followed a few similar questions here but none of them was able to answer my question. Please let me know if you want to see more code. I have only posted the relevant part.

Answer

This will show the button when either of the latter select boxes are not empty.

With your code, you checked if the value was '' but you set the option value to 0 so it was not ''. I’ve added a few <option> to help you with the understanding of what I mean. I have also hidden the button at the start of the jQuery since you only want it to show when there is a full form to submit.

You’ll notice the grouping of the selectors ($('#names1234, #ftf')). This allows you to check against both of the select boxes at the same time without having to duplicate code.

$(document).ready(function() {
  $('#recallFTF').hide();
  $('#names1234, #ftf').change(function() {
    $('#recallFTF').show();
    if ($('#names1234').val() !== '' || $('#ftf').val() !== '') {
      $('#recallFTF').show();
    } else {
      $('#recallFTF').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cmxform" action='functions/processform.php' id="Form1" method="post">
  <legend> Faculty Transaction Form</legend>
  <label for="addname">Please Select School</label>
  <select class="form-control" name="school" id="school">
    <?php
                $nameslist = $getschool->getSchool();
                oci_execute($nameslist, OCI_DEFAULT);
                while ($row = oci_fetch_array($nameslist, OCI_ASSOC+OCI_RETURN_NULLS)) {
                    echo '<option value="' . $row['SCHOOLPROPERNAME'] . '">' . $row['SCHOOLPROPERNAME']. '</option>';
                }
                ?>
  </select>
  <label for="names">Please Select Name</label>
  <select class="form-control" name="names" id="names1234">
    <option value=''>Select Name</option>
    <option value='0'>0</option>
    <option value='1'>1</option>

  </select>
  <label for="names">Recall FTF in progress</label>
  <select class="form-control" name="ftf" id="ftf">
    <option value=''>Select Name</option>
    <option value='0'>0</option>
    <option value='1'>1</option>

  </select>
  <p>Paid/Unpaid/Terminated:</p>
  <div>
    <input type="radio" id="paid" name="paid" value="paid">
    <label for="paid">Paid</label>
  </div>
  <div>
    <input type="radio" id="unpaid" name="unpaid" value="unpaid">
    <label for="unpaid">Un-Paid</label>
  </div>
  <div>
    <input type="radio" id="terminated" name="terminated" value="terminated">
    <label for="terminated">Terminated</label>
  </div>
</form>
<input type="submit" name="submit" id="recallFTF" value="Recall FTF" />

</div>
</div>

Advertisement

Answer