clear specific fields when user changes value of a select

Question

Ok, I'm really starting to have a bad day and the ol' brain isn't working. I can't think of what I should be searching for, or even find previous examples of this kind of thing.

I have a HTML form with three fields;

• select: disposition_status
• text: disposition_datetime_hasrecord
• text: disposition_description

The select field disposition_status has the following values:

• 1 - in
• 2 - out

When a user selects the item in disposition_status with the value of 1 (in), I want to clear any text in the fields disposition_datetime_hasrecord and disposition_description.

If anyone has an example or can point me in the right direction for achieving this it would be appreciated.

Answer 1

Try this:

$('select[name=disposition_status]').change(function() {
    if ($(this).val() == 1) {
        $('*[name=disposition_datetime_hasrecord]').val('');
        $('*[name=disposition_description]').val('');
    }
});

Answer 2

It's ok, Sunday nights are a tough night to code anyways ;-)

To do this, you would use the jQuery change method to catch any changes within the menu. From there, you could setup a simple case statement to decide what to do, e.g.:

 $("#disposition_status").change(function() {
     if ($(this).val() == 1) {
         $("#disposition_datetime_hasrecord").val("");
         $("#disposition_description").val("");
     }
 });

This is assuming you have those set as ID's, if not you can use the selector "*[name=disposition_status]" etc. to select them.

Edit: Oh drats! Just beaten by someone else ;-) Same thought process at least :)

Answer 3

demo

$('#disposition_status').change(function() {
    if (this.value == 1) {
        $('#disposition_datetime_hasrecord').val('');
        $('#disposition_description').val('');
    }
});​

edit: based on comment

Okay, I see now the problem, it should be wrap inside

$(document).ready(function() { 
    //code here 
}); 

sorry jsfiddle do it internally (I did set it actually).. so just put the codes inside like

$(document).ready(function() { 
   $('#disposition_status').change(function() {
      if (this.value == 1) {
        $('#disposition_datetime_hasrecord').val('');
        $('#disposition_description').val('');
      }
   });​
}); 

explanation here