CRM και πλατφόρμες δεδομένων

Πώς να συμπληρώσετε εκ νέου ένα πεδίο φόρμας με τη σημερινή ημερομηνία και JavaScript ή JQuery

Ενώ πολλές λύσεις προσφέρουν την ευκαιρία αποθήκευσης της ημερομηνίας με κάθε καταχώριση φόρμας, υπάρχουν και άλλες φορές που δεν αποτελεί επιλογή. Ενθαρρύνουμε τους πελάτες μας να προσθέσουν ένα κρυφό πεδίο στον ιστότοπό τους και να περάσουν αυτές τις πληροφορίες μαζί με την καταχώριση, ώστε να μπορούν να παρακολουθούν πότε εισάγονται καταχωρίσεις φόρμας. Χρησιμοποιώντας JavaScript, αυτό είναι εύκολο.

Πώς να συμπληρώσετε εκ νέου ένα πεδίο φόρμας με τη σημερινή ημερομηνία και JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with JavaScript</title>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Function to get today's date in the desired format
        function getFormattedDate() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            return formattedDate;
        }

        // Use JavaScript to set the value of the hidden field to today's date
        document.getElementById('hiddenDateField').value = getFormattedDate();
    </script>
</body>
</html>

Ας αναλύσουμε τον παρεχόμενο κώδικα HTML και JavaScript βήμα προς βήμα:

  1. <!DOCTYPE html> και <html>: Πρόκειται για τυπικές δηλώσεις εγγράφων HTML που προσδιορίζουν ότι πρόκειται για έγγραφο HTML5.
  2. <head>: Αυτή η ενότητα χρησιμοποιείται συνήθως για να συμπεριλάβει μεταδεδομένα σχετικά με το έγγραφο, όπως ο τίτλος της ιστοσελίδας, ο οποίος ορίζεται χρησιμοποιώντας το <title> στοιχείο.
  3. <title>: Αυτό ορίζει τον τίτλο της ιστοσελίδας σε "Προπληθυσμός ημερομηνίας με JavaScript".
  4. <body>: Αυτή είναι η κύρια περιοχή περιεχομένου της ιστοσελίδας όπου τοποθετείτε το ορατό περιεχόμενο και τα στοιχεία διεπαφής χρήστη.
  5. <form>: Ένα στοιχείο φόρμας που μπορεί να περιέχει πεδία εισαγωγής. Σε αυτήν την περίπτωση, χρησιμοποιείται για να περιέχει το κρυφό πεδίο εισαγωγής που θα συμπληρωθεί με τη σημερινή ημερομηνία.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Αυτό είναι ένα κρυφό πεδίο εισαγωγής. Δεν εμφανίζεται στη σελίδα, αλλά μπορεί να αποθηκεύσει δεδομένα. Του δίνεται ένα αναγνωριστικό του "hiddenDateField" και ένα όνομα του "hiddenDateField" για αναγνώριση και χρήση σε JavaScript.
  7. <script>: Αυτή είναι η ετικέτα ανοίγματος για ένα μπλοκ σεναρίου JavaScript, όπου μπορείτε να γράψετε κώδικα JavaScript.
  8. function getFormattedDate() { ... }: Αυτό ορίζει μια συνάρτηση JavaScript που ονομάζεται getFormattedDate(). Μέσα σε αυτή τη λειτουργία:
    • Δημιουργεί ένα νέο Date αντικείμενο που αντιπροσωπεύει την τρέχουσα ημερομηνία και ώρα χρησιμοποιώντας const today = new Date();.
    • Μορφοποιεί την ημερομηνία σε μια συμβολοσειρά με την επιθυμητή μορφή (μμ/ηη/εεεε) χρησιμοποιώντας today.toLocaleDateString(). ο 'en-US' Το όρισμα καθορίζει την τοπική ρύθμιση (αμερικανικά αγγλικά) για τη μορφοποίηση και το αντικείμενο με year, month, να day ιδιότητες ορίζει τη μορφή ημερομηνίας.
  9. return formattedDate;: Αυτή η γραμμή επιστρέφει τη μορφοποιημένη ημερομηνία ως συμβολοσειρά.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Αυτή η γραμμή κώδικα:
    • μπορείτε να χρησιμοποιήσετε document.getElementById('hiddenDateField') για να επιλέξετε το κρυφό πεδίο εισαγωγής με το αναγνωριστικό "hiddenDateField".
    • Ορίζει το value ιδιότητα του επιλεγμένου πεδίου εισαγωγής στην τιμή που επιστρέφεται από το getFormattedDate() λειτουργία. Αυτό συμπληρώνει το κρυφό πεδίο με τη σημερινή ημερομηνία στην καθορισμένη μορφή.

Το τελικό αποτέλεσμα είναι ότι όταν φορτώνεται η σελίδα, το κρυφό πεδίο εισαγωγής με αναγνωριστικό "hiddenDateField" συμπληρώνεται με τη σημερινή ημερομηνία στη μορφή μμ/ηη/εεεε χωρίς αρχικά μηδενικά, όπως ορίζεται στο getFormattedDate() λειτουργία.

Πώς να συμπληρώσετε εκ νέου ένα πεδίο φόρμας με τη σημερινή ημερομηνία και το jQuery

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with jQuery and JavaScript Date Object</title>
    <!-- Include jQuery from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Use jQuery to set the value of the hidden field to today's date
        $(document).ready(function() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            $('#hiddenDateField').val(formattedDate);
        });
    </script>
</body>
</html>

Αυτός ο κώδικας HTML και JavaScript δείχνει πώς να χρησιμοποιήσετε το jQuery για να συμπληρώσετε εκ των προτέρων ένα κρυφό πεδίο εισαγωγής με τη σημερινή ημερομηνία, μορφοποιημένο ως mm/dd/εεεε, χωρίς μηδενικά. Ας το αναλύσουμε βήμα βήμα:

  1. <!DOCTYPE html> και <html>: Πρόκειται για τυπικές δηλώσεις εγγράφων HTML που υποδεικνύουν ότι πρόκειται για έγγραφο HTML5.
  2. <head>: Αυτή η ενότητα χρησιμοποιείται για τη συμπερίληψη μεταδεδομένων και πόρων για την ιστοσελίδα.
  3. <title>: Ορίζει τον τίτλο της ιστοσελίδας σε "Προπληθυσμός ημερομηνίας με αντικείμενο jQuery και JavaScript Date".
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Αυτή η γραμμή περιλαμβάνει τη βιβλιοθήκη jQuery καθορίζοντας την πηγή της από ένα δίκτυο παράδοσης περιεχομένου (CDN). Διασφαλίζει ότι η βιβλιοθήκη jQuery είναι διαθέσιμη για χρήση στην ιστοσελίδα.
  5. <body>: Αυτή είναι η κύρια περιοχή περιεχομένου της ιστοσελίδας όπου τοποθετείτε το ορατό περιεχόμενο και τα στοιχεία διεπαφής χρήστη.
  6. <form>: Ένα στοιχείο φόρμας HTML που χρησιμοποιείται για να περιέχει πεδία εισαγωγής. Σε αυτήν την περίπτωση, χρησιμοποιείται για την ενθυλάκωση του κρυφού πεδίου εισαγωγής.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ένα κρυφό πεδίο εισαγωγής που δεν θα είναι ορατό στην ιστοσελίδα. Του έχει εκχωρηθεί ένα αναγνωριστικό του "hiddenDateField" και ένα όνομα του "hiddenDateField".
  8. <script>: Αυτή είναι η ετικέτα ανοίγματος για ένα μπλοκ σεναρίου JavaScript όπου μπορείτε να γράψετε κώδικα JavaScript.
  9. $(document).ready(function() { ... });: Αυτό είναι ένα μπλοκ κώδικα jQuery. Χρησιμοποιεί το $(document).ready() λειτουργία για να διασφαλίσει ότι ο κώδικας που περιέχεται εκτελείται μετά την πλήρη φόρτωση της σελίδας. Μέσα σε αυτή τη λειτουργία:
    • const today = new Date(); δημιουργεί ένα νέο Date αντικείμενο που αντιπροσωπεύει την τρέχουσα ημερομηνία και ώρα.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); μορφοποιεί την ημερομηνία σε μια συμβολοσειρά με την επιθυμητή μορφή (μμ/ηη/εεεε) χρησιμοποιώντας το toLocaleDateString μέθοδος.
  10. $('#hiddenDateField').val(formattedDate); επιλέγει το κρυφό πεδίο εισαγωγής με το αναγνωριστικό "hiddenDateField" χρησιμοποιώντας jQuery και ορίζει value στη μορφοποιημένη ημερομηνία. Αυτό ουσιαστικά συμπληρώνει εκ των προτέρων το κρυφό πεδίο με τη σημερινή ημερομηνία στην καθορισμένη μορφή.

Ο κώδικας jQuery απλοποιεί τη διαδικασία επιλογής και τροποποίησης του κρυφού πεδίου εισαγωγής σε σύγκριση με την καθαρή JavaScript. Όταν φορτώνεται η σελίδα, το κρυφό πεδίο εισαγωγής συμπληρώνεται με τη σημερινή ημερομηνία σε μορφή μμ/ηη/εεεε και δεν υπάρχουν μηδενικά στην αρχή, όπως καθορίζεται στο formattedDate μεταβλητός.

Douglas Karr

Douglas Karr είναι ΚΟΑ του OpenINSIGHTS και ο ιδρυτής του Martech Zone. Ο Ντάγκλας έχει βοηθήσει δεκάδες επιτυχημένες νεοφυείς επιχειρήσεις της MarTech, έχει βοηθήσει στη δέουσα επιμέλεια άνω των 5 δισεκατομμυρίων δολαρίων σε εξαγορές και επενδύσεις της Martech και συνεχίζει να βοηθά τις εταιρείες στην εφαρμογή και την αυτοματοποίηση των στρατηγικών πωλήσεων και μάρκετινγκ. Ο Ντάγκλας είναι ένας διεθνώς αναγνωρισμένος ειδικός και ομιλητής στον ψηφιακό μετασχηματισμό και στη MarTech. Ο Ντάγκλας είναι επίσης δημοσιευμένος συγγραφέας ενός οδηγού Dummie και ενός βιβλίου επιχειρηματικής ηγεσίας.

Σχετικά άρθρα

Επιστροφή στην κορυφή κουμπί
Κλεισιμο

Εντοπίστηκε μπλοκ διαφημίσεων

Martech Zone είναι σε θέση να σας παρέχει αυτό το περιεχόμενο χωρίς κόστος, επειδή δημιουργούμε έσοδα από τον ιστότοπό μας μέσω εσόδων από διαφημίσεις, συνδέσμων συνεργατών και χορηγιών. Θα εκτιμούσαμε εάν καταργούσατε το πρόγραμμα αποκλεισμού διαφημίσεων καθώς προβάλλετε τον ιστότοπό μας.