Acties via Javascript
Standaard 'Alert' box tonen
<input type="button" onclick="popup()" value="Open een standaard melding! (Alertbox)"><br /><br />
<script>
function popup() {
alert("Hello World")
}
</script>
function popup() {
alert("Hello World")
}
</script>
Pagina openen in een nieuw window
<button onclick="myFunctionOpenWindow()">Open een nieuw window</button>
<script>
function myFunctionOpenWindow() {
window.open("https://www.w3schools.com");
}
</script>
function myFunctionOpenWindow() {
window.open("https://www.w3schools.com");
}
</script>
Disable en enable dropdown
<form>
<select id="mySelect">
<option>Optie 1</option>
<option>Optie 2</option>
<option>Optie 3</option>
<option>Optie 4</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable dropdown">
<input type="button" onclick="enable()" value="Enable dropdown">
</form>
<select id="mySelect">
<option>Optie 1</option>
<option>Optie 2</option>
<option>Optie 3</option>
<option>Optie 4</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable dropdown">
<input type="button" onclick="enable()" value="Enable dropdown">
</form>
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
Melding bij het leegmaken van een formulier veld
<form onreset="message()">
Vul uw naam in: <input type="text" size="20">
<input type="reset">
</form>
Vul uw naam in: <input type="text" size="20">
<input type="reset">
</form>
<script>
function message() {
alert("De inhoud van het veld wordt verwijderd");
}
</script>
function message() {
alert("De inhoud van het veld wordt verwijderd");
}
</script>
Melding op basis van moment van de dag
<button onclick="myFunction()">Bekijk begroeting</button>
<p id="demo"></p>
<p id="demo"></p>
<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Goedemorgen";
} else if (time < 20) {
greeting = "Goedendag";
} else {
greeting = "Goedenavond";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Goedemorgen";
} else if (time < 20) {
greeting = "Goedendag";
} else {
greeting = "Goedenavond";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
JavaScript validatie voor een leeg formulier input veld
Klik op de knop 'Bevestigen' zonder iets in het veld in te vullen.
<p>Klik op de knop 'Bevestigen' zonder iets in het veld in te vullen.</p>
<form name="myForm" action="/javascript-close.php" onsubmit="return validateForm()" method="post" required>
Naam: <input type="text" name="fname">
<input type="submit" value="Bevestigen">
</form>
<form name="myForm" action="/javascript-close.php" onsubmit="return validateForm()" method="post" required>
Naam: <input type="text" name="fname">
<input type="submit" value="Bevestigen">
</form>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "" || x == null) {
alert("Het veld naam moet ingevuld worden");
return false;
}
}
</script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "" || x == null) {
alert("Het veld naam moet ingevuld worden");
return false;
}
}
</script>
Openen van een popup (gecentreerd in beeldscherm)
<button><a href="https://www.dtpwebdesign.nl/javascript-close.php" onclick="centeredPopup(this.href,'myWindow','700','300','yes');return false">Klik hier om de popup te openen</a></button>
<script>
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>
Hans van Schaijk