Χρήση των JS Events στα Πεδία της Φόρμας

Η νέα δυνατότητα “JS Events στα Πεδία” σας επιτρέπει να προσθέτετε δυναμική συμπεριφορά στα πεδία κάθε φόρμας, χωρίς να γράψετε δικό σας JavaScript εκτός αν το θέλετε. Με λίγα κλικ μπορείτε να:

• Εμφανίζετε ή να αποκρύπτετε άλλα πεδία με βάση τιμές ή ενέργειες
• Ενεργοποιείτε ή να απενεργοποιείτε πεδία δυναμικά
• Ορίζετε προεπιλεγμένες τιμές, εστιάζετε (focus) σε άλλα πεδία
• Εμφανίζετε custom μηνύματα, να κάνετε validate, ή να καλέσετε API/webhook
• Γράφετε το δικό σας custom JS αν θέλετε απόλυτο έλεγχο

 

Πώς το ενεργοποιώ;

1. Μπείτε στον Builder και διαλέξτε το πεδίο που θέλετε να ρυθμίσετε.
2. Στο settings panel, ενεργοποιήστε το “Ενεργοποίηση JS events”.
3. Εμφανίζεται νέα ενότητα όπου μπορείτε να προσθέσετε ένα ή περισσότερα events.

Βήμα-Βήμα Δημιουργία Event

1. Προσθέστε Event: Πατήστε το κουμπί “Προσθήκη event”.
2. Διαλέξτε τύπο event:
   • π.χ. change (όταν αλλάζει η τιμή)
   • click, focus, blur, keyup κλπ.
3. Διαλέξτε ενέργεια (action):
   • Εμφάνιση/Απόκρυψη πεδίου: showField ή hideField
   • Ορισμός τιμής: setValue (π.χ. phone:6999999999)
   • Εναλλαγή εμφάνισης: toggleField
   • Ενεργοποίηση/Απενεργοποίηση: enableField, disableField
   • Focus/Scroll: focusField, scrollToField
   • Validation/Reset: validateField, resetField
   • Μήνυμα: showMessage (γράφετε το μήνυμα)
   • Webhook/API: runWebhook (π.χ. https://example.com/api|POST)
   • Custom JS: - Μπορείτε να γράψετε το δικό σας JavaScript!
4. Δώστε τις παραμέτρους (όπου χρειάζεται):
   Π.χ. αν διαλέξετε showField, συμπληρώστε το name του πεδίου που θέλετε να εμφανίζεται.
5. Αποθηκεύστε και δοκιμάστε live στο preview!

Reference: Παράμετροι ανά Action

Action	Τι κάνει	Τι βάζω στο “Παράμετρο” (param)	Παράδειγμα
showField	Εμφανίζει πεδίο	Το name του πεδίου που θέλεις να εμφανίζεται	address
hideField	Αποκρύπτει πεδίο	Το name του πεδίου που θέλεις να κρυφτεί	address
toggleField	Εναλλάσσει ορατότητα πεδίου	Το name του πεδίου	phone
enableField	Ενεργοποιεί πεδίο (αφαιρεί disabled)	Το name του πεδίου	company_name
disableField	Απενεργοποιεί πεδίο (κάνει disabled)	Το name του πεδίου	company_name
setValue	Ορίζει τιμή σε άλλο πεδίο	name:τιμή (χωρίς κενά)	email:info@example.com
focusField	Κάνει focus σε πεδίο	Το name του πεδίου	vat_number
validateField	Ελέγχει αν πεδίο είναι συμπληρωμένο (βάζει κόκκινο outline αν δεν είναι)	Το name του πεδίου	email
resetField	Καθαρίζει την τιμή του πεδίου	Το name του πεδίου	phone
scrollToField	Κάνει scroll και focus σε πεδίο	Το name του πεδίου	address
showMessage	Εμφανίζει popup μήνυμα (alert)	Το κείμενο που θες να εμφανιστεί	Συμπληρώστε το ΑΦΜ!
runWebhook	Στέλνει AJAX (API) κλήση όταν εκτελείται το event	url ή url|METHOD (method = GET ή POST)	https://example.com/api/check ή https://example.com/api/check|POST
- Custom JS -	Εκτελεί δικό σας JavaScript code	Γράφετε ό,τι θέλετε (function body)	alert('Value: '+this.value);

Σημείωση: Για actions που χρειάζονται όνομα πεδίου, βάζετε ακριβώς το name του πεδίου στόχου (φαίνεται στις ρυθμίσεις κάθε πεδίου).
Για setValue χρησιμοποιείτε σύνταξη όνομα:τιμή (χωρίς κενά).
Για runWebhook μπορείτε να ορίσετε και μέθοδο (GET ή POST).
Στα custom JS, η μεταβλητή this δείχνει πάντα στο input που πυροδότησε το event.

Παραδείγματα

• Αυτόματη εμφάνιση πεδίου:
  Όταν το checkbox Έχω επιπλέον στοιχεία τσεκαριστεί (change + showField + address_details), το πεδίο address_details θα εμφανιστεί.
• Set value σε άλλο πεδίο:
  Στο event focus στο πεδίο email, βάλτε setValue με param note:Παρακαλώ συμπληρώστε το email σας για να προσθέσει μήνυμα στο πεδίο note.
• Custom μήνυμα όταν γίνει paste σε πεδίο:
  Event: paste / Action: showMessage / Param: Μην κάνετε paste, πληκτρολογήστε το χειροκίνητα!
• Custom JS παράδειγμα:
  Επιλέξτε “Custom JS” και γράψτε:
  alert('Το value είναι: ' + this.value);
• Call API όταν αλλάξει πεδίο:
  Event: change / Action: runWebhook / Param: https://myapi.gr/api/check|POST

Προχωρημένες Συμβουλές

• Μπορείτε να προσθέσετε όσα events θέλετε σε κάθε πεδίο.
• Όλα τα actions δουλεύουν με το name του πεδίου (το βρείτε στις ρυθμίσεις κάθε πεδίου).
• Custom JS έχει πρόσβαση στο input μέσω this (π.χ. this.value).
• Τα actions εκτελούνται μόνο στη φόρμα, όχι στο admin panel.
• Αν αλλάξετε δομή/ονόματα πεδίων, ενημερώστε τα events σας!

Συχνές Ερωτήσεις

Τα actions τρέχουν σε όλα τα instances του πεδίου (π.χ. repeaters);

Ναι, το script επιλέγει όλα τα πεδία με το ίδιο name. Για ξεχωριστή λογική, χρησιμοποιήστε Custom JS.

Μπορώ να προσθέσω πολλαπλά actions σε ένα event;

Ναι! Προσθέστε πολλά events (ίδιο type) με διαφορετικά actions.

Τι γίνεται αν βάλω λάθος όνομα πεδίου ή δεν υπάρχει;

Δεν θα εκτελεστεί το action — ελέγξτε πάντα τα names.

Τελική Συμβουλή

Τα JS Events δίνουν unlimited flexibility και αυτοματοποίηση στη φόρμα σας, χωρίς development! Αν έχετε απορίες, επικοινωνήστε με το support.