JavaScript onSubmit olayı, kullanıcı sayfadaki bir formu gönderdiği zaman gerçekleşir. (Tarayıcı formu göndermeden önce gerçekleşir.)
Aşağıdaki örnek onSubmit olay tutucuyu kullanarak form gönderilmeden önce bilgi girişi yapılıp-yapılmadığının nasıl kontrol edileceğini ve eğer giriş yapılmadıysa nasıl iptal edileceğini göstermektedir.
Örnekte, onSubmit olay tutucusu Kontrol fonksiyonunu çağıracak şekilde bir form aşağıdaki gibi tanımlanmıştır.
<form ... onSubmit="return(Kontrol());">
Tanımlamada ki return deyimi Kontrol fonksiyonundan dönen değerin tarayıcıya yönlendirilmesini sağlar. onSubmit olayı tetiklendiği zaman Kontrol fonksiyonu aşağıdaki if deyimi ile girişlerin boş olup-olmadığını kontrol eder. Eğer herhangi biri veya ikisi boş ise uyarı göstererek false değeri döndürür. Diğer türlü true döndürür.
if((document.SifreForm.KulText.value == "") ||
(document.SifreForm.SifText.value == ""))
Kontrol fonksiyonundan false dönmesi durumunda ki bu tarayıcıya aktarılır form gönderilmez. Diğer türlü form gönderilir.
<html>
<head>
<script type="text/javascript">
function HataliGiris()
{
document.getElementById('uyari').innerHTML = "Lütfen girişleri kontrol ediniz!";
}
function Kontrol()
{
if((document.SifreForm.KulText.value == "") ||
(document.SifreForm.SifText.value == ""))
{
HataliGiris(); // Uyarıyı göster.
return false; // Form gönderilmez.
}
else
{
return true; // Form gönderilir.
}
}
</script>
</head>
<body>
<form name="SifreForm" method="post" onSubmit="return(Kontrol());">
<div style="background-color:#f0f0f0; border: solid 1px #d0d0d0;">
<table style="font-size:10pt;">
<tr><td>Kullanıcı Adı</td>
<td>: <input id="KulText" type="text" value="" ></td>
<td><span id="KulUyar" style="color:red;"></span></td>
</tr>
<tr><td>Şifre</td>
<td>: <input id="SifText" type="text" value="" ></td>
<td><span id="SifUyar" style="color:red;"></span></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Gönder"></td>
</tr>
<tr>
<td colspan="3"><span id="uyari" style="color:red;"> </span></td>
</tr>
</table></div>
</form>
</body>
</html>