CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerinternet-explorer-11
Essex
Essex

Reputation: 6128

Javascript <input> doesn't work well with IE 11

I'm working on my Django project and I'm getting an issue with Javascript part and IE 11. My functions work well with Firefox and Chrome but not as I want with Internet Explorer 11.

Process :

I have a table with checkboxes, a dropdown list and a submitting button. This button is disabled while I didn't have any checkboxes checked and any value selected in the dropdown list.

Pictures :

enter image description here

enter image description here

enter image description here

enter image description here

As you can see, the submit button is disabled if :

The submit button is enabled only if checkboxes and list value are selected.

My code :

Javascript part :

<script type="application/javascript">

    function checkValid() {
      var cbChecked = $(".fake-radio").is(":checked");  // check if checked

      var selectelem = document.getElementById('manage-doc-year');
      var btnelem = document.getElementById('document-button');
      btnelem.disabled = !selectelem.value;
      var dropdown_value = btnelem.disabled;

      $("#document-button").prop("disabled", !cbChecked || dropdown_value);
    }

    $(function () {
      checkValid(); // run it for the first time
      $(".fake-radio").on("change", checkValid);  // bind checkbox
      $("#manage-doc-year").on("input", checkValid)  // bind textbox
    });

</script>

HTML part :

<div class="col-md-offset-1 col-md-5">
  <h4> {% trans "List of documents:" %} </h4>
  <form action="" method="POST">
    {% csrf_token %}
    <table id="document-table" class="table table-bordered table-striped table-condensed table_model">
      <thead>
      <tr>
        <th>{% trans 'Choice' %}</th>
        <th>{% trans 'Document title' %}</th>
      </tr>
      </thead>
      <tbody>
      {% for document in query_document %}
        <tr>
          <td><input type="checkbox" class="fake-radio" id="document-checkbox" name="DocumentChoice"
                     value="{{ document.id }}"></td>
          <td>{{ document.title }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

    <select id="manage-doc-year" name="q1year" value="{{ request.get.q1year }}" required>
      <option selected="selected">
        <option value="" selected disabled hidden></option>
      </option>
    </select>

    <button class="btn btn-default" id="document-button" type="submit"
            name="UpdateDocument">{% trans "Submit" %}</button>
  </form>
</div>

IE 11 :

With IE 11, it works only if I select dropdown value first, then check the checkboxes. But not if I check in first, then I select value. Why ?

Thank you !

Upvotes: 1

Views: 1109

Answers (2)

barbsan
barbsan

Reputation: 3458

IE doesn't support input event on <select> element.
Consider listening on change event if on IE.

You can write :

$("#manage-doc-year").on("change", checkValid)

Instead of :

$("#manage-doc-year").on("input", checkValid)


Note: Although change event is supported by all browsers, its behaviour is a bit different than input event's (source):

change fires less often than input – it only fires when the changes are committed by the user.

and may vary on different browsers (source):

Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in <select> elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the <select>

Upvotes: 2

Bronzdragon
Bronzdragon

Reputation: 355

Sounds like changing the dropdown is not triggering your event. This is a known issue with Internet Explorer (I believe that if you use the keyboard to select a dropdown entry, it does work). I recommend you tie the event to click instead.

Upvotes: 0

Related Questions