Δυναμική προσθήκη επιπλέον text fields. JS? PHP?

[Dark_Sage]

Γειά σε όλους,

 

έχω σε php μεχρι στιγμής 2 text input fields. Ονομα και επώνυμο.

Θέλω να προσθέσω ένα κουμπί ώστε ο χρήστης να μπορεί να εισάγει επιπλέον ονοματεπώνυμο. Δηλαδή πατώντας το κουμπί να εμφανίζονται 2 επιπλέον text fields.

Επειδή δεν ειμαι πολύ έμπειρος με web dev. πως μπορεί να γίνει αυτό? Μπορεί να γίνει με php? Αμα γίνει με php και πατήσω το κουμπί δεν θα χάσω τυχόν ήδη συμπληρωμένα πεδία της φόρμας? Javascript?

 

ευχαριστώ!

[gvre]

Αυτό που θέλεις να κάνεις γίνεται καλύτερα με javascript.

Αν θέλεις ο χρήστης πατώντας το κουμπί να εμφανίζονται 2 επιπλέον text fields (όχι παραπάνω), μπορείς απλά να τα έχεις στη φόρμα σου αλλά να μην τα εμφανίζεις (display: none). Όταν ο χρήστης πατήσει το κουμπάκι τα εμφανίζεις και είσαι έτοιμος.

Αν θέλεις ο χρήστης να μπορεί να εισάγει δυναμικά όσα text fields θέλει, χρειάζεται να ακολουθήσεις λίγο διαφορετική διαδικασία.

[Dark_Sage]

Αν θέλεις ο χρήστης να μπορεί να εισάγει δυναμικά όσα text fields θέλει, χρειάζεται να ακολουθήσεις λίγο διαφορετική διαδικασία.

έχεις καποιο site να μου υποδείξεις για να το δω πως γίνεται?

[gvre]

Δες την cloneNode ή την .clone() αν χρησιμοποιείς jquery.

[Dark_Sage]

μου δημιουργεί πρόβλημα μέχρι στιγμής επειδή εχω name="onoma" και name="epitheto" και με την clone μου δημιουργεί τα ίδια names ενώ εγώ θα ήθελα να είναι διαφορετικά στα καινούργια (π.χ name="onoma1" και name="epitheto1") μιας και χρησιμοποιώ μετά εγω τα names με POST σε php. Καμιά ιδέα σε αυτό?

[macabre_sunsets]

>name="onoma[]"
name="epitheto[]"

Το παραπάνω σε όλα τα input σου. Στο $_POST θα μπορείς να διαχειριστείς τα δεδομένα κάπως έτσι:

>$_POST['onoma'][0], $_POST['onoma'][1], ...

(χωρίς να είμαι σίγουρος για το παραπάνω) ή

>foreach($_POST['onoma'] as $name) { κάνεις ό,τι θέλεις εδώ, χρησιμοποιώντας την μεταβλητή $name }

[NiKoS WSN]

Γίνεται και με άλλον τρόπο στην jQuery

>
<script type="text/javascript">
$(document).ready(function(){

   $(".toidaftonpou8esnaemfaniseis").hide();
 });

</script>

<script type="text/javascript">
$(document).ready(function(){
$(".toidtoukoumpioiu") .click(function(){
$(".toidaftonpou8esnasouemfanistoun").show();
 });
});

</script>

 

Με το πρώτο υπάρχουν και με το δεύτερο εμφανίζονται.(μην ξεχάσει να βάλεις το κουμπί)

[macabre_sunsets]

Γίνεται και με άλλον τρόπο στην jQuery[...]

Αυτό μπορεί να εφαρμοστεί για γνωστό πλήθος input boxes μόνο, κάτι που νομίζω θέλει να αποφύγει ο TS.

[gvre]

μου δημιουργεί πρόβλημα μέχρι στιγμής επειδή εχω name="onoma" και name="epitheto" και με την clone μου δημιουργεί τα ίδια names ενώ εγώ θα ήθελα να είναι διαφορετικά στα καινούργια (π.χ name="onoma1" και name="epitheto1") μιας και χρησιμοποιώ μετά εγω τα names με POST σε php. Καμιά ιδέα σε αυτό?

Τα θέματα που θα πρέπει να λύσεις είναι τα εξής:

 

1. Αυτό που αναφέρεις (δες την απάντηση του macabre_sunsets).

2. Τα id πρέπει να είναι μοναδικά. Θα χρειαστείς ένα μετρητή για να τα κάνεις πχ onoma_1, onoma_2 κλπ.

3. Θα πρέπει να "καθαρίσεις" τις τιμές (κείμενα και checks) από τα text και hidden inputs, textareas, checkboxes κλπ.

4. Αν έχεις labels θα πρέπει να αλλάξεις το for attribute προκειμένου να συμφωνούν με τα id στα οποία αναφέρονται.

5. Θα χρειαστεί να έχεις κουμπάκι remove για τα αντικείμενα που δημιουργείς δυναμικά.

 

Αν προβλέψεις αυτά για αρχή θα είσαι οκ.

[Dark_Sage]

ευχαριστώ πολύ παιδιά όλους σας

[chrism4111]

Η καλυτερη λυση σε αυτο το θέμα είναι να δημιουργουντε κατα το κλικ τα <inputs> αρα πάμε σε άλλες τεχνικές jQuery με την συνάρτηση live()...

Ένα παράδειγμα είναι το παρακάτω

http://chrismos.kodingen.com/index.php

Πάτησε create και πατα το πρώτο checkbox και μετα επομενο ... Εκει έχω την φόρμα που κάνει κατι παρόμοιο

Εαν θες να σου στειλω μέρος του κωδικα τροποποιημενο στειλε μου να το ποσταρω... Βεβαια μπορει να αργησω λιγακι λογω φόρτου εργασιας...

[theomalegan]

Εάν γνωρίζεις το max πλήθος τον πεδίων ο πιο εύκολος τρόπος είναι να τα έχεις στον html κώδικα me display:none

και όταν ο χρήστης κάνει click με jquery να αλάζεις την τιμή display σε block.