Question

I have to use jquery 1.3.2
I have here very simple task to check if button is selected and display a custom text inside certain textfield accordingly. I know that the problem is somewhere in the condition. Inside of condition is simple code to show custom text inside textfield with focus and blur functions

$(document).ready(function () {
  if ($('input#edit-quote-option-flatrate-3---0').is(":checked")) {
    $('input.default').val('xxx');
    $('.default').each(function () {
      var defaultVal = ('xxx');
      $(this).focus(function () {
        if ($(this).val() == defaultVal) {
          $(this).removeClass('active').val('');
        }
      })
        .blur(function () {
        if ($(this).val() == '') {
          $(this).addClass('active').val(defaultVal);
        }
      })
        .blur().addClass('active');
    });
  }
});

Can you please help me debug why does not this code work with the condition? Thank you. Full code with html is here http://jsfiddle.net/NKcFs/

EDIT: On my page, there are more rediobuttons. I need to show text only if this certain button is selected. If visitor selects another button, the text should dissapear.

Answer 1

The problem is that the code only runs when the page loads. If the radio button is selected that that point, then the code actually shows the text in the textbox. To make the code react to changes in the checkbox you should use the change event:

$(document).ready(function () {
  $('input#edit-quote-option-flatrate-3---0').change(function(){
    if ($('input#edit-quote-option-flatrate-3---0').is(":checked")) {
      $('input.default').val('xxx');
      $('.default').each(function () {
        var defaultVal = ('xxx');
        $(this).focus(function () {
          if ($(this).val() == defaultVal) {
            $(this).removeClass('active').val('');
          }
        })
          .blur(function () {
          if ($(this).val() == '') {
            $(this).addClass('active').val(defaultVal);
          }
        })
        .blur().addClass('active');
      });
    }
  });
});