Jeg sliter med å¨lage en javascript kode som ikke lar deg trykke neste før checkbokser er krysset av, noen som kan hjelpe?
LOGG INN
... eller du kan registrere deg nå
Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang.
Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
|
10
960
|
First on google:
http://www.devx.com/tips/Tip/13204
Det er ikke en elegant løsning, men den bør gjøre susen / gi deg et hint i riktig retning om du ikke har peil.
http://www.devx.com/tips/Tip/13204
Det er ikke en elegant løsning, men den bør gjøre susen / gi deg et hint i riktig retning om du ikke har peil.
Sitat av Dominic
First on google:
http://www.devx.com/tips/Tip/13204
Det er ikke en elegant løsning, men den bør gjøre susen / gi deg et hint i riktig retning om du ikke har peil.
http://www.devx.com/tips/Tip/13204
Det er ikke en elegant løsning, men den bør gjøre susen / gi deg et hint i riktig retning om du ikke har peil.
Vis hele sitatet...
Sitat av Dominic
Hvor ser du at jeg kaller det en elegant løsning:
Vis hele sitatet...
Jeg spør fordi jeg er oppriktig interessert, driver og lærer meg div. koding nå selv, og fine tips&triks som dette er veldig artig å plukke opp.
Sitat av Realist1
Ja, jeg så det.. Men jeg synes den var ganske elegant, jeg... Så da spør jeg deg; hvis den IKKE var elegant ... hvordan ser da en elegant løsning ut?
Jeg spør fordi jeg er oppriktig interessert, driver og lærer meg div. koding nå selv, og fine tips&triks som dette er veldig artig å plukke opp.
Jeg spør fordi jeg er oppriktig interessert, driver og lærer meg div. koding nå selv, og fine tips&triks som dette er veldig artig å plukke opp.
Vis hele sitatet...
Kode
<html>
<head>
<script language=javascript>
function validate(chk){
if (chk.checked == 1)
alert("Thank You");
else
alert("You didn't check it! Let me check it for you.")
chk.checked = 1;
}
</script>
</head>
<body>
<form>
<input type=checkbox name=chk1>Please Check Me
<p><input type=button value="check" onclick="return validate(chk1);">
</form>
</body>
</html>
Kode
document.getElementById('id').onclick = function () {
//do this
}
I neste omgang som er forholdsvis kritisk er at de sjekker verdien av chk.checked med "== 1"
Dette er ikke direkte feil, men det er misvisende da .checked bruker true og false. Det doble erlikhetstednet regner med at 1 og 0 skal matche true og false, men den kan i noen situasjoner feile og det er smart alltid å bruke triple ===, da de sjekker for sann likhet, altså ingen tolkning. Man bør også vite så nøyaktig som mulig ha man sjekker for, og i dette tilfellet sjekker man ikke om .checked har verdien 1, men om den har verdien true. Det riktige blir derfor (chk.checked === true).
De har en <p> tag om semantisk sett ikke har noe å gjøre der, det er også risikabelt ikke å ha en matchende </p>, selv om </p> strengt tatt skal være valgfri.
Hva de bruker return validate(...) til er jeg jaggu ikke sikker på, men vanlig praksis i samsvar med eksempelet mitt ovenfor, for å hindre at nettleseren sender deg noe sted når du klikker på knappne er å returnere false
Kode
document.getElementById('id').onclick = function () {
var chk = document.getElementById('id');
if (chk.checked === false) {
return false;
} else {
// hele else-blokken kan unnlates, men for demonstrasjonens skyld:
alert('It works, yay :D');
}
}
Utenom det kan jeg minne om alltid å bruke en doctype på html-sider.
Kan lage et litt mer anvendelig eksempel, men nå er det snart jobb
Sitat av lor3ntz
Som regel bør man gjøre slike kontroller server-side, ellers kan folk lett omgå det.
Vis hele sitatet...
Sist endret av Dominic; 21. mars 2012 kl. 00:29.
Her er slik jeg ville gjort det med jQuery: http://jsfiddle.net/nf2MA/5/
Og JS-kode:
HTML-kode
<form method="post"> <div class="error"> You must check this box to continue </div> <label> <input class="must-be-checked" type="checkbox"> Jeg er Johnny </label> <br> <div class="error"> You must check this box to continue </div> <label> <input class="must-be-checked" type="checkbox"> Jeg er teit </label> <br> <input type="submit"> </form>
Kode
$("form .error").hide();
$('form').on('submit', function(event) {
// Gjem error-boksene i tilfelle brukeren har rettet den
$("form .error").hide();
// Hent alle elementene som må sjekkes, men ikke er sjekket
$('.must-be-checked').not(":checked")
// Gå gjennom hvert slikt element
.each(function() {
// Og vis error-boksen, som må ligge rett før parent-elementet til sjekkboksen
$(this).parent().prev().show();
// Hindre formen fra å bli sendt inn.
event.preventDefault();
});
});
Jeg foretrekker vel strengt tatt også å bruke et bibliotek til dette, eksempelvis YUI, men her er en slags løsning som skulle funke nokså rett ut av boksen (har ikke testet i annet enn chrome
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox must be clicked</title>
<style type="text/css">
#wrapper {
width: 300px;
margin:0 auto; /*Midtstilling*/
}
#demoForm{
margin-top:150px;
}
#wrapper label, #wrapper input{
display: block;
}
</style>
<script type="text/javascript">
window.onload = function () {
var mbc = document.getElementById('mbc_checkbox'),
mbc2 = document.getElementById('mbc_2_checkbox'),
btn = document.getElementById('submit_btn'),
mbcCallback = function () {
if (mbc.checked === true && mbc2.checked === true) {
//man kan også teste (mbc.checked && mbc2.checked) dersom nettleserene bruker
//forskjellige verdier for å si at checked er sann.
btn.disabled = false;
} else {
btn.disabled = true;
}
};
// Dette er mange linjer for å legge til en event listener,
// men det er slik det i prisippet blir gjort i biblioteker.
if (addEventListener) {
//w3c versjon
mbc.addEventListener('change', mbcCallback, false);
mbc2.addEventListener('change', mbcCallback, false);
} else if (attachEvent) {
//ie versjon
mbc.attachEvent('onchange', mbcCallback);
mbc2.attachEvent('onchange', mbcCallback);
} else {
// fallback viss du vil støtte nettlesere fra 19-steinøks
mbc.onchange = mbcCallback;
mbc2.onchange = mbcCallback;
}
}
</script>
</head>
<body>
<div id="wrapper">
<form method="get" action="" id="demoForm">
<label for="mbc_checkbox">This checkbox must be checked:</label>
<input type="checkbox" name="mbc" id="mbc_checkbox">
<label for="mbc_2_checkbox">And this:</label>
<input type="checkbox" name="mbc_2" id="mbc_2_checkbox">
<label for="submit_btn">If you can click this, the box is checked:</label>
<input type="submit" name="sumbit" disabled="disabled" value="Click me?" id="submit_btn">
</form>
</div>
</body>
</html>
|
|