Question

Radio button - Javascript doesn't work

Forms Web Customizations

Updated September 16, 2016

asked on September 14, 2016 • Show version history

Hi all, I tried this a few different ways but I can't seem to get the desired effect in javascript using class tags on two radio button fields. However, if I make the radio button fields single line fields, then the code works. What am I doing wrong?

I have a radio button called Degree with these choices:

Adjunct
Senior
Master

Radio button field called Level with these choices:

Non-Term
Terminal Degree

(values are NonTerm, and Terminal)

I have a single line field that has a pre-populated number in it and only shows up if a respective Level and Degree is selected (so for each combination, I have an amount). Class tag: adjNT, adjT, senNT, senT, masNT, masT

I have another single line field for Total which I would like to populate with appropriate number (example: adjNT) when Level (example: Adjunct) and Degree (example: Non-Term) have been chosen.

$(document).ready(function(){
  $(".degree input, .level input").change(function(){
    var degree = $(".degree input").val();
    var level  = $(".level input").val();
    
    if (level == "Adjunct" && degree == "NonTerm"){
      $(".total input").val($(".adjNT input").val());
    }
    else if (level == "Adjunct" && degree == "Terminal") {
      $(".total input").val($(".adjT input").val());
    }
    else if (level == "Senior" && degree == "Terminal") {
      $(".total input").val($(".senT input").val());
    }
    else if (level == "Senior" && degree == "NonTerminal") {
      $(".total input").val($(".senNT input").val());
    }
    else if (level == "Master" && degree == "Terminal") {
      $(".total input").val($(".masT input").val());
    }
    else if (level == "Master" && degree == "NonTerminal") {
      $(".total input").val($(".massNT input").val());
    }
    });
})

I could make a radio button populate a hidden single line field and then base my selections off of that, but I tried using javascript to populate a field based on radio button selection and it didn't work.

Thank you for your help, please let me know if I need to clarify something!

0 0

Answer

SELECTED ANSWER

replied on September 14, 2016

I think the problem is on lines 3 and 4. Your selector targets ALL of your inputs and not just the chosen one. Try this instead:

var degree = $(".degree input:checked").val();
var level  = $(".level input:checked").val();

3 0

replied on September 16, 2016 • Show version history

Thanks Scott, that pretty much did it and I had an extra bracket in my code, so for anyone needing this solution, here is my code:

 $(".degree input, .level input").change(function(){
    var degree = $(".degree input:checked").val();
    var level  = $(".level input:checked").val();
    
    if (level == "Adjunct" && degree == "NTD"){
      $(".totalAMNT input").val($(".ant input").val());
    }
    else if (level == "Adjunct" && degree == "TD") {
      $(".totalAMNT input").val($(".at input").val());
    }
    else if (level == "Senior" && degree == "NTD") {
      $(".totalAMNT input").val($(".snt input").val());
    }
    else if (level == "Senior" && degree == "TD") {
      $(".totalAMNT input").val($(".st input").val());
    }
    else if (level == "Master" && degree == "TD") {
      $(".totalAMNT input").val($(".mnt input").val());
    }
    else if (level == "Master" && degree == "NTD") {
      $(".totalAMNT input").val($(".mt input").val());
    }
    else if (level == "Graduate" && degree == "TD") {
      $(".totalAMNT input").val($(".gnt input").val());
    }
    else if (level == "Graduate" && degree == "NTD") {
      $(".totalAMNT input").val($(".gt input").val());
    }
  });

Question

Question

Radio button - Javascript doesn't work

Answer

Replies

Sign in to reply to this post.