Hoi,
ik probeer een formulier dat ik heb gemaakt interactief te maken. Het is al responsive, maar nu moeten er ook nog een paar vragen aanpassen op eerder gegeven antwoorden.
Het gaat in mijn geval om de vraag of iemand een partner mee wil nemen.
If 'ja' dan wil ik dat er een veld komt voor naam en vervolgens kan aanmelden voor het evenment.
If 'nee' dan wil ik dat de persoon zich kan aanmelden voor het evenement
Hieronder tref je de code.
<html>
<head>
<meta charset="utf-8">
<title>Responsive Formulier Lustrum</title>
<link rel="stylesheet" type="text/css" href="responsiveform.css">
<link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 601px)" href="responsiveform1.css" />
<link rel="stylesheet" media="screen and (max-width: 600px) and (min-width: 351px)" href="responsiveform2.css" />
<link rel="stylesheet" media="screen and (max-width: 350px)" href="responsiveform3.css" />
<link rel="stylesheet" type="text/css" href="interactiveform1.css">
</head>
<body>
<script>
var FormStuff = {
init: function() {
// kick it off once, in case the radio is already checked when the page loads
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
// when a radio or checkbox changes value, click or otherwise
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
// find each input that may be hidden or not
$(".require-if-active").each(function() {
var el = $(this);
// find the pairing radio or checkbox
if ($(el.data("require-pair")).is(":checked")) {
// if its checked, the field should be required
el.prop("required", true);
} else {
// otherwise it should not
el.prop("required", false);
}
});
}
};
FormStuff.init();
</script>
<div id="envelope">
<form action="" method="post">
<header>
<h2>Vul in of je aanwezig bent</h2>
<p>We hebben slecht een aantal gegevens van je nodig</p>
</header>
<label>Voornaam</label>
<input name="voornaam" placeholder="voornaam" type="text" width="100px;">
<label>Tussenvoegsel</label>
<input name="tussenvoegsel" placeholder="eventueel tussenvoegsel" type="text" width="100px;">
<label>Achternaam</label>
<input name="achternaam" placeholder="achternaam" type="text" width="100px;">
<label>E-mail</label>
<input name="email" placeholder="e-mailadres" type="text">
<label>Neem je je partner mee?</label>
<div>
<div>
<input type="radio" name="partners" id="partner" required>
<label for="partner">Ja</label>
<div class="reveal-if-active">
<label for="partner-naam">Welke naam mogen wij noteren?</label>
<input type="text" id="partner-naam" name="partner-naam" class="require-if-active" data-require-pair="#partner">
</div>
</div>
<div>
<input type="radio" name="partners" id="partner-nee">
<label for="partner-nee">Nee</label>
</div>
</div>
<label>Opmerking</label>
<textarea cols="15" name="opmerking" placeholder="Als je nog iets kwijt wil dan kan je dat hier mee plaatsen" rows="10">
</textarea>
<input id="submit" type="submit" value="Ja ik meld mij aan">
</form>
</div>
</body>
</html>
Gaat nog wel een hoop mis, maar wellicht kan er iemand mee kijken / denken
Mike
ik probeer een formulier dat ik heb gemaakt interactief te maken. Het is al responsive, maar nu moeten er ook nog een paar vragen aanpassen op eerder gegeven antwoorden.
Het gaat in mijn geval om de vraag of iemand een partner mee wil nemen.
If 'ja' dan wil ik dat er een veld komt voor naam en vervolgens kan aanmelden voor het evenment.
If 'nee' dan wil ik dat de persoon zich kan aanmelden voor het evenement
Hieronder tref je de code.
<html>
<head>
<meta charset="utf-8">
<title>Responsive Formulier Lustrum</title>
<link rel="stylesheet" type="text/css" href="responsiveform.css">
<link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 601px)" href="responsiveform1.css" />
<link rel="stylesheet" media="screen and (max-width: 600px) and (min-width: 351px)" href="responsiveform2.css" />
<link rel="stylesheet" media="screen and (max-width: 350px)" href="responsiveform3.css" />
<link rel="stylesheet" type="text/css" href="interactiveform1.css">
</head>
<body>
<script>
var FormStuff = {
init: function() {
// kick it off once, in case the radio is already checked when the page loads
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
// when a radio or checkbox changes value, click or otherwise
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
// find each input that may be hidden or not
$(".require-if-active").each(function() {
var el = $(this);
// find the pairing radio or checkbox
if ($(el.data("require-pair")).is(":checked")) {
// if its checked, the field should be required
el.prop("required", true);
} else {
// otherwise it should not
el.prop("required", false);
}
});
}
};
FormStuff.init();
</script>
<div id="envelope">
<form action="" method="post">
<header>
<h2>Vul in of je aanwezig bent</h2>
<p>We hebben slecht een aantal gegevens van je nodig</p>
</header>
<label>Voornaam</label>
<input name="voornaam" placeholder="voornaam" type="text" width="100px;">
<label>Tussenvoegsel</label>
<input name="tussenvoegsel" placeholder="eventueel tussenvoegsel" type="text" width="100px;">
<label>Achternaam</label>
<input name="achternaam" placeholder="achternaam" type="text" width="100px;">
<label>E-mail</label>
<input name="email" placeholder="e-mailadres" type="text">
<label>Neem je je partner mee?</label>
<div>
<div>
<input type="radio" name="partners" id="partner" required>
<label for="partner">Ja</label>
<div class="reveal-if-active">
<label for="partner-naam">Welke naam mogen wij noteren?</label>
<input type="text" id="partner-naam" name="partner-naam" class="require-if-active" data-require-pair="#partner">
</div>
</div>
<div>
<input type="radio" name="partners" id="partner-nee">
<label for="partner-nee">Nee</label>
</div>
</div>
<label>Opmerking</label>
<textarea cols="15" name="opmerking" placeholder="Als je nog iets kwijt wil dan kan je dat hier mee plaatsen" rows="10">
</textarea>
<input id="submit" type="submit" value="Ja ik meld mij aan">
</form>
</div>
</body>
</html>
Gaat nog wel een hoop mis, maar wellicht kan er iemand mee kijken / denken
Mike
[ Voor 30% gewijzigd door MikedeWildt op 24-07-2015 12:06 ]
:strip_icc():strip_exif()/u/626559/crop59916d9743d5c_cropped.jpeg?f=community)
/u/465874/mark.png?f=community)
/u/102105/crop56f481fe1f74f.png?f=community)
:strip_icc():strip_exif()/u/29539/crop5be1c87ad1a01_cropped.jpeg?f=community)