Submit Form - Javascript Error

Έστω ότι έχουμε μία πολύ απλή φόρμα HTML όπως η παρακάτω:
<form name="sample" id="sample" method="GET" action="<index.html">
<label for="name">Εισάγετε το όνομά σας</label>
<input type="text" name="name" id="name">
<input type="submit" name="submit" id="submit" value="Καταχώρηση">
</form>

Στη φόρμα αυτή ο χρήστης απλώς καταχωρεί το όνομά του. Δε θα βόλευε όμως αν μπορούσαμε να ελέγξουμε ότι δε θα πατήσει απλώς "Καταχώρηση" χωρίς να έχει συμπληρώσει τη φόρμα; Ας φτιάξουμε λοιπόν και τον κατάλληλο javascript κώδικα:
<script language="javascript">
function check(){
if(document.getElementById("name").value.length!=0){
document.getElementById("sample).submit();
}else{
alert("Παρακαλώ συμπληρώστε τα πεδία της φόρμας");
}
}
</script>

Έτσι δημιουργήσαμε τη function "check" η οποία ελέγχει αν το στοιχείο με id="name" έχει μήκος τιμής ίσο με 0(κοινώς είναι κενό). Μένει μόνο τώρα να ορίσουμε πότε θα εκτελείται η συγκεκριμένη function.

Αν τη βάλουμε στο OnSubmit της φόρμας, η φόρμα θα καταχωρείται και μετά θα εκτελείται η function. Αν αντίθετα τη βάλουμε στο OnClick του button θα εκτελεστεί σωστά. Άρα θα κάνουμε μια αλλαγή στη φόρμα. Αντί για
<input type="submit" name="submit" id="submit" value="Καταχώρηση">

θα γράψουμε
<input type="button" name="submit" id="submit" value="Καταχώρηση" onclick="check();">

Είμαστε έτοιμοι. Σωστά; Ωραία! Ας δοκιμάσουμε τη φόρμα!...Αλλά δε δουλεύει.

Αν έχουμε εγκαταστήσει το Firebug add-on θα παρατηρήσουμε 1 σφάλμα javascript που θα μας λέει ότι το submit της φόρμας δεν είναι function. Το πρόβλημα αυτό παρουσιάζεται γιατί έχουμε δώσει στο κουμπί καταχώρησης id="submit".

Επειδή δηλαδή μία φόρμα καταχωρείται μέσω javascript χρησιμοποιώντας την function submit(), δεν επιτρέπεται να δοθεί σε στοιχείο της φόρμας id="submit".

Comments

Popular Posts