Kali ini kita akan membahas No Enter di Form atau TextBox dengan Javascript. Pada saat kita membuat form di html ataupun di php maka akan ada textbox dan tombol submit yg harus di buat, seringkali user pengguna menginput form tidak menggunakan mouse tapi menggunakan keyboard dan disini menjadi masalah ketika user tidak sengaja menekan tombol enter saat ada di textbox. Pada tutorial kali ini kita akan membuat dlu form tanpa No Enter.
index.php
<html>
<head>
<title>No Enter di Form atau TextBox</title>
</head>
<body>
<h4>No Enter di Form atau TextBox</h4>
<hr>
<form action="insert.php" method="POST">
<input type="text" >
<input type="submit" value="Simpan">
</form>
</body>
</html>
coba jalankan dan saat di textbox tekan enter, maka akan redirect ke file insert.php padahal kita belum menekan tombol Simpan.
selanjutnya kita akan membuat form dengan no enter javascript, silahkan edit file yg tadi, seperti dibawah ini.
<html>
<head>
<title>No Enter di Form atau TextBox</title>
</head>
<body>
<h4>No Enter di Form atau TextBox</h4>
<hr>
<form action="insert.php" method="POST">
<input type="text" onkeypress="return no_enter(event)">
<input type="submit" value="Simpan">
</form>
</body>
<script type="text/javascript">
function no_enter(evt) {
if (evt.which == '13') {
evt.preventDefault();
}
}
</script>
</html>
coba jalankan seperti yg tdi dilakukan maka tidak akan redirect ke file insert.php. hal ini memungkinkan kita tidak selalu melakukan validasi di setiap proses jadi langsung di persempit di tampilan atau frontend.