Feld in Node Form mit Javascript berechnen
Eingetragen von purplepoint (13)am 11.09.2012 - 18:14 Uhr in
Ich möchte gerne in einem Node Formular zwei Felder während der Eingabe multiplizieren:
z.B.
Eingabe in Feld 1: 2
Eingabe in Feld 2: 100
Ausgabe Resulat in einem dritten Feld: 200
Also das, was mit Computed Fields ohne Probleme möglich ist, aber bereits während dem Ausfüllen des Formulars. Um das Script zu laden, habe ich ein Modul geschrieben:
<?php
function bestellformular_form_alter(&$form, &$form_state, $form_id) {
if($form_id == 'orders_offers_changes_node_form') {
drupal_add_js(drupal_get_path('module', 'bestellformular') .'/calculate.js');
}
}
?>Die Datei calculate.js sieht wie folgt aus:
function calc(){
var anzahl = $('#edit-field-details-und-0-field-anzahl-und-0-value').val();
var preis = $('#edit-field-details-und-0-field-preis-pro-person-und-0-value').val();
var gesamt = anzahl * preis;
$('#gesamt').text(gesamt);}Wie ich das Resultat in das dritte Feld reinbekomme, weiss ich noch nicht - wahrscheinlich über den Default Wert und dann das Feld nicht editierbar machen. Für den Moment gebe ich das Resultat mal einfach in einer span (natürlich mit der ID gesamt) aus. Das Problem: Es wird nichts berechnet. Habe ich einen Überlegungsfehler gemacht? Das Script wird auf jeden Fall eingebunden, und auch die ID's von Feld 1 und Feld 2 sind korrekt, das habe ich überprüft.
Vielen Dank für eure Hilfe!
- Anmelden oder Registrieren um Kommentare zu schreiben
hallo purpelpoint so wie ich
am 11.09.2012 - 19:37 Uhr
hallo purpelpoint
so wie ich das auf den ersten blick sehe fehlt dir ja noch ein sogenannter eventhandler,
also wann soll das 3. feld den berechnet werden?
es reicht ja nicht das die funktion dazu geladen wird sondern
die muss ja auch noch aufgerufen werden.
ein eventhandler kann das drücken einer taste, die mausbewegung, das klicken eines buttons usw. sein,
wenn as ereignniss (event) passiert ruf dieser dann die funktion auf
auf die schnelle hab ich dieses tutorial dazu gefunden
http://matthiasschuetz.com/jquery-tutorial-interaktionen-mit-events-steuern
besten gruss
stef
Hallo Stef Peinlich -
am 12.09.2012 - 10:19 Uhr
Hallo Stef
Peinlich - logisch, dass es so nicht funktionieren kann. Ich muss den entsprechenden Input-Feldern "onKeyUp='calculate()'" hinzufügen. Allerdings habe ich das bis jetzt noch nicht geschafft.
Habs versucht mit
$form["field_anzahl"]["und"][0]["#attributes"] = "onKeyup='calculate()'";in der function bestellformular_form_alter, was nicht klappt. Wie macht man das richtig?
Dem Feld eine ID geben und
am 12.09.2012 - 10:40 Uhr
Dem Feld eine ID geben und den Eventhandler mittels jQuery setzen. Dann brauchst du den onkeyup-Kram nicht.
Vielen Dank für den Hinweis!
am 12.09.2012 - 11:07 Uhr
Vielen Dank für den Hinweis! Kannst du mir noch etwas genauer erklären, wie ich den Eventhandler mittels jQuery setzen kann?
Kennst du dich allgemein mit
am 12.09.2012 - 11:15 Uhr
Kennst du dich allgemein mit jQuery ein wenig aus? Ansonsten kannst du auch mal eine .js-Datei von einem Modul öffnen, die dürften idR jQuery verwenden.
Nein, ich kenne mich leider
am 12.09.2012 - 11:31 Uhr
Nein, ich kenne mich leider mit jQuery nicht aus, versuche mich aber reinzudenken. Also: Laut Google muss die Struktur etwa folgendermassen aussen:
(function ($) {
//add drupal 7 code
Drupal.behaviors.myfunction = {
attach: function(context, settings) {
//end drupal calls
//some jquery goodness here...
}}})
(jQuery);
Richtig? Und der Eventhandler wird ungefähr so gesetzt:
$('element').keyup(function() { });Wie bringe ich das Ganze nun zusammen?
Also, um die Sache zu
am 12.09.2012 - 12:54 Uhr
Also, um die Sache zu konkretisieren:
Ich habe die Felder field_anzahl, field_preis und field_total. Im Formular haben sie die IDs #edit-field-anzahl-und-0-value, #edit-field-preis-und-0-value sowie #edit-field-total-und-0-value.
Folgendermassen habe ich das Skript eingebunden:
function bestellformular_form_alter(&$form, &$form_state, $form_id) {if($form_id == 'orders_offers_changes_node_form') {
drupal_add_js(drupal_get_path('module', 'bestellformular') .'/calculate.js');
}
}
Die calculate.js sieht im Moment folgendermassen aus:
$(document).ready(function(){$('#edit-field-anzahl-und-0-value').keyup(function() {
var anzahl = parseFloat($(this).val());
var preis= parseFloat($('#edit-field-preis-und-0-value').val());
$('#edit-total-und-0-value').text((anzahl * preis));
});
});
Liege ich damit einigermassen richtig? Was fehlt noch?
Aloah, die Sache mit dem Essen geben und fischen lehren ...
am 28.09.2012 - 09:04 Uhr
Wenn Du dir dieses Tutorial anschaust sollten Deine Fragen beantwortet sein... -> Tutorial
LG
maen