dimanche 1 octobre 2017

How to fix checkbox in form

Hi I'm a noob 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 it.

  1. The checkbox does NOT need an alert box if not selected
  2. If checkbox is not selected it should just calculate the selected Pet and Colour
  3. If checkbox is selected it should calculate all three selected values
  4. Please try to keep most of the code provided as much as possible

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 = ["With vaccinations"];
  
  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">With vaccinations
<input type="checkbox" id="vaccinate" name="vaccinate" value="5"></label><br></p>

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



Aucun commentaire:

Enregistrer un commentaire