Δημιουργία δυναμικής φόρμας

[Sta]

Καλησπέρα σας,

 

Θα ήθελα να ρωτήσω εάν γνωρίζετε κάποιο τρόπο για τη δημιουργία δυναμικής φόρμας εισαγωγής στοιχείων. Αυτό που θέλω είναι να μεταβάλλεται είναι ο αριθμός των input πεδίων στα οποία μπορεί να εισάγει δεδομένα ο χρήστης. Π.χ. με το πάτημα κάποιου κουμπιού να εμφανίζεται και ένα καινούριο input πεδίο για εισαγωγή δεδομένων.

 

Ευχαριστώ θερμά.

[bobosss]

javascript...

[alex2005]

Κατατοπιστικότατος είσαι bobosss

 

Πάντως γίνεται όντως με javascript.

 

Θα σου δώσω ένα γρήγορο παράδειγμα.

 

Έστω ότι θέλεις να εμφανίσεις το παρακάτω πεδίο....

 

><input type="text" id="hiddenText" style="display:none" />

....πατώντας αυτό το κουμπί.

 

Τότε παρατήρησε τον κώδικα στο onclick attribute

 

><input type="button" onclick="document.getElementById('hiddenText').style.display = 'inline' ;" />

Αυτό το οποίο κάναμε είναι να έχουμε το πεδίο αόρατο και μετά όταν πατιέται αυτό το κουμπί να το εμφανίζει.

 

Το έκανα στα γρήγορα....ενδέχεται να υπάρχει κάποιο μικρό λαθάκι....αλλά η ιδέα είναι αυτή

[bobosss]

επειδή ο alex μου την είπε :p

Ας γίνω πιο κατατοπιστικός.

Σου έχω γράψει ενα javacript απο το οποίο επιλέγεις απο ένα selection ποσα textboxes θέλεις να εμφανιστούν στην σελίδα σου.

Το καθε ένα απο αυτά πέρνει και διαφορέτικό όνομα για να μπορείς να το διαχειριστείς μετά το post.

Έτσι δεν έχεις κρυφά πεδια όπως λέει παραπάνω ο alex αλλα ο χρήστης θα πρέπει να γνωρίζει απο την αρχή ποσα textboxes χρειάζετε μιας και σε κάθε αλαγή γίνετε clear.

><script language="Javascript" type="text/javascript">
function addField(area,field) {
var field_area = document.getElementById(area);

var sel = document.getElementById("number");

var limit=sel.options[sel.selectedIndex].value;

field_area.innerHTML = '';
for(var i = 1; i <= limit; i++){ 	
document.createElement
	var li = document.createElement("li");

	li.innerText = 'textbox'+i;
	var input = document.createElement("input");
	input.id = field+i;
	input.name = field+i;
	input.type = "number"; 
	li.appendChild(input);
	field_area.appendChild(li);
}
}
//-->
</script>

<select name="number" onChange="addField('textboxes','textboxes')" id="number">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
   </select>

<ol id="textboxes">
   <label>textboxes
   </label>
   <br />
</ol>

[alex2005]

Τώρα μάλιστα...έγινες πιο συγκεκριμένος