How to fix 'checkbox' in form

Question

Hi I am stuck and I need help.

As shown in the coding provided below, it works fine if I remove all the 'Vaccinate checkbox' properties. But I need to have the 'checkbox vaccinate' property in this case.

Please try to keep most of the code provided as much as possible

It's for homework.
Thankyou in advance!

    function calculateCost() {



      var radioButton;

      var checkbox;

      var pet;

      var colour;

      var vaccinate;

      var cost = 0;



      var selectedPet = ["Cat", "Dog", "Rabbit"];

      var selectedColour = ["Black", "Gold", "White"];

      var selectedVaccinate = ["Vaccinate"];

      

      var selectedPetCost;

      var selectedColourCost;

      var selectedVaccinateCost;



      for (var i = 1; i <= 3; i++) {

        radioButton = document.getElementById(selectedPet[i - 1]);

        if (radioButton.checked == true) {

          pet = selectedPet[i - 1];

          selectedPetCost = parseInt(radioButton.value);

          //alert(parseInt(radioButton.value));

        }

      }

      

      if (!pet) {

        alert('No pet selected!');

      }



      for (var i = 1; i <= 3; i++) {

        radioButton = document.getElementById(selectedColour[i - 1]);

        if (radioButton.checked == true) {

          colour = selectedColour[i - 1];

          selectedColourCost = parseInt(radioButton.value);

          //alert(parseInt(radioButton.value));

        }

      }

      

      if (!colour) {

        alert('No colour selected!');

      }

      

      for (var i = 1; i <= 1; i++) {

        checkbox = document.getElementById(selectedVaccinate[i - 1]);

        if (checkbox.checked == true) {

          pet = selectedVaccinate[i - 1];

          selectedVaccinateCost = parseInt(checkbox.value);

        }

      }

      

      if (pet && colour && vaccinate) {

        cost = selectedPetCost * selectedColourCost * selectedVaccinateCost;

        alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);

      }

      

      if (pet && colour) {

        cost = selectedPetCost * selectedColourCost;

        alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);

      }

      

    }

<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><label for="vaccinate">Vaccinate

<input type="checkbox" id="vaccinate" name="vaccinate" value="5"></label><br></p>



  <p><input type="button" value="Submit" onClick="calculateCost();">

</form>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You have done couple of mistakes in your function and I have fixed those issues. Please try below code

function calculateCost() {

  var radioButton;
  var checkbox;
  var pet;
  var colour;
  var vaccinate;
  var cost = 0;

  var selectedPet = ["Cat", "Dog", "Rabbit"];
  var selectedColour = ["Black", "Gold", "White"];
  var selectedVaccinate = ["vaccinate"];

  var selectedPetCost;
  var selectedColourCost;
  var selectedVaccinateCost;

  for (var i = 1; i <= 3; i++) {
    radioButton = document.getElementById(selectedPet[i - 1]);
    if (radioButton.checked == true) {
      pet = selectedPet[i - 1];
      selectedPetCost = parseInt(radioButton.value);
      //alert(parseInt(radioButton.value));
    }
  }
  if (!pet) {
    alert('No pet selected!');
    }

  for (var i = 1; i <= 3; i++) {
    radioButton = document.getElementById(selectedColour[i - 1]);
    if (radioButton.checked == true) {
      colour = selectedColour[i - 1];
      selectedColourCost = parseInt(radioButton.value);
      //alert(parseInt(radioButton.value));
    }
  }
  if (!colour) {
    alert('No colour selected!');
  }

     for (var i = 1; i <= 1; i++) {
    checkbox = document.getElementById(selectedVaccinate[i - 1]);
    if (checkbox.checked == true) {
      vaccinate = selectedVaccinate[i - 1];
      selectedVaccinateCost = parseInt(checkbox.value);
    }
  }
  if (pet && colour && vaccinate) {
    cost = selectedPetCost * selectedColourCost * selectedVaccinateCost;
    alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
  }
  else if (pet && colour) {
    cost = selectedPetCost * selectedColourCost;
    alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
  }
}

Working example

As far as I understood,When you select only the pet and colour you should the cost for the pet and colour,whereas when select with vaccination you should get cost for pet and colour with vaccination. I hope this answer fix your problem.

How to fix 'checkbox' in form

Sign up