Obsługa formularzy

Skrypt sprawdzający, czy pole formularza zostało wypełnione

this.form - obiekt reprezentujący bieżący formularz

Imię:
Nazwisko:
Adres:
Wykształcenie:

Skrypt sprawdzający, czy wszystkie pola formularza zostały wypełnione

<!DOCTYPE html>
<html  lang="pl-PL">
<head>
<meta charset="utf-8">
<title>Obsługa formularzy</title>

</head>
<body>

if (f.imie.value=="")
	{
	napis+="imię\n";
	braki=true;
	}

if (f.nazwisko.value=="")
	{
	napis+="nazwisko\n";
	braki=true;
	}

if (f.adres.value=="")
	{
	napis+="adres\n";
	braki=true;
	}

if (f.wyksztalcenie.value=="")
	{
	napis+="wykształcenie\n";
	braki=true;
	}

if (braki==false) alert("Wprowadziłeś wszystkie dane");
else alert("Brakuje następujących danych: \n"+napis);
}
</script>

<table>
<form method="post" enctype="text/plain" name="formularz_pierwszy">
<tr><td>Imię:</td><td><input type="text" name="imie"></td></tr>
<tr><td>Nazwisko:</td><td><input type="text" name="nazwisko"></td></tr>
<tr><td>Adres:</td><td><input type="text" name="adres"></td></tr>
<tr><td>Wykształcenie:</td><td><input type="text" name="wyksztalcenie"></td></tr>
<tr><td></td><td><input type="button" value="Kliknij" onClick="sprawdzanie()"></td></tr>
</form>
</table>

</body>
</html>

Kalkulator

<!DOCTYPE html>
<html  lang="pl-PL">
<head>
<meta charset="utf-8">
<title>Obsługa formularzy</title>

</head>
<body>

if (d=="plus") document.getElementById("wynik").innerHTML=x+y;
if (d=="minus") document.getElementById("wynik").innerHTML=x-y;
if (d=="razy") document.getElementById("wynik").innerHTML=x*y;
if (d=="podzielic") document.getElementById("wynik").innerHTML=x/y;
}
</script>

</td>
<td><input type="text" id="liczba2"></td>
<td>=</td>
<td id="wynik"></td>

</body>
</html>

Rezerwacja pokoju hotelowego

Skrypt oblicza koszt pobytu (osoba dorosła 35zł, dziecko 25zł) i sprawdza, czy użytkownik wprowadził wartość do formularza i czy jest ona liczbą (NaN - Not-a-Number).

Rezerwacja pokoju hotelowego

<!DOCTYPE html>
<html  lang="pl-PL">
<head>
<meta charset="utf-8">
<title>Obsługa formularzy</title>
<style>
#tabela
{
width: 80%;
margin: auto;
}
#dane 
{
background-color:LightCyan;
padding:30px 20px 30px 20px;
width: 50%;
margin: auto;
}
#wynik
{
background-color:PapayaWhip;
padding:30px 20px 30px 20px;
width: 50%;
margin: auto;
text-align:center;
}
.wyr
{
text-align:right;
}
</style>
</head>
<body>

if (!isNaN(dorosli) && !isNaN(dzieci) && !isNaN(dni) && dorosli!="" && dzieci!="" && dni!="") 
{
var koszt=(dorosli*35+dzieci*25)*dni;
document.getElementById("wynik").innerHTML="Dokonałeś rezerwacji na "+dni+" dni <br> dla "+dorosli+" dorosłych i "+dzieci+" dzieci. <br> Koszt całkowity noclegów wynosi "+koszt+" zł.";
}

}
</script>

<div id="dane">
<table id="tabela">
<form method="post" enctype="text/plain" id="formularz">
<tr><td>Podaj liczbę dorosłych: </td><td class="wyr"><input type="text" id="liczba1"></td></tr>
<tr><td>Podaj liczbę dzieci: </td><td class="wyr"><input type="text" id="liczba2"></td></tr>
<tr><td>Podaj liczbę dni: </td><td class="wyr"><input type="text" id="liczba3"></td></tr>
<tr><td colspan="2" class="wyr"><input type="button" value="Oblicz" onClick="oblicz()"></td></tr>
</form>
</table>
</div>
<div id="wynik">
</div>

</body>
</html>