Question

I have 2 radiobuttons (A,B) acting as shipping options and one input textfield for inputting phone numbers.
After selecting A, I need to show custom help text inside the text area (‘phone required’). If button B is selected – there should be no help text.

If A is selected, helptext should be removed after user clicks inside textfield and types the number.
If any option is selected and the textfield is filled. It should stay this way.

My code works except the help text is not removed if user selects A option and after B option without typing anything.

$(document).ready(function () {
  $('input#edit-quote-option-flatrate-3---0').change(function () {
    if ($('input#edit-quote-option-flatrate-3---0').is(":checked")) {


  $('.default').each(function () {
    var defaultVal = ('tel');
    $(this).focus(function () {
      if ($(this).val() == defaultVal) {
        $(this).removeClass('active').val('');
      }
    })
      .blur(function () {
      if ($(this).val() == '') {
        $(this).addClass('active').val(defaultVal);
      }
    })
      .blur().addClass('active');
  });
    } else {

        $('.default').removeClass('active').val('');

    }
  });
});

full code is here http://jsfiddle.net/NKcFs/2/

Answer 1

Try adding a change handler for the second option that sets the value to blank… thats what you wanted to do, right?

   $('#edit-quote-option-flatrate-3---1').change(function(){  
    $('.default').each(function () {
      if($(this).val() == 'tel'){ // if the user didn't change it, clear the field
          $(this).val('');
      }
    });
  });

Fiddle here: http://jsfiddle.net/gcmDu/1/