Alert if no radio buttons are selected
Question
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>
2 answers
solution1
1 2017-10-01 14:30:28
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>
solution2
0 2017-10-01 14:41:34
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Alert if a radio button is selected
How to disable a group of radio buttons if one has been selected and display an alert if one is not selected and the next button is clicked
Radio buttons cannot be selected
All radio buttons are selected?
Summary of Selected Radio Buttons
count selected radio buttons
PHP - Validation radio buttons alert
Selecting Multiple Radio Buttons With Alert
javascript alert box with radio buttons
If radio button is selected show alert
Related Tags