Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
elavd
Δημοσιεύσεις: 323
Εγγραφή: 16 Σεπ 2004 00:04
Τοποθεσία: Ιωάννινα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από elavd » 14 Αύγ 2006 18:05

Θέλω να φτιάξω μια φόρμα παρόμοια με αυτή:
http://www.plaisio.gr/bpc_v2.process?desktop=t

Δηλαδή ένα Drop Down menu και με Javascript να συμπληρώνονται το αντίστοιχο κουτάκι/πεδίο αυτόματα.

Πχ στο site από το ΠΛΑΙΣΙΟ αμέσως μόλις ο χρήστης επιλέξει το προϊόν, δεξιά στο κουτάκι εμφανίζεται η τιμή.

Πώς μπορεί να γίνει κάτι τέτοιο?

Ευχαριστώ προκαταβολικά ;)
Εικόνα

Άβαταρ μέλους
papageorge
Δημοσιεύσεις: 122
Εγγραφή: 11 Ιαν 2006 20:54
Τοποθεσία: HRAKLEIO

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από papageorge » 15 Αύγ 2006 00:22

mporeis na deis ayth th selida
www.quirksmode.org/js/select.html :wink:

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από skeftomilos » 15 Αύγ 2006 01:49

Αν δεις τον κώδικα της συγκεκριμένης σελίδας είναι ολόκληρο κατεβατό. Τα στοιχεία select της σελίδας δεν περιέχουν εξαρχής τα <option> αλλά προστίθενται δυναμικά μόλις φορτώσει η σελίδα, έχοντας κατέβει μέσω του αρχείου Desktop_Data.js ως objects τύπου Product. Η σελίδα έχει πολλές επιπλέον λειτουργίες εκτός από την εμφάνιση της τιμής ενός προϊόντος, υπολογίζει φόρους, αθροίσματα, δόσεις κ.λπ. Υπάρχουν συνολικά 9 αρχεία js, χώρια ο κώδικας μέσα στην ίδια τη σελίδα. Φοβάμαι ότι χωρίς advanced γνώσεις scripting θα είναι αρκετά δύσκολο να προκύψει ένα ανάλογο αποτέλεσμα.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
elavd
Δημοσιεύσεις: 323
Εγγραφή: 16 Σεπ 2004 00:04
Τοποθεσία: Ιωάννινα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από elavd » 15 Αύγ 2006 17:20

skeftomilos έγραψε:Αν δεις τον κώδικα της συγκεκριμένης σελίδας είναι ολόκληρο κατεβατό. Τα στοιχεία select της σελίδας δεν περιέχουν εξαρχής τα <option> αλλά προστίθενται δυναμικά μόλις φορτώσει η σελίδα, έχοντας κατέβει μέσω του αρχείου Desktop_Data.js ως objects τύπου Product. Η σελίδα έχει πολλές επιπλέον λειτουργίες εκτός από την εμφάνιση της τιμής ενός προϊόντος, υπολογίζει φόρους, αθροίσματα, δόσεις κ.λπ.
Αυτά σκοπεύω να τα κάνω δυναμικά με PHP.
Αυτό που με ενδιαφέρει ουσιαστικά είναι το πως με το που επιλέγει κάτι από το Drop Menu ο χρήστης, ΧΩΡΙΣ να πατήσει κάποιο Submit button, να εμφανίζει κάπου αλλού (στην προκειμένη περίπτωση σε μια φόρμα) μια value.

papageorge σε ευχαριστώ για το link. Από ότι είδα με μια βιαστική ματιά αυτό κάνει αυτόματο redirect αν κατάλαβα καλά. Μπορεί άραγε αυτό να τροποποιηθεί για τις δικές μου ανάγκες (δεν έχω ασχοληθεί καθόλου με Javascript...)?
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από skeftomilos » 16 Αύγ 2006 00:27

Το πρόβλημα είναι ότι το attribute value των <option> θα πρέπει λογικά να κρατάει το id του προϊόντος, οπότε δε μπορεί ταυτόχρονα να περιέχει και την πληροφορία της τιμής. Μπορεί να χρησιμοποιηθεί ένα custom attribute για αυτό το λόγο, με όνομα π.χ. price:

Κώδικας: Επιλογή όλων

<form>
  <select onchange="this.form.elements&#91;'price'&#93;.value = this.options&#91;this.selectedIndex&#93;.getAttribute&#40;'price'&#41;">
    <option value="0" price="">&#91;Επιλέξτε γλυκάκι&#93;</option>
    <option value="101" price="0,45">Γκοφρέτα Serenata</option>
    <option value="201" price="1,80">Πουράκια Amaretti</option>
    <option value="301" price="0,60">Κρουασάν Koukouroukou</option>
  </select>
  <input name="price" size="5">
</form>
Αν αυτό είναι το μόνο που θέλεις από άποψη JavaScript, τότε το παραπάνω είναι σχεδόν OK. Αν αντίθετα ο στόχος είναι κάτι τόσο λειτουργικό όσο η σελίδα του plaisio τότε το παραπάνω είναι σε λάθος κατεύθυνση. Το να σκορπίζονται τα δεδομένα σε custom attributes δεν είναι καλή ιδέα.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
elavd
Δημοσιεύσεις: 323
Εγγραφή: 16 Σεπ 2004 00:04
Τοποθεσία: Ιωάννινα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από elavd » 16 Αύγ 2006 15:20

Αυτό ΑΚΡΙΒΩΣ ήθελα!!!!!

ΣΕ ευχαριστώ πολύ!!!! :D:D:D

Τα υπόλοιπα, θα τα κάνω με PHP ;)

Y.Γ. Mου άρεσε το Κουκουρούκου!!! :lol:
Εικόνα

Άβαταρ μέλους
elavd
Δημοσιεύσεις: 323
Εγγραφή: 16 Σεπ 2004 00:04
Τοποθεσία: Ιωάννινα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από elavd » 16 Αύγ 2006 20:02

Skeftomilos είναι δυνατόν με την ίδια λογική, εκτός από την τιμή πχ 0.45 να μεταφέρω αυτόματα και μια δεύτερη value με το ονομα του προϊόντος?

Πχ να πάρω σε ένα κουτάκι δίπλα ότι ο χρήστης, επέλεξε Amarreti και δίπλα την τιμή του, δηλ. 1,80 ?
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από skeftomilos » 17 Αύγ 2006 09:31

Αυτό δε θα χρειαστεί custom attributes γιατί τα ονόματα υπάρχουν ήδη μέσα στα options.

Κώδικας: Επιλογή όλων

<form>
  <select onchange="this.form.elements&#91;'price'&#93;.value = this.options&#91;this.selectedIndex&#93;.getAttribute&#40;'price'&#41;; this.form.elements&#91;'name'&#93;.value = this.options&#91;this.selectedIndex&#93;.innerHTML">
    <option value="0" price=""></option>
    <option value="101" price="0,45">Γκοφρέτα Serenata</option>
    <option value="201" price="1,80">Πουράκια Amaretti</option>
    <option value="301" price="0,60">Κρουασάν Koukouroukou</option>
  </select>
  <input name="price" size="5">
  <input name="name" size="25">
</form>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
elavd
Δημοσιεύσεις: 323
Εγγραφή: 16 Σεπ 2004 00:04
Τοποθεσία: Ιωάννινα

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από elavd » 17 Αύγ 2006 14:29

Είσαι ΑΨΟΓΟΣ!!! ;)

Σε ευχαριστώ ΠΟΛΥ!!! :D
Εικόνα

xco
Δημοσιεύσεις: 1
Εγγραφή: 20 Μάιος 2008 05:16

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από xco » 20 Μάιος 2008 06:12

επειδη δεν κατέχω καθόλου από javascript αντιμετωπιζω δυσκολια στο να προσαρμώσω τον κώδικα που έχω. ο κωδικας ειναι ο εξης:

<SCRIPT language=JavaScript>
function reload(form,year)
{
var val=form.les.options[form.les.options.selectedIndex].value;
self.location='update_lesson.inc.php?les=' + val ;
}
</script>

<form action="update_lesson.php" method="post" >
<select name="les" onchange="reload(this.form)">
<option value=''>Select one</option>
......antlountai dinamika ta stoixeia tou menou........
</select>

////////////////// This will end the first drop down list ///////////


////////// Starting of second drop downlist /////////
<select name='lesyear' >
<option value=''>Select one</option>
...antlountai dinamika ta stoixeia tou 2ou menu me basi tin epilogi sto prwto........
</select>
////////////////// This will end the second drop down list ///////////

πως μπορώ να άνω και ενα τριτο menu ( <select>) του οποιου τα δεδομενα θα εξαρτώνται από τις προηγούμενες δυο επιλογες. το προβλημα μοθ ειναι το πως πρεπει να προσαρμωσω το script, ή αν πρεπει να κανω κατι αλλο?
Ευχαριστω πολυ.

Akis_gr49
Δημοσιεύσεις: 266
Εγγραφή: 07 Ιουν 2007 13:49

Φόρμα που συμπληρώνεται αυτόματα απο drop down menu

Δημοσίευση από Akis_gr49 » 23 Μάιος 2008 03:46

skeftomilos έγραψε:Αυτό δε θα χρειαστεί custom attributes γιατί τα ονόματα υπάρχουν ήδη μέσα στα options.

Κώδικας: Επιλογή όλων

<form>
  <select onchange="this.form.elements&#91;'price'&#93;.value = this.options&#91;this.selectedIndex&#93;.getAttribute&#40;'price'&#41;; this.form.elements&#91;'name'&#93;.value = this.options&#91;this.selectedIndex&#93;.innerHTML">
    <option value="0" price=""></option>
    <option value="101" price="0,45">Γκοφρέτα Serenata</option>
    <option value="201" price="1,80">Πουράκια Amaretti</option>
    <option value="301" price="0,60">Κρουασάν Koukouroukou</option>
  </select>
  <input name="price" size="5">
  <input name="name" size="25">
</form>
Καλησπέρα,

Αν έχω το παρακάτω, πως μπορώ να ζητάω περισσότερα στοιχεία στην javascript;
Εδώ δηλαδή
<select onchange="this.form.elements['birthday'].value this.options[this.selectedIndex].getAttribute('birthday')">

Κώδικας: Επιλογή όλων

<?php
include &#40;"connect2db.php"&#41;;

$sql3 = "SELECT * FROM guestbook ORDER BY id ASC";

$result3=mysql_query&#40;$sql3&#41;;
while &#40;$row = mysql_fetch_array&#40;$result3&#41;&#41; &#123;

$lastname = $row&#91;"lastname"&#93;;
$firstname = $row&#91;"firstname"&#93;;
$birthday = $row&#91;"birthday"&#93;;
$email = $row&#91;"email"&#93;;
$phone = $row&#91;"phone"&#93;;
$postalcode = $row&#91;"postalcode"&#93;;
$street = $row&#91;"street"&#93;;
$state = $row&#91;"state"&#93;;
$country = $row&#91;"country"&#93;;

$options .= "<OPTION  style="width&#58;150px;" birthday="$birthday" email="$email" phone="$phone" postalcode="$postalcode" street="$street" state="$state" country="$country">$lastname $firstname</OPTION>";
$state ="Test";
&#125;
?>

<form>  <select onchange="this.form.elements&#91;'birthday'&#93;.value   this.options&#91;this.selectedIndex&#93;.getAttribute&#40;'birthday'&#41;">

<option selected="selected">&#91;Epilekste xristi&#93;</option>
<?php echo $options ?>
</select>
<input name="birthday" size="20">
<input name="email" size="20">
<input name="phone" size="20">
<input name="postalcode" size="20">
<input name="street" size="20">
<input name="state" size="20">
<input name="country" size="20">
</form>

<?php mysql_close&#40;&#41;;?>
Ευχαριστώ παίδες!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης