Υπολογιζόμενα πεδία

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

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

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Υπολογιζόμενα πεδία

Δημοσίευση από manolism » 20 Ιούλ 2006 17:52

Αν ξέρει κανείς που μπορώ να βρω το εξής.

Έχουμε μία φόρμα με dropdown lists.

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

Υπάρχει κάποιο link να ρίξω κανένα βλέφαρο;

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Υπολογιζόμενα πεδία

Δημοσίευση από cherouvim » 23 Ιούλ 2006 15:13

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

window.onload=function() {
	if (document.getElementById && document.createTextNode) {
		applyValueReflections();
	}
}

function applyValueReflections() {
	var selects = document.getElementsByTagName('select');
	for&#40;var i=0, length=selects.length; i<length; i++&#41; &#123;
		if &#40;selects&#91;i&#93;.className=='valueReflector'&#41; &#123;
			selects&#91;i&#93;.onchange=function&#40;&#41; &#123;
				var options = this.getElementsByTagName&#40;"option"&#41;;
				var reflector = document.getElementById&#40;this.getAttribute&#40;'id'&#41;+'Value'&#41;;
				reflector.value = options&#91;this.selectedIndex&#93;.getAttribute&#40;'title'&#41;;
				doSum&#40;&#41;;
			&#125;
		&#125;
	&#125;
&#125;

function doSum&#40;&#41; &#123;
	var inputs = document.getElementsByTagName&#40;'input'&#41;;
	var sum = 0;
	var allFilledIn = true;
	for&#40;var i=0, length=inputs.length; i<length; i++&#41; &#123;
		if &#40;inputs&#91;i&#93;.className=='value'&#41; &#123;
			var value = parseInt&#40;inputs&#91;i&#93;.value&#41;?parseInt&#40;inputs&#91;i&#93;.value&#41;&#58;0;
			allFilledIn &= value>0;
			sum += value;
		&#125;
	&#125;
	document.getElementById&#40;"adder"&#41;.value=allFilledIn?sum&#58;'';
&#125;
Δίνεις τιμές στο title attribute του κάθε option. Δίνεις όνομα στο select, και την κλάση valueReflector για να εφαρμοστεί δυναμικά η applyValueReflections πάνω του.

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

<select id="computer" name="computer" class="valueReflector">
	<option>-- please select --</option>
	<option value="0" title="800">PC</option>
	<option value="1" title="900">Amiga</option>
	<option value="2" title="490">Mac</option>
	<option value="3" title="500">Atari</option>
	<option value="4" title="120">Spectrum</option>
</select>
Συνδέεις ένα input που θα παρουσιάζει την τιμή του option με id computer δίνοντάς του id computerValue.

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

<input id="computerValue" name="computerValue" class="value" disabled="disabled" />
Στο τέλος έχεις ένα άλλο input με id adder. Αυτό θα μαζέψει όλες τις τιμές από τα input class='value' που δώσαμε πριν για να παρουσιάζουν τιμές από προϊόντα.

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

<label>Sum&#58; </label><input type='text' id="adder" disabled='disabled' value=''/>
Η doSum() τρέχει σε οποιαδήποτε αλλαγή των hooked options, και παρουσιάζει το sum εάν και εφόσον όλα τα options έχουν τιμές.

Το τελικό POST γίνεται μόνο με τα values των προϊόντων (γενικά, οι τιμές των disabled="disabled" form elements δεν στέλνονται στο request). Το calculation τις τελικής τιμής θα το ξανακάνεις, φυσικά, στο server side.

Live demo @ http://temp.cherouvim.com/forums/dropdown-values-adder/

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Υπολογιζόμενα πεδία

Δημοσίευση από manolism » 24 Ιούλ 2006 22:29

Thanks. :D

Θα χρειαστώ και κάτι πρόσθετο σε αυτό αλλά θα επανέλθω.

Απάντηση

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

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

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