Question

Im trying to set up a form where a user has to pick an option from a select or enter a value in an input. One must be required but not both. I was attempting to write an if else statement

if the state is selected then remove the class on province, if province is filled then remove class on state

$("#state").bind('change' , function() {
     if ( $(this).is(':selected') ) {
          $(this).parents('.foreign').removeClass("required");
      }  
      else{
      $(#province).is(':filled');
      $(this).parents('.usa').removeClass("required");
          }  
});

But I know this is not how to do it. Hopefully someone gets the idea of what I am trying. thanks in advance! Basically you can pick this or that but not both.

Answer 1

Off the top of my head, try this:

<select id="state_province">
   <option value="state">State</option>
   <option value="province">Province</option>

$('#state_province').bind('change', function() {
   if($('option:selected', this).val() == 'state') {
      $('option[value=state]', this).show().addClass("required");
      $('option[value=province]', this).hide().removeClass("required");
   } else {
      $('option[value=province]', this).show().addClass("required");
      $('option[value=state]', this).hide().removeClass("required");
   }
});

Edit based on your comment:

Ah, so you want something like: (sorry, I’m doing this from memory, so there may be tweaks)

<select id="state" class="state_province">
...
</select>

<input type="text" id="province" class="state_province" />

===

$('.state_province').bind('change', function() {
   var jThis = $(this);
   if ( jThis.is('select:selected') ) { // state selected
      jThis.addClass("required");
      $('input.state_province').removeClass("required");
      $(this).parents('.usa').addClass("required");
   }
   if ( jThis.is('input:filled') ) { // province filled
      jThis.addClass("required");
      $('select.state_province').removeClass("required");
      $(this).parents('.usa').removeClass("required");
   }
});