Question

I need to apply/remove to an input field according to a user’s selection in a separate drop down form – but I can’t figure out how to target the input’s class.

I need to add/remove the ‘pageRequired’ class from this input:

<input  type="text" title="Company Required" name="customfields-tf-2-tf" class="inputclass pageRequired textInput" id="customfields-tf-2-tf" />

When the user selects one of two options from a drop down field. For example:

<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" >
<option value="Owner"<?php if(in_array("Owner",$temp_values)) { ?> selected='selected'<?php } ?>> Owner</option>
<option value="Broker"<?php if(in_array("Broker",$temp_values)) { ?> selected='selected'<?php } ?>> Broker</option>
</select>

If the user selects broker than I want to add the pageRequired class to the first input field and remove it if the user selects Owner.

EDIT- Ok, so here is the code I am working with:

<script type="text/javascript">
function changeClass(myDropdown) {
   if (#customfields-s-1-s.selectedIndex == 1 ) {
       $('#customfields-tf-2-tf').addClass('pageRequired');
   }
   else {
      $('#customfields-tf-2-tf').removeClass('pageRequired');
   }
}
</script>

Answer 1

This can be done very simply using jquery:

Just add the onchange event to your dropdown and then call a function that either removes the class or adds it depending on the dropdown selection

<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" onchange="javascript:changeClass(this);" >

function changeClass(myDropdown) {
   if (myDropdown.selectedIndex == 1 ) {
       $('#customfields-tf-2-tf').addClass('pageRequired');
   }
   else {
      $('#customfields-tf-2-tf').removeClass('pageRequired');
   }
}

Here are the links on use:

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/