Dropdownlist + input + jQuery = L.F.E.
Ο αριθμος των ιστοσελιδων που δεν περιεχουν εστω και μια φορμα πρεπει να ειναι μονοψηφιος. Ειτε για registration, ειτε για ενα poll, ειτε για την συμπληρωση στοιχειων μιας φορμας πληρωμης ειμαι βεβαιος οτι ολοι εχουμε βρεθει μπροστα σε μια. Στον παρακατω κωδικα που θα δουμε , με την βοηθεια της jQuery μπορουμε βαση την επιλογη ενος option απο μια dropdown λιστα, να απενεργοποιουμε ή να ενεργοποιουμε ενα πεδιο της φορμας.
Για παραδειγμα λοιπον υποθετουμε οτι σε ενα σημειο μιας φορμας πρεπει ο χρηστης να πληκτρολογησει τον αριθμο τηλεφωνου του. Αν το site σας απευθυνεται σε ολους τους χρηστες του internet τοτε ειναι σοφο να χωρισουμε το τηλεφωνικο αριθμο σε 3 τμηματα. Ενας λογος ειναι πχ για ευκολο φιλτραρισμα σε ενα report. Τα 3 αυτα τμηματα ειναι α) ο κωδικος της χωρας β) ο κωδικος της πολης γ)και τελος ο τηλεφωνικος αριθμος.
Στο πρωτο τμημα ειναι προτιμοτερο να χρησιμοποιησουμε ενα dropdownlist με τους κωδικους ολων των χωρων αντι να ζητησουμε απο τον χρηστη να τον πληκτρολογησει και αυτο γιατι αρκετοι δεν τον γνωριζουν. Οποτε επιλεγοντας την χωρα μειωνουμε την πιθανοτητα λαθους. Συνεχιζοντας στο δευτερο τμημα θα δουμε οτι σε περιπτωσεις χωρων οπως η Νορβηγια ή η Δανια θα υπαρξει το εξης προβλημα. Αυτες οι χωρες δεν εχουν κωδικο πολης. Οποτε ο χρηστης θα πληκτρολογησει τον τηλεφωνικο αριθμο μοιρασμενο στο 2ο και 3ο πεδιο ή ολο στο 2ο αν χωραει. Εδω λοιπον καλουμαστε διορθωσουμε αυτη τη συμπεριφορα εφαρμοζοντας την εξης λογικη: Αν ο χρηστης επιλεξει μια απο τις δυο αυτες χωρες τοτε απενεργοποιησε το δευτερο πεδιο, ετσι ωστε να μπορει να πληκτρολογει μονο στο τριτο.
Ξεκιναμε με απλη html(+την jquery βιβλιοθηκη) και εγω στην προκειμενη περιπτωση εβαλα τους τιτλους , τα πεδια και ενα κουμπακι submit ολα σε ενα πινακα. Κανοντας κλικ το κουμπι απλα μας επιστρεφει σε ενα alert ολοκληρο το τηλεφωνο του χρηστη. Θεωρω πως ηδη γνωριζετε τα input και select tags. Αν οχι μπορειτε να διαβασετε εδω και εδω αντιστοιχα.
<html > <title>Dropdown list - xDev.gr</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <body> <table style="font-family:verdana; font-size:0.8em; color:midnightBlue;"> <tbody> <tr> <th>Phone Number</th> <th>Area/City Code</th> <th>Number</th></tr> <tr><td> <select name="PhoneCountry" required="true" title="Select Country Code"> <option value="">Select Country Code</option> <option value="43">Austria (43)</option> <option value="32">Belgium (32)</option> <option value="385">Croatia (385)</option> <option value="420">Czech Republic (420)</option> <option value="45">Denmark (45)</option> <option value="358">Finland (358)</option> <option value="33">France (33)</option> <option value="49">Germany (49)</option> <option value="36">Hungary (36)</option> <option value="353">Ireland (353)</option> <option value="47">Norway (47)</option> </select></td> <td><input name="AreaCode" type="text" maxlength="5" data-type="number" placeholder="Area/City Code"></td> <td><input name="PhoneNumber" type="text" maxlength="8" data-type="number" placeholder="Number"></td></tr> </tbody></table> <input type="button" value="Submit" onclick="popup();"/>
Στη συνεχεια και αφου εχουμε ολοκληρωσει το DOM μεσα σε ενα script tag θα δημιουργησουμε δυο functions. Η πρωτη:
<script type="text/javascript"> function displayval() { phc = $('select[name="PhoneCountry"]').val(); if (phc == "45" || phc == "47") { $('input[name="AreaCode"]').attr("disabled", "disabled"); } else { $('input[name="AreaCode"]').removeAttr("disabled required"); } } $('select[name="PhoneCountry"]').change(displayval);
Επιλεγουμε το select tag και μεσω της .val() περναμε το αποτελεσμα σε μια μεταβλητη. Μετα με ενα if else statement συγκρινουμε αν το αποτελεσμα ειναι το value καποιας απο τις δυο αυτες χωρες. Εαν το if ειναι true τοτε επιλεγουμε το δευτερο πεδιο και με την χρηση της .attr() περναμε την property disabled.Διαφορετικα την αφαιρουμε και αυτο γιατι ο χρηστης μπορει να εχει επιλεξει λαθος χωρα στην αρχη και μετα να την αλλαξει. Κατοπιν επιλεγουμε παλι το select tag και περναμε στην .change() την function που μολις φτιαξαμε. Αυτη ελεγχει αν εχει γινει η επιλογη στην dropdown λιστα.Τελος φτιαχνουμε μια function για το κουμπακι και κλεινουμε την html
function popup(){ ar = $('input[name="AreaCode"]').val(); attribute = $('input[name="AreaCode"]').attr("disabled") if (typeof attribute !== 'undefined' && attribute !== false) { ar = ""} ph = $('input[name="PhoneNumber"]').val(); alert("Your phone number is: " + phc + ar + ph); } </script> </body> </html>
Tιποτα το ιδιαιτερο εδω, απλα στο μονο που αξιζει να αναφερθω ειναι το κομματι
attribute = $('input[name="AreaCode"]').attr("disabled") if (typeof attribute !== 'undefined' && attribute !== false) { ar = ""}
Μεσω του οποιου ελεγχουμε αν το δευτερο πεδιο εχει την property disable. Αν την εχει τοτε το alarm θα δειξει μονο το αριθμο χωρας και το τελευταιο πεδιο. Αν δεν την εχει τοτε θα δειξει και το δευτερο. Οι βελτιωσεις που μπορουν να γινουν ειναι πολλες και συγχωρεστε με για τις global variables που χρησιμοποιω. Κακες συνηθειες οταν γραφω κωδικα για γρηγορα τεστ. Θα κανω ξανα ενα ποστ στο ιδιο θεμα σε λιγες μερες δειχνοντας πως μπορουμε να επιτυχουμε ακριβως το ιδιο αλλα με πολυ λιγοτερες γραμμες κωδικα. Πιο συγκεκριμενα με τη χρηση της .live().
Μπορειτε να δοκιμασετε εδω ενα demo.