εμφανιση λιστας επιλογων αναλογα με την επιλογη του χρηστη σε radio buttons

[koslibpro]

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

 

θελω να φτιαξω να ερωτηματολογιο μεσα σε μια ιστοσελιδα.

 

εχω λοιπον μια επιλογη με radio buttons που ο χρηστης κανει την επιλογη του και η επομενη ερωτηση ειναι να επιλεξει απο μια drop-down list κατι αλλο ο χρηστης.

 

θελω αναλογα με ποια επιλογη θα κανει ο χρηστηςστην πρωτη ερωτηση(με τα radio buttons) να του εμφανιζει μια συγκεκριμενη drop-down list της επομενης ερωτησης..

 

πως μπορω να το κανω αυτο?

 

υγ:δουλευω με html/php/css, τωρα αν χρειαστει και javascript οκ αλλα με ρεγουλα

 

ευχαριστω εκ των προτερων

[bikey77]

Η δομή ποια είναι, page1.php μετά page2.php κλπ;

Αν ναι, μπορείς να ορίσεις δυναμικά τα options στη λίστα πχ:

 

>
<select id="question2" name="question2">
<? if($_POST['question1']=='a') {
echo '<option value="1">Answer 1</option>';
} elseif($_POST['question1']=='b') { 
echo '<option value="2">Answer 2</option>';
} else {
echo '<option value="3">Answer 3</option>';
} ?>
</select>

 

[kalogeros]

Αν θες η dropdown λίστα να εμφανίζεται στην ίδια σελίδα, χωρίς να φορτώνει άλλο αρχείο, υπάρχουν δύο τρόποι να το κάνεις:

1) Με AJAX

2) Με σκέτη javascript, όπου θα παίζεις με το display των λιστών. Θα τις έχεις όλες τις λίστες δημιουργημένες, αλλά με display: none. Ανάλογα με την επιλογή του χρήστη, θα αλλάζεις το display της λίστας που επιθυμείς σε block.

 

Όταν λες drop-down list, εννοείς select;

[koslibpro]

η δομη ειναι οπως ειπε ο φιλος παραπανω,page1.php,page2.php και παει λεγοντας.

νομιζω πως σε στυλ

>
<select id="question2" name="question2">
<? if($_POST['question1']=='a') {
echo '<option value="1">Answer 1</option>';
} elseif($_POST['question1']=='b') { 
echo '<option value="2">Answer 2</option>';
} else {
echo '<option value="3">Answer 3</option>';
} ?>
</select>

 

θα με βολεψει.τωρα το δοκιμαζω και ενημεωνω..

 

ειχα στο μιαλο μου για αυτο με το display με javascript,οποτε και θα καταφυγω σε αυτο αν αποτυχει το αποπανω..

 

ευχαριστω μεχρι ωρας

 

EDIT:τελικα δεν με βολευει,γιατι υπαρχουν μερικες φορες ερωτησεις στην ιδια σελιδα.δηλαδη δυο ερωτησεις που θελω οι επιλογες της δευτερης να εξαρτωνται απο την επιλογη που εχει γινει στην πρωτη.αρα αναγκαστικα μα javascript?πιο συγκεκριμενα,πως μπορω να το κανω αυτο..?

[defacer]

Το ευκολότερο για σένα θα ήταν να έχεις όλα τα πιθανά drop downs ήδη στην HTML σου αλλά να μη φαίνονται (ή να φαίνεται μόνο ένα). Όταν αλλάζει η επιλογή σε προηγούμενη ερώτηση (radio button) κανονίζεις να εμφανίζονται/εξαφανίζονται ανάλογα τα drop downs.

 

Όταν γίνει submit η φόρμα τα drop downs που δεν είναι ορατά δε θα γίνουν submit γιατί δεν είναι "successful" (αυτή είναι η ορολογία) οπότε μπορείς να δώσεις και σε όλα το ίδιο name αν σε βολεύει καλύτερα.

 

Όλα αυτά γίνονται με ελάχιστο jQuery, δες εδώ.

[thanocaster]

Well, I'll be damned... Ο defacer πρότεινε λύση που δεν είναι by the book... =ρ

[defacer]

Φέρτε μου τους πυρσούς έχουμε γεμίσει βρωμοtroll εδωπέρα!

 

 

 

Μια χαρά by the book το βλέπω. Αν περίμενες πιο "θεαματική" αντίδραση και σε απογοήτευσα, κάνε ένα account και μπες να προτείνεις λύση με document.write(). Θα αποζημιώσω με το παραπάνω!

 

 

[thanocaster]

Χαχαχχ! Βασικά, πιστεύω πως by the book θα ήταν να φόρτωνε μόνο όσα έλεμεντς χρειάζεται η φόρμα, και εφόσον δεν είναι ενεργοποιημένη η javascript να υπάρχει κουμπί δίπλα στο dropdown που να ανανεώνει τη σελίδα φορτώνοντας μόνο τα αντίστοιχα έλεμεντς, ενώ αν είναι ενεργοποιημένη η javascript, να φορτώνει onselect μόνο τα κατάλληλα στοιχεία.

 

 

 

Το onselect του dropdown ΜΟΝΟ με inline onselect attribute ΦΥΣΙΚΑ! Go nuts! =ρ

 

 

 

Βέβαια, πρακτικά, όλα αυτά μικρή σημασία έχουν.

[defacer]

 

 

Εσύ κάνεις πλάκα, αλλά κατά το 2004 έκανα contribute στο Moodle και υπήρχε η γενική ντιρεκτίβα πως πρέπει τα πάντα να δουλεύουν και χωρίς Javascript. Δε μπορείς να φανταστείς τι έκανα σε κάποιες περιπτώσεις για να έχουμε τέλεια συμπεριφορά με και χωρίς -- θυμάμαι χαρακτηριστικό παράδειγμα:

 

(με) drop down που onselect σε κάνει redirect σε άλλη σελίδα

(χωρίς) drop down με κουμπί "go" από δίπλα, επιλέγεις και κλικάρεις και σε πάει σε άλλη σελίδα

 

Ακούγεται ίσως αστείο τώρα, αλλά ήταν απίστευτη κούραση να γίνει τέλεια. Ήθελε να βάλεις το κουμπί σε <noscript> αλλά μετά αυτό χαλούσε το layout και άλλα τέτοια τραγελαφικά. Και βέβαια στη χρυσή εποχή του IE6 με το απαράμιλλο standards compliance, development tools ούτε για δείγμα (δεν είχε καν κυκλοφορήσει ο FF) και γενικά τρελλό πάρτυ.

 

Τώρα πια σκέφτομαι καμιά φορά "πώς ήταν δυνατόν να κάνουμε development εκείνη την εποχή" και δεν το χωράει το μυαλό μου ότι όντως κάναμε και όντως δούλευαν. Όπως σκέφτεσαι π.χ. ότι στείλαμε ανθρώπους στο φεγγάρι με αυτό και δεν το πιστεύεις ένα πράγμα.

 

 

[thanocaster]

 

 

Σε μερικά χρόνια θα αναρωτιόμαστε πώς κάναμε ντηβέλοπμεντ και σήμερα. Στην προηγούμενη δουλειά μου είχαμε πρακτικά 4 διαφορετικά σάιτ. Ένα το κανονικό, ένα για print, ένα mobile για κινητά και άλλο mobile για ταμπλέτες. Ήταν για μουσική εφημερίδα με ΠΟΛΛΑ βίντεο (σκέψου ότι είχαμε σελίδα που φόρτωνε γύρω στα 120 youtube thumbnails). Εν τω μεταξύ ο προηγούμενος developer είχε βάλει σε ΟΛΑ τα thumbs facebook like button. Ασχέτως του γεγονότος ότι μπορούσε κάποιος να κάνει like ένα βίντεο χωρίς να το δει, οπότε και ήταν πρακτικά άχρηστο feature, σκέψου τώρα σε ένα κινητό 5ετίας να προσπαθεί να φορτώσει αυτή τη σελίδα. Επίσης, κάθε "έκδοση" του site ήταν τελείως διαφορετική από την άλλη. Η πριντ πχ, αντί για τις σελίδες των βίντεο φόρτωνε κάποια άρθρα για τους καλλιτέχνες αντί του βίντεο. Και -φυσικά- όλα έπρεπε να είναι cross browser και να υποστηρίζουμε (ναι, ναι) και ΙΕ6. Μετά από 2 μήνες ΜΑΧΗΣ των ντηβέλοπερς και του αφεντικού, καταφέραμε να τον πείσουμε να φτιάξουμε καινούργια σελίδα που να έχει μόνο 2 εκδόσεις, σχεδόν identical και να ντηβελοπάρουμε μόνο για σύγχρονους browsers. Και όλα αυτά, όχι στην μπανανία την Ελλάδα. Στο Λονδίνο. Στο Λονδίνο του 2012.

 

 

[koslibpro]

Το ευκολότερο για σένα θα ήταν να έχεις όλα τα πιθανά drop downs ήδη στην HTML σου αλλά να μη φαίνονται (ή να φαίνεται μόνο ένα). Όταν αλλάζει η επιλογή σε προηγούμενη ερώτηση (radio button) κανονίζεις να εμφανίζονται/εξαφανίζονται ανάλογα τα drop downs.

 

Όταν γίνει submit η φόρμα τα drop downs που δεν είναι ορατά δε θα γίνουν submit γιατί δεν είναι "successful" (αυτή είναι η ορολογία) οπότε μπορείς να δώσεις και σε όλα το ίδιο name αν σε βολεύει καλύτερα.

 

Όλα αυτά γίνονται με ελάχιστο jQuery, δες εδώ.

ααα μαλιστα.απλα επειδη δεν ξερω jQuery δεν ηθελα να μπλεξω μαζι του,ομως φαινεται απλο ωστε να υλοποιησω αυτο που θελω..

 

ευχαριστω για τον κωδικα και τον χρονο σου,θα ξαναποσταρω αν κολησω πουθενα,αν και δεν νομιζω.ειδομεν

[koslibpro]

Ενημερωνω το θεμα καθως προεκυψε ενα προβλημα.

ο κωδικας οπως εχει διαμορφωθει τωρα στο επιμαχο σημειο ειναι αυτος:

 

 

>
<p align=center>Ο αριθμός σου ειναι <br/>
<input type="radio" name="typos_arithmou" value="foo1"> Κινητο<br>
<input type="radio" name="typos_arithmou" value="foo2"> Σταθερο<br>
</p>

<p align=center>Επιλογή εταιρίας
<div id="container" align=center>
 <select class="hidden" id="select-for-foo1" name="etairia">
                                         	<option value="not">Επιλογή</option>
                                         	<option value="wind" >--Wind</option>
                                         	<option value="vodafone">--Vodafone</option>
                                         	<option value="cosmote">--Cosmote</option>
                                         	<option value="q">--Q</option>									  		
 </select>
 <select class="hidden" id="select-for-foo2" name="etairia">
                                         	<option value="not">Επιλογή</option>
                                         	<option value="ote">--OTE</option>
                                         	<option value="forthnet">--Forthnet</option>
                                         	<option value="wind">--Wind</option>
                                         	<option value="cyta">--Cyta</option>
                                         	<option value="hol">--HOL</option>
                                         	<option value="vivodi">--Vivodi</option>
                                         	<option value="on">--On Telecoms</option>
                                         	<option value="cosmoline">--Cosmoline</option>
 </select>
</div>
</p>

 

 

αλλα κολαει.τι εννοω?ας πουμε επιλεγω πως εχω κινητο και η εταιρια μου ειναι η cosmote.και καταχωρει στην βαση οτι η ο αριθμος μου ειναι foo1(κινητο δηλαδη) και η εταιρια μου ειναι η wind.και συμβαινουν διαφορα τεοτια τραγελαφικα.

αν επιλεξω σταθερο,λειτουργουν ολα οκ με οποια εταιρια και αν επιλεξω.γιατι στο κινιτο ομως χαλαει?

 

ευχαριστω

[thanocaster]

Δείξε μας και τον κώδικα που παίρνει τα δεδομένα από τη φόρμα και τα καταχωρεί στη βάση.

[kalogeros]

Αν και δεν κατάλαβα ποιο ακριβώς είναι το πρόβλημα, έχω να κάνω την εξής παρατήρηση. Έχεις 2 select με το ίδιο όνομα. Λογικό να δημιουργείται πρόβλημα.

[koslibpro]

Αν και δεν κατάλαβα ποιο ακριβώς είναι το πρόβλημα, έχω να κάνω την εξής παρατήρηση. Έχεις 2 select με το ίδιο όνομα. Λογικό να δημιουργείται πρόβλημα.

με jQuery ομως εξαφανιζεται η μια λιστα και εμφανιζεται η αλλη (αυτος ειναι ο γενικος κωδικας που το κανει αυτο>> http://jsfiddle.net/3GJmM/ )

αρα νομιζω πως κανονικα δεν θα επρεπε να δημιουγειται προβλημα,ετσι δεν ειναι?

 

ο κωδικας που εισαγει τα στοιχεια στην βαση ειναι αυτος

 

 

>
$etairia = $_POST['etairia'];
$sql="INSERT INTO users (....,etairia,.....) VALUES (.....,'$etairia',.....)";

(εχω βαλει τελιτσες γιατ υπαρχουν και διαφορα αλλα στοιχεια εντελως ασχετα,οπως ονομα επιθετο κτλπ)