mardi 5 mai 2015

jQuery disable opposite input field IE8

I have a simple Rails 3 form with two separate input fields. If a user begins typing into one field, I would like the other field to immediately become disabled. This is fairly straightforward, and I currently have a working solution for IE9+, Chrome, FF, and Safari - using the code from this post: Disable opposite input if I type into another of a pair

However, it does not work in IE8 for some reason. Instead, as soon as the user begins typing, both fields are disabled and my form fails the jQuery validation (as if it was submitted early, even though the submit button has not been clicked).

My Form:

<%= form_tag instructor_profiles_path, :class => "form-inline", :role => "form", :method => :get, :id => "search" do %>

  <div class="form-group">
    <%= select_tag :search_miles, options_for_select(search_miles), :class => "form-control input-sm" %><span>&nbsp;&nbsp;Miles of&nbsp;</span>
    <%= text_field_tag :search_airport, params[:search_airport], :maxlength => 4,   :class => "form-control input-sm", :id => "AirportInputId", :placeholder => "Airport ID" %><span>&nbsp;&nbsp;or&nbsp;</span>
    <%= text_field_tag :search_zip_code, params[:search_zip_code], :maxlength => 5, :class => "form-control input-sm", :id => "ZipcodeInputId", :placeholder => "Zip code" %>
  </div>

  <%= submit_tag "Search!", :name => nil, class: "btn btn-primary btn-sm" %>

<% end %>

My jQuery:

$(document).ready(function() {

  // Validations for search form
  $('#search').validate({   
      rules: {
          search_airport: {
              rangelength:[3,4]
          },
          search_zip_code: {
              digits: true, 
              rangelength:[5,5]
          }
      }, // end rules
      messages: {
          search_airport: {
              rangelength: "Please enter a valid US Airport ID."
          },
          search_zip_code: {
              digits: "Please enter only digits for zip code.",
              rangelength: "Please enter a valid 5-digit zip code."
          }
      },
      // The following function is what places the error message after the entire form group
      errorPlacement: function(error, element) {
          error.appendTo( element.parents().eq(1) );
          error.addClass('error-message');          
      }     
  }); // end validate()

  // Disables the opposite input field so user cannot enter Airport ID AND Zip code
  function mutuallyExclusive( e ) { 

    var AIRPORTvalue = $('#AirportInputId').val();
    var ZIPCODEvalue = $('#ZipcodeInputId').val();

    if ( AIRPORTvalue.length > 0) {
      $('#ZipcodeInputId').prop("disabled", true);
    } else {
      $('#ZipcodeInputId').removeAttr("disabled");
    }

    if ( ZIPCODEvalue.length > 0) {
      $('#AirportInputId').prop("disabled", true);
    } else {
      $('#AirportInputId').removeAttr("disabled");
    }    

  }

  $( '#AirportInputId' ).on( 'change keyup', mutuallyExclusive );   
  $( '#ZipcodeInputId' ).on( 'change keyup', mutuallyExclusive );   

}); // end ready

Aucun commentaire:

Enregistrer un commentaire