<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
<style media="screen">
div {
display: block
}
</style>
</head>
<body>
<div id="formularz">
<form name="zgloszenie" action="#">
<label for="imie">Imię</label><input type="text" name="imie" id="imie">
<label for="nazwisko">Nazwisko</label><input type="text" name="nazwisko" id="nazwisko">
<label for="email">E-Mail</label><input type="text" name="email" id="email">
<label for="usluga">Usługa</label><textarea name="usluga" rows="8" cols="80" id="usluga"></textarea>
<input type="checkbox" name="regulamin" value="" id="regulamin">Zapoznalem sie z regulaminem
<input type="button" name="reset" value="Resetuj" onclick="reset_form()">
<input type="button" name="submit" value="Wyślij" onclick="wyslij()">
</form>
</div>
<div id="uwaga" style="display: none; color: #F00">
<h2>Musisz zapoznać się z regulaminem!</h2>
</div>
<div id="podsumowanie" style="display: none">
</div>
<script type="text/javascript" language="javascript">
var imie = document.getElementById('imie')
var nazwisko = document.getElementById('nazwisko')
var email = document.getElementById('email')
var usluga = document.getElementById('usluga')
var regulamin = document.getElementById('regulamin')
var uwaga = document.getElementById('uwaga')
uwaga.style.display = 'none'
var podsumowanie = document.getElementById('podsumowanie')
podsumowanie.style.display = 'none'
// funkcja resetująca wartości wszystkich pol
function reset_form() {
imie.value = ''
nazwisko.value = ''
email.value = ''
usluga.value = ''
regulamin.checked=false
uwaga.style.display = 'none'
podsumowanie.style.display = 'none'
}
function wyslij() {
if (regulamin.checked) {
uwaga.style.display = 'none'
podsumowanie.style.display = 'block'
podsumowanie.innerHTML = `
<p align="center">`+ imie.value.toUpperCase() + ' ' + nazwisko.value.toUpperCase() +`</p>
<p align="center">Treść Twojej sprawy: `+ usluga.value +`</P>
<p align="center">Na podany email zostanie wysłana oferta</p>
`
} else {
uwaga.style.display = 'block';
}
}
</script>
</body>
</html>
Comments