SelectBoxen value mit Prototype?

[Mario Steinko]

Hi!

Ich hab eine js funktion die automatisch bei jeder Änderung eines formulars aufgerufen wird, wie kann ich nun feststellen ob sich der wert geändert hat?
Ich vermute ich werde irgendein Konstrukt wie dieses basteln müssen?

var oldSelectValue;  
  
oldSelectValue = getSelectValue('select_id'); // irgendwo einmal aufgerufen  
  
function formChanged () {  
  var newSelectValue = getSelectValue('select_id');  
  if(newSelectValue != oldSelectValue)  
    alert('hat sich geändert');  
}  

Oder gibts ne elegantere Lösung?

Wie könnte eine getSelectValue-Funktion aussehen?

lg
Mario

[molily]

Ich vermute ich werde irgendein Konstrukt wie dieses basteln müssen?

Japp.

[code lang=javascript]var oldSelectValue;

oldSelectValue = getSelectValue('select_id'); // irgendwo einmal aufgerufen

oldSelectValue = $F('select_id');

$F
Form.Element.getValue

Das kann natürlich erst an einer Stelle aufgerufen werden, wo das JavaScript Zugriff auf das Element hat (also nicht direkt in einem script im head, sondern z.B. beim dom:loaded-Event).

Im Übrigen würde ich vorschlagen, dass du keine globale Variable anlegst. Die wird sich früher oder später mit anderen Daten beißen, z.B. wenn es ein zweites Feld gibt, dessen vorherigen Wert du dir merken willst. Du kannst diesen Wert einfach auch am select-Elementobjekt als Eigenschaft speichern:

var selectField = $('select_id');
selectField.oldValue = selectField.getValue();

Mathias

[Mario Steinko]

Hallo Mathias!

$F
Form.Element.getValue

Ich arbeite mit CakePHP, welches ein im ersten Moment etwas seltsame Art hat Formulare zu erstellen, was aber wenn man sich ein bissl damit beschäftigt echt sinn macht, eine Selectbox würde z.B. so aussehn:
<fieldset>
<legend>Shipping Method</legend>
<input type="hidden" name="data[Order][shipping_method_id]" id="shippingMethod_" value="" />

<input type="radio" name="data[Order][shipping\_method\_id]" id="ShippingMethod2" value="2"  />  
<label for="ShippingMethod2">By Mail (+ &#8364;50,00)</label>  
  
<input type="radio" name="data[Order][shipping\_method\_id]" id="ShippingMethod8" value="8"  />  
<label for="ShippingMethod8">UPS (+ &#8364;5,00)</label>  
  
<input type="radio" name="data[Order][shipping\_method\_id]" id="ShippingMethod10" value="10"  />  
<label for="ShippingMethod10">something else</label>  

</fieldset>

Den Inhalt wollte ich jetzt auf diese Weise auslesen:
var form = $('OrderForm');
var input = form['data[Order][shipping_method_id]'];
var paymentValue = $(input).getValue();

Da bekomm ich jedoch die Fehlermeldung:
$(input).getValue is not a function

Was musss ich da ändern?

Im Übrigen würde ich vorschlagen, dass du keine globale Variable anlegst. Die wird sich früher oder später mit anderen Daten beißen, z.B. wenn es ein zweites Feld gibt, dessen vorherigen Wert du dir merken willst. Du kannst diesen Wert einfach auch am select-Elementobjekt als Eigenschaft speichern:

var selectField = $('select_id');
selectField.oldValue = selectField.getValue();

danke, der Tipp is echt cool!

lg
Mario

[ChrisB]

Hi,

Den Inhalt wollte ich jetzt auf diese Weise auslesen:
var form = $('OrderForm');
var input = form['data[Order][shipping_method_id]'];

Hier holst du dir bereits eine Referenz auf das Formularelement.

var paymentValue = $(input).getValue();

Warum rufst du jetzt die Methode nicht auf dem Objekt auf, welches du bereits hast, sondern willst noch mal $() aufrufen?

MfG ChrisB

[Mario Steinko]

Hallo Chris!

»» Den Inhalt wollte ich jetzt auf diese Weise auslesen:
»» var form = $('OrderForm');
»» var input = form['data[Order][shipping_method_id]'];

Hier holst du dir bereits eine Referenz auf das Formularelement.

»» var paymentValue = $(input).getValue();

Warum rufst du jetzt die Methode nicht auf dem Objekt auf, welches du bereits hast, sondern willst noch mal $() aufrufen?

Um ehrlich zu sein weil ich nicht genau gewusst hab was $() bedeutet und alle Bsp. von Prototype Docs getValue durchprobiert hab^^
Ohne$() funktionierts nämlich auch ned, input is laut alert()-Ausgabe ein [object NodeList]
Ich bekomme aber folgenden Fehler:
input.getValue is not a function

lg
Mario

[Auge]

Hallo

Um ehrlich zu sein weil ich nicht genau gewusst hab was $() bedeutet und alle Bsp. von Prototype Docs getValue durchprobiert hab

Wenn du schon in der Doku rumprötelst, kannst du auch gleich gucken, was $() bedeutet. Das steht nämlich sehr weit vorne in der Doku.

Tschö, Auge

[Mario Steinko]

Ich kenn mich mit JS gar nciht aus, versuche aber mein bestes *G*
Hast du auch ne Idee warum es nicht funktioniert?

danke
Mario

[molily]

<input type="radio" name="data[Order][shipping_method_id]" id="ShippingMethod10" value="10"  />
<label for="ShippingMethod10">something else</label>
</fieldset>

var form = $('OrderForm');
var input = form['data[Order][shipping_method_id]'];
var paymentValue = $(input).getValue();

Okay, du willst auf ein Radiobutton-Set zugreifen, das ist nochmal was anderes, als das einfache Auslesen eines Feldwertes.

Das geht soweit ich weiß nicht direkt mit Prototype, insofern ist dein Ansatz, der ein wenig an Prototype vorbeiprogrammiert und diesen <http://de.selfhtml.org/javascript/objekte/elements.htm@title=klassischen Ansatz> zum Zugriff auf Formularfelder verfolgt, schon sehr brauchbar.

var form = $('OrderForm');
var input = form['data[Order][shipping_method_id]'];

Das ist schon ganz richtig, bzw. ausführlich würde man schreiben:

var form = $('OrderForm');
var input = form.elements['data[Order][shipping_method_id]'];

Jetzt hast du in input nicht ein einzelnes input-Element, sondern input ist ein Array mit allen Radio-Buttons dieses Namens. Wenn du den angewählten Radiobutton in dieser Liste finden willst, musst du sie mit einer for-Schleife durchlaufen und bei jedem Feld schauen, ob die Eigenschaft checked gesetzt ist - siehe etwa http://www.dcljs.de/faq/antwort.php?Antwort=forms_radioselect.

Das ist natürlich etwas sehr »zu Fuß« und Old-School, deshalb gibts für Prototype Helferfunktionen:
http://xavisys.com/2007/03/using-prototype-javascript-to-get-the-value-of-a-radio-group/
Die sind aber meines Wissens nicht standardmäßig in Prototype vorhanden, man muss sich also selbst was basteln.

Mathias

[Mario Steinko]

danke, jetzt läufts ;)

lg
Mario

[Struppi]

Ich hab eine js funktion die automatisch bei jeder Änderung eines formulars aufgerufen wird, wie kann ich nun feststellen ob sich der wert geändert hat?
Ich vermute ich werde irgendein Konstrukt wie dieses basteln müssen?

Hab ich mal gemacht Formobserver

Struppi.