James Li James Li - 3 years ago 146
HTML Question

How to fix 'checkbox' in form

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>




Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download