Javascript catch unselected radio button along with textboxes and alert

Question

I'm practically new here and i'm a beginner in programming. I am creating an html/js based template for my team for easy consolidation of data and copy to clipboard so we can easily paste it in our main tool.

The problem is that doesn't seem to work properly (at least here at the office, at home it does work). It doesn't prompt when the radio selection is empty, so I am resorting to using my current function that catches any textboxes/textarea that is empty. (sample code below)

    if (document.getElementById('INbrief').value == "") {
        errCatch +="-Issue/Request \n";
        valid = false;
        }
    if (document.getElementById('INdesc').value == "") {
        errCatch +="-Issue/Request Description \n";
        valid = false;
        }
    if (!valid) {
        document.body.removeChild(dummyTxtArea);
        alert(errCatch);
        return valid;
        } else {
        document.body.removeChild(dummyTxtArea);
        alert ("Data has been copied to Clipboard.");
        }

The above if else is inside a Function that is called when the Evenlistener is triggered via "click" of the submit button. I tried inserting a 'for' statement above the if else inside the function but it wont work and the alert will only show that the textbox/area are empty. Thanks in advance for your help

Do you set `valid = true` at any point before your checks? From what you have posted here, your else statement will never trigger as `undefined` is falsey. — Malco, Apr 07 '17 at 14:47
@Malco yes, a var valid = true; is present before the if statements — Edd B, Apr 07 '17 at 14:52
if it helps the whole function is for validating the fields, if false, it alerts of empty/unselected fields. if it's true, it will consolidate and format the information and then copy to clipboard — Edd B, Apr 07 '17 at 15:16
There doesn't seem to be enough information here to identify and solve your issue. you may want to try putting what you have into a [jsfiddle](https://jsfiddle.net/) and adding that link to your answer. — Malco, Apr 07 '17 at 15:31
why didn't i thought of that. here is the link https://jsfiddle.net/xz2yezjL/ — Edd B, Apr 07 '17 at 15:42
if you don't select LOB and Severity and click submit, it won't do anything. but if you choose LOB and Sev, and leave the rest empty. It will alert and tell what's missing. I need to include LOB and Severity on the alert if they're empty — Edd B, Apr 07 '17 at 15:42
The root of your issue seems to be at lines 4 and 5. `var selectedLOB = document.querySelector('input[name="INlob"]:checked').value; //LOB selected var selectedSev = document.querySelector('input[name="INsev"]:checked').value; //Severity` Javascript is throwing an error when they are empty and stopping the rest of the code from running. — Malco, Apr 07 '17 at 16:04
can I make an IF statement wherein if the variables selectedLOB and selectedSev is empty I can append to errCatch? - i tried document.querySelector('input[name="INlob"]:checked').value == null and value == ""; — Edd B, Apr 07 '17 at 16:10
i also tried replacing calling the document.queryselector line with the variables themselves. selectedLOB .value == null / ""; — Edd B, Apr 07 '17 at 16:12
I believe I have fixed it now, am putting it into an answer for you. — Malco, Apr 07 '17 at 16:18

score 0 · Accepted Answer · edited May 23 '17 at 12:02

Your code was throwing errors at lines 4 and 5 when you were trying to get the value of an unchecked radio box and set the variable to that value:

var selectedLOB = document.querySelector('input[name="INlob"]:checked').value; //LOB selected
var selectedSev = document.querySelector('input[name="INsev"]:checked').value; //Severity selected

In order to fix this you must first check if the radio is selected, and then if it is get the value that is selected. You can do that by replaceing your lines 4 and 5 with the following:

var selectedLOB = document.querySelector('input[name="INlob"]:checked') ? document.querySelector('input[name="INlob"]:checked').value :false;
var selectedSev = document.querySelector('input[name="INsev"]:checked') ? document.querySelector('input[name="INsev"]:checked').value :false;

This code will first check to see if the radio is checked, if it is it will set the variable to the value, if it is not it will set the variable to false. (The a ? b : c is know as the conditional or ternary operator and is just a short if() else()statement). This change will stop the errors from being thrown.

You will also need to update your checks further down for the radios to:

if (selectedLOB == false) {
    errCatch +="-Choose LOB \n";
    valid = false;
    }       
if (selectedSev == false) {
    errCatch +="-Choose Severity \n";
    valid = false;
    }

As a side note you don't have to set uncheck radios to false, you could set them to a string like 'unchecked' or ''empty' if it helps make your code more readable. Just be sure to make sure that your checks match what you set it to.

I appear to have made a mistake when copying it over, one moment while I repair it. — Malco, Apr 07 '17 at 16:37
i am trying it now on, but you have absolutely resolved and helped me with this project. Thank you so much @Malco — Edd B, Apr 07 '17 at 17:39
No problem glad to help. As you are just starting out I have one suggestion, have a look at [jQuery](https://jquery.com/). It is a framework that makes selecting and modifying DOM elements much much easier, as well as providing good cross browser support. If you can bring in external libraries I would definitely recommend it for the headaches it can save. — Malco, Apr 07 '17 at 17:47

Javascript catch unselected radio button along with textboxes and alert

1 Answers1