Alert als checkbox niet is aangevinkt.

**yammaski** · 28 juli 2012, 16:47

Als je op de submit button klikt verdwijnt deze en zie je een wieltje tot de volgende pagina geladen is.
Maar de checkbox moet aangevinkt zijn.
Hoe pas ik de code hiervoor aan ?

testpagina

Yam.

**grumbkow** · 28 juli 2012, 17:04

Code:

<script type="text/javascript">
	function validateCheckbox()
	{
		checkbox = document.getElementById('checkbox');
		if(checkbox.checked == false)
		{
			alert('Please agree with the checkbox');
			return false;
		}
		else
		{
			return true;	
		}
	}
</script>

<form action="" method="post">
	<input type="checkbox" name="checkbox" id="checkbox" /><label for="checkbox">I agree</label><input type="submit" onclick="return validateCheckbox()" value="confirm" />
</form>

**yammaski** · 28 juli 2012, 17:18

Bedankt.

Het wieltje (loader_indicator2.gif) draait niet, aan wat kan dat liggen ?
Als je de gif opent in explorer draait het wel.

Yam.

**grumbkow** · 28 juli 2012, 17:24

Doet ie bij mij in Chrome wel.

**yammaski** · 28 juli 2012, 17:50

Vreemd ... het werkt in Firefox en Chrome, maar niet in IE8 en IE9.

Het zit misschien in de "style" (<div id="loading2" style="display:none;"><img src="loader_indicator2.gif" alt="" />Loading!</div>).
Als ik dit verwijder zie je het wieltje constant, maar dan draait het wel.

**grumbkow** · 28 juli 2012, 18:27

Het schijnt dat IE problemen heeft met het tonen van geanimeerde gif's als deze eerst verborgen waren.
Probeer eens de image pas toe te voegen als hij nodig is.
dus in palats van .show() .appen() (jquery)

**yammaski** · 28 juli 2012, 18:42

Hoe en waar pas ik dit aan ?

Javascript Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
<!--
(function (d) {
    d.getElementById('Confirm').onsubmit = function () {
        d.getElementById('Bevestig').style.display = 'none';
        d.getElementById('loading2').style.display = 'inline';
    };
}(document));
//-->
</script>

**grumbkow** · 28 juli 2012, 18:57

Nou op de plek waar je de afbeelding gewoonlijk tevoorschijn tovert zorg je nu dat ie in de DOM geplaatst wordt.

**yammaski** · 28 juli 2012, 19:57

Ik ben geen programmeur, dus ik weet niet hoe ik hieraan moet beginnen.

**grumbkow** · 28 juli 2012, 21:07

Dit is ook scripten en geen programmeren haha.
Ik werk zelf altijd met het jQuery framework, vind ik zelf vele malen makkelijker en fijner dan Javascript zelf.
Onderstaande code doet wat je wilt, maar dan geschreven in jQuery.
Let er op dat je ook de jQuery inlaadt met de bovenste regel.

Javascript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#Confirm').submit(function()
        {
            $('#Bevestig').hide(); //De hide functie zet de display: none op het element.
            // In jQuery ook te schrijven als $('#Bevestig').css('display', 'none');
            $(body).append('<div id="loading2"><img src="loader_indicator2.gif" alt="" />Loading!</div>'); // de append functie voegt hetgeen tussen de '' toe aan het eerder genoemde element, in dit gevla de body
 
        });
    });
</script>

**yammaski** · 31 juli 2012, 18:22

Ik heb dit script toegevoegd in de <head>, maar het wieltje draait nog steeds niet in IE !?

**grumbkow** · 1 augustus 2012, 11:13

Verversen met CTRL+F5 want waarschijnlijk zit er iets in je cache vast.
Hij doet het hier gewoon dus als het alleen bij jou gebeurd niet te veel op letten

**yammaski** · 1 augustus 2012, 20:56

Vreemd ... het werkt echt niet hier in IE.
Heb de cache al tevergeefs enkele malen geledigd.

check testpage

**grumbkow** · 1 augustus 2012, 22:47

Deze versie werkt niet meer.
Haal dat oude script onder het formulier er eens uit, met de display none en inline.
Die heb je nu namelijk niet meer nodig.

**yammaski** · 2 augustus 2012, 07:37

Sorry ... dan verschijnt er niets meer.
Heb ook al geprobeerd de div in het form "leeg te laten" : <div id="loading2"></div>

check testpage

**grumbkow** · 2 augustus 2012, 12:21

Dan moet je uiteraard wel de display op de andere plek weer aanpassen

**yammaski** · 2 augustus 2012, 12:48

sorry ... het blijft chinees voor mij

heb het anders opgelost aan de hand van een scriptje gevonden op het net dat werkt met verschillende images ipv 1 animated gif

testpage

Onderwerp: Alert als checkbox niet is aangevinkt.

Onderwerp opties

Zoek in onderwerp

Vraag is opgelost

Alert als checkbox niet is aangevinkt.

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact