Question

I have a span element as follows: <span id="download">Download</span>. This element is controlled by a few radio buttons. Basically, what I want to do is have 1 button to download the item selected by the radio buttons, but am looking to make it a little more “flashy” by changing the text inside the <span> to say more specifically what they are downloading. The span is the downloading button, and I have it animated so that the span calls slideUp(), then should change the text, then return by slideDown().Here is the code I am using that does not want to work.

$("input[name=method]").change(function() {
    if($("input[name=method]").val() == 'installer') {
        $('#download').slideUp(500);
        $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"});
        $('#download').text("Download");
        $('#download').addClass("downloadRequest").addClass("styling").css({"cursor":"pointer"});
        $('#download').slideDown(500);
    }
    else if($("input[name=method]").val() == 'url') {
        $('#download').slideUp(500);
        $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"});
        $('#download').text("Download From Vendor Website");
        $('#download').addClass("styling").addClass("downloadRequest").css({"cursor":"pointer"});
        $('#download').slideDown(500);
    }
});

I changed the code a bit to be more readable so I know that it doesn’t have the short code that jQuery so eloquently allows. Everything in the code works, with the exception of the changing of the text inside the span. I’m sure its a simple solution that I am just overlooking.

Any help is appreciated,

Eric R.

Answer 1

The reason why this isn’t working is that $("input[name=method]") matches every element that is of type input and has an attribute of name with the value of “method”. That is, if you are using check boxes each and every checkbox you have with that name. I believe the val method returns the value of the first match element – regardless of whether it is checked or not.

See this test page: http://jsbin.com/igixa4

You might want to add the :checked selector.

So how I would implement it:

$("input[name=method]").change(function() {
  $download = $('#download');
  $download.slideUp(500).removeClass("downloadRequest").removeClass("styling")
    .css({"cursor":"default"});
  switch($("input[name=method]:checked").val()) {
    case 'installer' :
      $download.text("Download");
      break;
    case 'url':
      $download.text("Download From Vendor Website");
      break;
  }
  $download.addClass("styling").addClass("downloadRequest")
    .css({"cursor":"pointer"}).slideDown(500);       
});