Το onsubmit είναι το Γεγονός κατά το οποίο ο χρήστης πατάει το κουμπί submit για να υποβάλει μια Φόρμα. Το onsubmit τοποθετείται στην ετικέτα <form>. Το χρησιμοποιούμε πολύ συχνά για να ελέγχουμε την ορθότητα των τιμών που πληκτρολογεί ο χρήστης σε πεδία μιας Φόρμας πριν την υποβολή της. Με τον έλεγχο της ορθότητας των τιμών εννοούμε την σωστή πληκτρολόγηση τιμών ή κειμένου από τον χρήστη σύμφωνα με την μάσκα των πεδίων που έχουμε εμείς αποφασίσει (π.χ. μέγιστο αριθμό χαρακτήρων, μεγαλύτερο από μια τιμή, απαραίτητη η ύπαρξη δύο συμβόλων κτλ.) Για να γίνεται ο έλεγχος των τιμών των πεδίων μιας Φόρμας και έπειτα να επιτρέπετε ή να απαγορεύεται η υποβολή της, γράφουμε την ετικέτα <form> έτσι:
Η λειτουργία functionName συνήθως αποτελείται από μια ή περισσότερες συνθήκες οι οποίες ελέγχουν τις τιμές ή τα κείμενα των πεδίων της Φόρμας που πληκτρολογεί ο χρήστης. Αν οι τιμές αυτές είναι σωστές τότε η λειτουργία επιστρέφει στο onsubmit την τιμή true, που σημαίνει ότι επιτρέπεται η υποβολή της Φόρμας. Στην αντίθετη περίπτωση, όταν δηλαδή οι τιμές που πληκτρολόγησε ο χρήστης παραβιάζουν τους κανόνες που θέσαμε, τότε η λειτουργία επιστρέφει την τιμή false και απαγορεύει την υποβολή της Φόρμας
Μάθετε περισσότερα για τις Φόρμες
<form name="formName" onsubmit="return functionName()">
Η λειτουργία functionName συνήθως αποτελείται από μια ή περισσότερες συνθήκες οι οποίες ελέγχουν τις τιμές ή τα κείμενα των πεδίων της Φόρμας που πληκτρολογεί ο χρήστης. Αν οι τιμές αυτές είναι σωστές τότε η λειτουργία επιστρέφει στο onsubmit την τιμή true, που σημαίνει ότι επιτρέπεται η υποβολή της Φόρμας. Στην αντίθετη περίπτωση, όταν δηλαδή οι τιμές που πληκτρολόγησε ο χρήστης παραβιάζουν τους κανόνες που θέσαμε, τότε η λειτουργία επιστρέφει την τιμή false και απαγορεύει την υποβολή της Φόρμας
Μάθετε περισσότερα για τις Φόρμες
Παράδειγμα 1
Παρακάτω θα υποθέσουμε ότι έχουμε μια Φόρμα εγγραφής μελλών σε σχολή σκοποβολής. Για να γραφτεί κάποιος εκεί αρκεί να δώσει το ονοματεπώνυμο του και την ηλικία του. Η σχολή έχει τον εσωτερικό κανονισμό σύμφωνα με τον οποίο δέχεται μέλη ηλικίας άνω των 18 ετών. Η παρακάτω Φόρμα εγγραφής λοιπόν έχει 3 πεδία κειμένου: ένα για το όνομα, ένα για το επώνυμο και ένα για την ηλικία. Όταν η γραμματέας της σχολής συμπληρώνει την Φόρμα και πατάει το κουμπί υποβολής (onsubmit), εκτελείται μια λειτουργία Javascript η οποία ελέγχει αν η ηλικία είναι μικρότερη του 18. Στην περίπτωση που είναι μικρότερη του 18 τότε θα εμφανίζει το μήνυμα: 'Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18.' και δεν θα γίνεται υποβολή της Φόρμας. Δοκίμασε το
Η ετικέτα <form> περιέχει το onsubmit="return check_form()". Όταν στην Φόρμα αυτή συμβαίνει η αποστολή των δεδομένων της, πριν σταλούν τα δεδομένα εκτελείται η JavaScript λειτουργία check_form() η οποία επιστρέφει (return) true αν η ηλικία είναι μεγαλύτερη του 18 και false αν είναι μικρότερη του 18. Αν η τιμή που θα επιστρέψει η JavaScript λειτουργία check_form() είναι true τότε θα σταλούν τα δεδομένα της Φόρμας, αν επιστρέψει την τιμή false δεν θα σταλούν τα δεδομένα.
Το γεγονός onsubmit
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function check_form() {
if (registerForm.ilikia.value > 18)
return true
else
alert("Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18")
return false
}
//-->
</script>
<body>
<form action="doityourself/register_in_skopovoli.php" method="post" name="registerForm" onSubmit="return check_form()">
Όνομα: <input name="onoma" type="text" size="20" maxlength="20"> <br />
Επώνυμο: <input name="eponimo" type="text" size="20" maxlength="20"> <br />
Ηλικία: <input name="ilikia" type="text" size="2" maxlength="2"> <br />
<input name="submit" type="submit" value="εγγραφή">
</form>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function check_form() {
if (registerForm.ilikia.value > 18)
return true
else
alert("Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18")
return false
}
//-->
</script>
<body>
<form action="doityourself/register_in_skopovoli.php" method="post" name="registerForm" onSubmit="return check_form()">
Όνομα: <input name="onoma" type="text" size="20" maxlength="20"> <br />
Επώνυμο: <input name="eponimo" type="text" size="20" maxlength="20"> <br />
Ηλικία: <input name="ilikia" type="text" size="2" maxlength="2"> <br />
<input name="submit" type="submit" value="εγγραφή">
</form>
</body>
</html>
