CODEWITHSUNDEEP
javascripthtmlradio-buttonalert
user8702577
user8702577

Reputation:

Alert if no radio buttons are selected

If no radio buttons was selected in 'Choose your type of pet' section after clicking on the submit button, an alert box should pop up saying "You did not select a type of pet". And same goes for the colour when radio buttons is not selected with alert 'You did not select a colour'.

Thankyou in advance

Whole html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Adopt a pet</title>
<head>
<script>
function calculateCost() {

    var radioButton;
    var checkbox;
    var pet;
    var colour;
    var cost = 0;
    
   var selectedPet = ["Cat", "Dog", "Rabbit"];
    var selectedColour = ["Black", "Gold", "White"];
    for (var i = 1; i <= 3; i++) {
      radioButton = document.getElementById(selectedPet[i-1]);
      if (radioButton.checked == true) {
        pet = selectedPet[i-1];
        cost+= parseInt(radioButton.value);
        //alert(parseInt(radioButton.value));
       }
       //I just guessed this part. This may not be the correct code for this
      else if(selectedPet == null) OR (pet == null)
      alert("You did not selected a pet")
     }

      for (var i = 1; i <= 3; i++) {
        radioButton = document.getElementById(selectedColour[i-1]);
        if (radioButton.checked == true) {
          colour = selectedColour[i-1];
          cost+= parseInt(radioButton.value);
          //alert(parseInt(radioButton.value));
        }
        // This part I guessed again
        else if(selectedColour == null) OR (colour == null)
          alert("You did not selected a colour")
        }
        else
          alert("You did not select anything")
        }
      
      alert("You have selected a "+pet+" and the colour selected was "+colour+", the total cost is $"+cost);
      
}
</script>
</head>

<body>
<h1> Adopt a pet </h1>
<form>
  <p>Choose a type of pet:
    <br>
    <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
    <br>
    <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
    <br>
    <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
    <br>
  </p>
  <p>Choose the colour of pet:
    <br>
    <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
    <br>
    <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
    <br>
    <input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
    <br>
  </p>
  <p><input type="button" value="Submit" onClick="calculateCost();">
  
</form>
</body>
</html>

Upvotes: 0

Views: 2903

Answers (2)

mplungjan
mplungjan

Reputation: 177860

You can get the selected radios directly using document.querySelector

You do need to make sure the values are numbers - using parseInt or just a +

You can leave out the form and use the button since you are not submitting.

function calculateCost() {

  var cost = 0;
  var selPet = document.querySelector("[name=pet]:checked");
  var selColour = document.querySelector("[name=colour]:checked");
  var error = []; 
  if (!selPet) {
    error.push("No Pets");
  }
  if (!selColour) {
    error.push("No Colour");
  }
  if (error.length>0) {
    alert(error.join('\n')); // show one or two errors with a newline
    return; // no need to stay
  }
  // implicit else
  cost = (+selPet.value) + (+selColour.value);
  // or
  // cost = (+selPet.value) * (+selColour.value);

  alert("You have selected a " + selPet.value + 
        " and the colour selected was " + selColour.value + 
        ", the total cost is $" + cost);
}
<h1> Adopt a pet </h1>
  <p>Choose a type of pet:
    <br>
    <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
    <br>
    <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
    <br>
    <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
    <br>
  </p>
  <p>Choose the colour of pet:
    <br>
    <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
    <br>
    <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
    <br>
    <input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
    <br>
  </p>
  <p><input type="button" value="Calculate" onclick="calculateCost()" />

Here I use the submit event and a submit button since you had a form - you then need to stop the submission (by returning false) in case of error or if AJAX is used

function calculateCost() {

  var cost = 0;
  var selPet = document.querySelector("[name=pet]:checked");
  var selColour = document.querySelector("[name=colour]:checked");
  if (!selPet) {
    alert("No Pets");
    return false;
  }
  if (!selColour) {
    alert("No Colour");
    return false;
  }

  cost = (+selPet.value) + (+selColour.value);
 // cost = (+selPet.value) * (+selColour.value);

  alert("You have selected a " + selPet.value + " and the colour selected was " + selColour.value + ", the total cost is $" + cost);
  return false // return true; // submits
}
<h1> Adopt a pet </h1>
<form onsubmit="return calculateCost()">
  <p>Choose a type of pet:
    <br>
    <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
    <br>
    <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
    <br>
    <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
    <br>
  </p>
  <p>Choose the colour of pet:
    <br>
    <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
    <br>
    <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
    <br>
    <input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
    <br>
  </p>
  <p><input type="submit" value="Submit" />

</form>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

This is a whole lot simpler than what you are doing. The .querySelector() DOM method makes getting the checked radio buttons very simple (see comments in code below):

function calculateCost() {
    var cost = 0;
    
    var selectedPet = ["Cat", "Dog", "Rabbit"];
    var selectedColour = ["Black", "Gold", "White"];
    
    // Query each group for a checked radio button:
    var petRadio = document.querySelector("input[name=pet]:checked");
    var colorRadio = document.querySelector("input[name=colour]:checked");    
    
    // If each variable holds a valid reference to an element, 
    // then a pet and a color were chosen/
    if(petRadio && colorRadio){
      // A string holding a number can be converted quickly to a number by 
      // prepending a plus sign in front of it. For multiplication, just use *
      // as the operator insteach of + (the one in the middle)
      cost = +petRadio.value + +colorRadio.value;
      
      alert("You have selected a " + petRadio.id + 
            " and the colour selected was " + 
            colorRadio.id + 
            ", the total cost is $" + cost);
    } else {
      // Otherwise, one or both were not chosen
      alert("You must select a pet and a color!");
    }     
}
<h1> Adopt a pet </h1>
<form>
  <p>Choose a type of pet:
    <br>
    <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
    <br>
    <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
    <br>
    <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
    <br>
  </p>
  <p>Choose the colour of pet:
    <br>
    <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
    <br>
    <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
    <br>
    <input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
    <br>
  </p>
  <p><input type="button" value="Submit" onClick="calculateCost();">
  
</form>

Upvotes: 0

Related Questions