Je souhaite afficher les noms des cases à cocher sélectionnées lorsque je clique sur Soumettre.
Par exemple:
Le code ci-dessous ne fonctionne pas.
<form name= "myform" onclick="displayHobbies()">
Hobby <input type="checkbox" id="dancing" name="dancing">
<label for="dancing">Dancing</label>
<input type="checkbox" id="reading" name="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="painting" name="painting">
<label for="painting">Painting</label>
<button type="button" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>
function displayHobbies(){
let HobbiesInput=[document.getElementById('dancing'),
document.getElementById('reading'),
document.getElementById('painting')];
var HobbiesError="";
for(var i=0;i<HobbiesInput.length;i++)
{
if (HobbiesInput[i].checked==false)
{
HobbiesError="Please select a hobby";
}
else
{
HobbiesError +="#"+HobbiesInput[i].name;
}
}
document.getElementById('hobbies_display').innerHTML=HobbiesError;
}
4 Réponses :
<form name= "myform" onsubmit="displayHobbies(); return false;">
Hobby <input type="checkbox" id="dancing" name="dancing">
<label for="dancing">Dancing</label>
<input type="checkbox" id="reading" name="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="painting" name="painting">
<label for="painting">Painting</label>
<button type="submit" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>
function displayHobbies() {
let HobbiesInput=[document.getElementById('dancing'),
document.getElementById('reading'),
document.getElementById('painting')];
var HobbiesError="";
for(var i=0;i<HobbiesInput.length;i++)
{
if (HobbiesInput[i].checked) {
HobbiesError +="#"+HobbiesInput[i].name;
}
}
if (!HobbiesError) {
HobbiesError="Please select a hobby";
}
document.getElementById('hobbies_display').innerHTML = HobbiesError;
}
Dans votre code, s'il y a une case non cochée, le code ajoutera le message "Veuillez sélectionner un hobby".
À la place, vérifiez cela à la fin, et cela fonctionnera:
<form name="myform" onclick="displayHobbies()"> Hobby <input type="checkbox" id="dancing" name="dancing"> <label for="dancing">Dancing</label> <input type="checkbox" id="reading" name="reading"> <label for="reading">Reading</label> <input type="checkbox" id="painting" name="painting"> <label for="painting">Painting</label> <button type="button" id="hobby_submit">Submit</button> </form> Hobbies:<label id="hobbies_display"></label>
function displayHobbies() {
let HobbiesInput = [
document.getElementById('dancing'),
document.getElementById('reading'),
document.getElementById('painting')
];
var HobbiesError = "";
for (var i = 0; i < HobbiesInput.length; i++) {
if (HobbiesInput[i].checked) {
HobbiesError += "#" + HobbiesInput[i].name;
}
}
document.getElementById('hobbies_display').innerHTML = HobbiesError || "Please select a hobby";
}
@MegCullen Vous pouvez accepter une réponse (par la coche), pour aider les autres à trouver de meilleures réponses
Voici un extrait de code pour cela. Nous attachons un auditeur à un formulaire (pas à une entrée à chaque). Ensuite, nous regardons si la chose sur laquelle nous avons cliqué est en fait une case à cocher de type d'entrée. Ensuite, s'il est coché , nous poussons sa valeur vers le tableau que nous voulons afficher en haut, si n'est pas coché , nous supprimons de ce tableau. Ensuite, nous sélectionnons un élément dans lequel nous voulons rendre notre liste et le rendre. J'espère que cela aide.
<form id="form">
<div id="valuesList"></div>
<div>
I have a bike
<input type="checkbox" name="vehicle1" value="Bike">
</div>
<div>
I have a car
<input type="checkbox" name="vehicle2" value="Car">
</div>
</form>
let values = [];
const form = document.getElementById('form')
form.addEventListener('click', e => {
if (!e.target.type === 'checkbox') return;
const value = e.target.value;
const checked = e.target.checked;
if (checked) {
values.push(value)
} else {
const newValues = values.filter(v => v !== value);
values = newValues;
}
const valuesList = document.getElementById('valuesList')
valuesList.innerHTML = values.map(m => `#${m}`).join('')
})
Merci pour l'aide!! :)
Voici quelque chose d'un peu plus propre:
function displayHobbies() {
let HobbiesInput = [
document.getElementById('dancing'),
document.getElementById('reading'),
document.getElementById('painting')
];
// flag if no hobby is checked
var noHobbiesChecked = true;
// reset display area
document.getElementById('hobbies_display').innerHTML = "";
for (var i = 0; i < HobbiesInput.length; i++) {
if (HobbiesInput[i].checked === true) {
// add hobby to display area
document.getElementById('hobbies_display').innerHTML += "#"+HobbiesInput[i].name;
// turn off the flag since we have at least one hobby checked
noHobbiesChecked = false;
}
}
if (noHobbiesChecked === true) {
// show error
document.getElementById('hobbies_display').innerHTML = "Please select a hobby";
}
}
Pourquoi y a-t-il un clic sur la balise de formulaire? Vous ne voulez pas soumettre?
Tout d'abord, vous devez effacer l'étiquette
hobbies_displaychaque fois que vous cliquez sur quelque chose. Deuxièmement, votre boucle for ne vérifie pas si elles sont toutes non cochées pour afficher ce message, elle vérifie si aucun n'est coché. Donc, si les deux premiers sont cochés, mais que le dernier ne l'est pas, il examinera ce dernier, verra qu'il n'est pas coché, puis définira le message pour dire que rien n'est vérifié.@epascarello c'est censé être sur clic ... Je ne veux pas soumettre le formulaire
mais c'est n'importe quel clic à l'intérieur du formulaire, sans cliquer sur le bouton. Alors soumettez le formulaire et preventDefault.