Radio button validation javascript

Question

I created a calculator in HTML/js, now am trying to add some validation to it but I can't seem to get it to work.

In the below calculator, I added a script that checked if the sex radio button has not been checked then output a message. Unfortunately, when I ran it the message isn't showing anything. Help please

function calcCreatine() {
  var sexInput = document.querySelector('input[name="sex"]:checked').value;;
  var ageInput = document.getElementsByName("patients-age")[0].value;
  var weightInput = document.getElementsByName("patients-weight")[0].value;
  var serumInput = document.getElementsByName("patients-serum")[0].value;
  var result;

  if (sexInput == null) {
    return document.getElementById("outs").innerHTML = "Please enter a value";

  } else {

    if (sexInput === 'm') {
      result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput);

      result = result.toString().bold().fontsize(6);
      resultText = " mL/min".small() + " - Creatinine clearance.";
      res = result + resultText.bold();
      return document.getElementById("outs").innerHTML = res;
    } else {
      result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput);

      result = result.toString().bold().fontsize(6);
      resultText = " mL/min".small() + " - Creatinine clearance.";
      res = result + resultText.bold();
      return document.getElementById("outs").innerHTML = res;
    }

  }
}



  
    
      
        Creatinine clearance
                                    calculator
      
      
        Sex of patient:
        
          
                                         Male
                                    
          
                                         Female
                                    
          Age of patient (years):
          
          


          Weight of patient (kg):
          
          


          Serum creatinine (micromol/L):
          
          

        
        

        
        
          
          Original Cockcroft-Gault Equation:  mdcalc website

user_5827913 · Answer

There are a couple of issues with your code.

var sexInput = document.querySelector('input[name="sex"]:checked').value;

This line is trying to get the value of the selected sex. If the form has just loaded and the user has not selected anything yet, then:

document.querySelector('input[name="sex"]:checked');

Will be null, so you will get an error:

Uncaught TypeError: Cannot read property 'value' of null

The simplest way to fix that would be to just add a default value to the radio buttons, for example:

That being said, you can also improve the following:

The tag has been removed from HTML5, so it would be a good idea to replace that.

Since patient sex only affects one line of your code, you can remove the duplicate part by just calculating the result in an if statement and doing the rest only once.

I have created this fiddle to demonstrate.

user_4601544 · Answer

The problem here is that when you are not selecting any radio button, following statements returns null: document.querySelector('input[name="sex"]:checked')

since its null this cannot have value property. So I did some modification in the code and stored the whole input instead of the value and then used it later with value property wherever needed.

Here's the solution. Try it yourself:

function calcCreatine() {
  var sexInput = document.querySelector('input[name="sex"]:checked');
  var ageInput = document.getElementsByName("patients-age")[0];
  var weightInput = document.getElementsByName("patients-weight")[0];
  var serumInput = document.getElementsByName("patients-serum")[0];
  var result;

  if (sexInput == null) {
    return document.getElementById("outs").innerHTML = "Please select your gender";

  } else {

    if (sexInput.value === 'm') {
      result = Math.round(((140 - ageInput.value) * weightInput.value * 1.23) / serumInput.value);

      result = result.toString().bold().fontsize(6);
      resultText = " mL/min".small() + " - Creatinine clearance.";
      res = result + resultText.bold();
      return document.getElementById("outs").innerHTML = res;
    } else {
      result = Math.round(((140 - ageInput.value) * weightInput.value * 1.04) / serumInput.value);

      result = result.toString().bold().fontsize(6);
      resultText = " mL/min".small() + " - Creatinine clearance.";
      res = result + resultText.bold();
      return document.getElementById("outs").innerHTML = res;
    }

  }
}



  
    
      
        Creatinine clearance
                                    calculator
      
      
        Sex of patient:
        
          
                                         Male
                                    
          
                                         Female
                                    
          Age of patient (years):
          
          


          Weight of patient (kg):
          
          


          Serum creatinine (micromol/L):
          
          

        
        

        
        
          
          Original Cockcroft-Gault Equation:  mdcalc website

user_6118457 · Answer

The first problem is the code is the double ";" in the first line please, change it:

    var sexInput = document.querySelector('input[name="sex"]:checked').value;;

to:

    var sexInput = document.querySelector('input[name="sex"]:checked').value;

The second problem in you radio button is not working because you are trying to get a value from an element that doesn't exist if you don't check the button but if you check it and you execute the calculate button then you get an error:

and this error is because you are trying to obtain a value from an element that doesn't exist yet.

How to solve it?

You can modify the first line to get the null value from the element like this:

    var sexInput = document.querySelector('input[name="sex"]:checked');

then if the user not check the radio button you will get a null value.

Another way could be using the checked property of the element to evaluate if the user checked the button using true/false like this:

var sexInput = document.querySelector('input[name="sex"]').checked;

then in your code you can eval like this:

if(sexInput){
    // Do something
}

EDIT

I added a working exmaple:

EDIT 2

Improved the response a little bit more.

function calcCreatine() {
    var sexInput = document.querySelector('input[name="sex"]:checked');
    var ageInput = document.getElementsByName("patients-age")[0].value;
    var weightInput = document.getElementsByName("patients-weight")[0].value;
    var serumInput = document.getElementsByName("patients-serum")[0].value;
    var result;
  
    if (sexInput == null) {
      return document.getElementById("outs").innerHTML = "Please enter a value";
  
    } else {
  
      if (sexInput === 'm') {
        result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput);
  
        result = result.toString().bold().fontsize(6);
        resultText = " mL/min".small() + " - Creatinine clearance.";
        res = result + resultText.bold();
        return document.getElementById("outs").innerHTML = res;
      } else {
        result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput);
  
        result = result.toString().bold().fontsize(6);
        resultText = " mL/min".small() + " - Creatinine clearance.";
        res = result + resultText.bold();
        return document.getElementById("outs").innerHTML = res;
      }
  
    }
  }



  
    
    
    Document
    
  
  
    
    
      
        
          
            
              Creatinine clearance calculator
            
          
          
            Sex of patient:
            
              
                 Male
              
              
                 Female
              
              Age of patient (years):
              
              


              Weight of patient (kg):
              
              


              Serum creatinine (micromol/L):
              
              

            
            

            
            
              
              
                Original Cockcroft-Gault Equation:
                 mdcalc website

Regards

Radio button validation javascript

3 Answers