[gelöst]Registrierungsbutton Text ändern mit jQuery
Eingetragen von ThuleNB (380)am 30.04.2018 - 20:28 Uhr in
Hallo Community,
ich nutze aktuell dieses Module, um den Button-Text auf der Registrierungsseite zu ändern:
<?php
function registration_button_override_form_alter(&$form, &$form_state, $form_id)
{
//check to see if user is logged in so that this is only displayed to anon users that are registering
global $user;
if ($user->uid == 0) {
if ($form_id == 'user_register_form') {
// Change register button text.
$form['actions']['submit']['#value'] = t('Jetzt registrieren');
}
}
}
?>Das funktioniert soweit. Jetzt müsste ich den Code anpassen, dass sicht der Button-Text nur ändert, wenn in einem bestimmten Feld des Registrierungsformular ein bestimmter Wert ausgewählt ist.
Das habe ich mit der zusätzlichen Bedingung probiert:
<?php
if (isset($row->field_data_field_registrierung_als[0]['value']) == 1)
?>Der Button-Text ändert sich nicht. Ich bin kein professioneller Programmierer, aber die Seite muss wahrscheinlich neu laden, wenn das besagte Feld ausgewählt wird, damit der Button-Text geändert wird, oder? Hat jemand eine Ahnung wie ich meinen Code anpassen müsste?
- Anmelden oder Registrieren um Kommentare zu schreiben
Das kann nur javascript/JQuery
am 01.05.2018 - 09:39 Uhr
Während etwas im Browser eingegeben wird, kann nur der Browser darauf reagieren.
Du wirst also ein JavaScript für diese Seite schreiben müssen, das in der Seite abläuft und die Selektoren bedienen kann.
Hinweis - du musst das onChange-Event des betroffenen Formularfeldes abfangen und in dieser Funktion die Value-Eigenschaft des Buttons ändern.
Danke für diesen Hinweis,
am 02.05.2018 - 06:43 Uhr
Danke für diesen Hinweis, Ronald. Ich bin kein Programmierer, aber ich probiere es mal und bestimmt finde ich im Netz den ein oder anderen hilfreichen Artikel.
Hallo nochmal,ich habe mich
am 03.05.2018 - 21:17 Uhr
Hallo nochmal,
ich habe mich nun an den richtigen Code herangenähert, er funktioniert aber noch nicht ganz.
Mein HTML:
<select id="edit-field-registrierung-als-und" name="field_registrierung_als[und]" class="form-select required">
<option value="_none">- Wert wählen -</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="edit-submit--2" name="op" value="Neues Benutzerkonto erstellen" class="form-submit" type="submit">
Mein jQuery:
(function ($) {$("#edit-field-registrierung-als").change(function() {
if $( this.value == "2")
$("#edit-submit--2").val("Registrieren");
}
}) (jQuery);
Die Selektoren müssten eigentlich stimmen. Ich habe den Code schon einige Male umgestellt, aber es springt nicht an. Ist für euch Erfahrene Programmierer ein Fehler ersichtlich?
VG, Thomas
ich schubs dich nochmal
am 03.05.2018 - 22:52 Uhr
so wie das jetzt da steht, wird deine Funktion beim Aufbau der Seite ausgeführt.
Sie sollte aber ausgeführt werden, nachdem etwas gewählt wurde.
Schau mal nach einem onSelect event des options Objects oder auch onChange
Danke :) Aber habe ich nicht
am 04.05.2018 - 12:19 Uhr
Danke :)
Aber habe ich nicht mit dem Befehl schon abgedeckt:
$("#edit-field-registrierung-als").change(function() {Sorry für meine Anfängerfragen, ich lerne aber.
du hast recht
am 04.05.2018 - 23:53 Uhr
mit dieser Funktion wird der Trigger abgefangen.
Ob er wirklich abgefangen wird, kannst du testen, indem du einen alert("Debug info") einfügst.
Es kann sein, dass du dich irgendwo vertippt hast, und deshalb das Event nicht diese Funktion aufruft.
Ich komme dem Ganzen näher ...
am 10.05.2018 - 07:13 Uhr
ich habe jetzt folgendes HTML und dieses jQuery Code:
<head>
<title>Button-Test</title>
</head>
<body>
<div class="field-type-list-text field-name-field-registrierung-als field-widget-options-select form-wrapper" id="edit-field-registrierung-als">
<div class="form-item form-type-select form-item-field-registrierung-als-und">
<label for="edit-field-registrierung-als-und">Registrierung als <span class="form-required" title="Diese Angabe wird benötigt.">*</span></label>
<select id="edit-field-registrierung-als-und" name="field_registrierung_als[und]" class="form-select required"><option value="_none">- Wert wählen -</option><option value="1">Kommunaler Anbieter (Stadt, Gemeinde, Landkreis, kommunales Unternehmen)</option><option value="2">Gewerblicher Anbieter</option></select>
</div>
</div>
<input id="edit-submit--2" name="op" value="Neues Benutzerkonto erstellen" class="form-submit" type="submit">
</body>
jQuery:
$("#edit-field-registrierung-als-und").change(function() {if ( this.value == "2") {
$("#edit-submit--2").val("Registrieren");
}
}) (jQuery);
Auf JSFiddle funktioniert dieser Code. Wenn ich ihn aber über das Modul JS Injector einbinde, funktioniert er nicht. Hat jemand eine Ahnung warum? Preprocess JS und Inline JS habe ich nicht aktiviert und ich habe als Position die Standard "Kopfbereich" ausgewählt.
Hi. es kann sein, dass das
am 10.05.2018 - 09:34 Uhr
Hi.
es kann sein, dass das Skript ausgeführt wird,
bevor die Seite geladen wurde und das Element
$("#edit-field-registrierung-als-und")
im DOM Vorhanden ist.
a. Der Code gehört in ein Dokument ready Konstrukt:
// Shorthand for $( document ).ready()
$(function() {
$("#edit-field-registrierung-als-und").change(function() {
if ( this.value == "2") {
$("#edit-submit--2").val("Registrieren");
}
}) (jQuery);
});
b. Wäre es am besten wenn das Skript nur in der Seite geladen wird, in der es auch gebraucht wird.
MfG
Robert
Es kann auch helfen,
am 10.05.2018 - 22:18 Uhr
das Script im Footer unterzubringen.
Da kann man hoffen, sofern die Seite nicht asynchron aufgebaut wird, dass die anzusprechenden Element geladen sind, wenn das Script ausgeführt wird.
Aber besser ist immer, alle Scriptausführungen nach einem Ready-Event auszulösen.
Vielen Dank für eure Hilfe.
am 16.05.2018 - 06:37 Uhr
Vielen Dank für eure Hilfe. Ich habe beides probiert, aber der Button-Text ändert sich einfach nicht. Der Code mit dem "Ready" Konstrukt habe ich so übernommen. Bei JSFiddle funktioniert es, aber nicht auf meiner Webseite. Ich habe auch den Tipp mit dem Fußbereich versucht, was leider auch nicht klappt. Auch meine Einstellungen habe ich schon oft überprüft, z. B. ob ich die richtige Seite/Pfad angegeben habe. Habt ihr noch eine Idee, wie ich dem Problem auf die Spur kommen kann?
Ich habe die Seite mit debug funktion
am 11.05.2018 - 14:06 Uhr
(F12) angesehen.
Dort hagelt es Javascript-Fehler.
Ich habe sie mir nicht im Detail angesehen, aber dort scheint der "Hase im Pfeffer" zu liegen.
Danke für den Hinweis. Ich
am 12.05.2018 - 15:14 Uhr
Danke für den Hinweis. Ich habe das auch versucht, finde aber nur diese Fehler (Chrome Konsole):
Uncaught TypeError: $ is not a function at js_injector_6.js?p8mcdf:2
(anonymous) @ js_injector_6.js?p8mcdf:2
GET https://my-business-location.com/sites/all/themes/mbl/css/images/ui-bg_f... 404 ()
Sorry für die wahrscheinlich blöde Frage, aber wie kann ich die vielen Fehler, die du erwähnst, einsehen?
In der IE Konsole sehe ich nur:
SCRIPT5007: Objekt erwartetSo wie ich das sehe, bindest
am 12.05.2018 - 15:20 Uhr
So wie ich das sehe, bindest das Javascript nicht so ein,
wie es in Drupal üblich ist, sondern über ein Modul(injector.js) welches den Fehler wirft.
https://www.drupal.org/docs/7/api/javascript-api/managing-javascript-in-...
MfG
Robert
Der Link hat mir tatsächlich
am 14.05.2018 - 13:47 Uhr
Der Link hat mir tatsächlich weitergeholfen. Insbesondere diese Passage:
Using jQuery
jQuery is now namespaced to avoid conflicts with other Javascript libraries such as Prototype. All your code that expects to use jQuery as $ should be wrapped in an outer context like so.
(function ($) {
// All your code here
}(jQuery));
If you don't, you may see the error Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function or similar.
Nachdem ich meinen Code in diesen Wrapper gepackt hatte, funktionierte alles wunderbar.
Vielen Dank dafür und für die geduldige Hilfen von allen!
Ich muss diesen Beitrag
am 31.07.2018 - 09:42 Uhr
Ich muss diesen Beitrag nochmal öffnen:
Wie oben beschrieben, hat alles gut funktioniert und ich habe es mit jQuery geschafft, den Button-Text im Registrierungsformular zu ändern, wenn ein Feld einen bestimmten Wert enthält.
Es handelt sich um dieses Formular: https://my-business-location.com/registrierung (das erste Feld bedingt den Button-Text)
Jetzt habe ich bemerkt, dass wenn der Button-Text mit jQuery geändert (Option 2 im ersten Feld), das Formular nicht abgeschickt wird. Die Seite lädt einfach neu und die Formulardaten bleiben enthalten. Wenn ich das Formular mit der Option 1 im ersten Feld (also Button-Text ändert sich nicht), dann funktioniert alles wunderbar.
Es muss also am jQuery liegen. In der Console bekomme ich einen Fehler: Found 2 elements with non-unique id #edit-name. Dieser hängt mit LoginTobggon zusammen. Auch wenn ich das Modul deaktiviere und der Fehler nicht mehr erscheint, habe ich das Problem.
Ich habe schon mit Devel probiert, dem Fehler auf die Spur zu kommen. Leider ohne Erfolg. Hat von euch jemand eine Idee, woran das liegen kann?
pass auf, dass du nicht die ID des buttons änderst
am 31.07.2018 - 09:52 Uhr
und auch der type muss erhalten bleiben, weil er ansonsten nicht erkannt werden kann.
Danke Ronald, für deine
am 31.07.2018 - 10:12 Uhr
<input type="submit" id="edit-submit--2" name="op" value="Jetzt registrieren" class="form-submit"><input type="submit" id="edit-submit--2" name="op" value="Kostenpflichtig registrieren" class="form-submit">
Danke Ronald, für deine Antwort. Ich habe das geprüft und es scheint mir hier alles in Ordnung zu sein.
Du hast doch recht: Wenn ich
am 31.07.2018 - 12:33 Uhr
Du hast doch recht: Wenn ich die Werte in dem Feld, das den Button-Text beeinflusst, ändere, dann bleibt die ID wie oben beschrieben gleich. Aber wenn ich den Submit-Button klicke und die Seite neu lädt, dann sieht es so aus:
<input type="submit" id="edit-submit" name="op" value="Jetzt registrieren" class="form-submit">Die ID ändert sich also von "edit-submit--2" zu "edit-submit". Weißt du, wie ich das verhindern könnte?
ich kann gerade nicht herumtesten
am 31.07.2018 - 14:43 Uhr
aber versuche mal die ID explizit zu setzen.
Ich habe das über die
am 31.07.2018 - 15:18 Uhr
Ich habe das über die submit() Funktion probiert:
(function ($) {$(function() {
$("#register-form").submit(function() {
$("#edit-submit--2").attr("id", "edit-submit--2");
});
});
}(jQuery));
Hiermit sollte doch eigentlich nach "Submit" die betroffene ID gleich bleiben, funktioniert leider nicht.
Hast du eine andere Idee, wie ich die ID explizit setzen kann?
Ich habe die submit id über
am 01.08.2018 - 10:32 Uhr
Ich habe die submit id über ein eigenes Modul definiert und sie ändert sich nun auch nicht mehr. Allerdings besteht der Fehler immer noch. Ich denke, dass das System den Button-Text erwartet, der vor dem Ändern mit jQuery angezeigt wird. Mit dem geänderten Button-Text funktioniert die Logik nicht mehr. Kann das sein?
EDIT: Ich habe nun herausgefunden, dass der #value tatsächlich zur Validierung herangezogen wird. Das ist in meinem Fall ungünstig, da ich eben diesen Wert ändern muss. Hat jemand eine Ahnung, wie ich es trotzdem bewerkstelligen kann?
Lösung
am 01.08.2018 - 15:50 Uhr
So habe ich das Problem nun lösen können:
(function ($) {
$(function() {
// Create a copy of the button
$('#registersubmit').after('<input id="new-submit" class="form-submit" value="Jetzt registrieren">');
// Hide original
$('#registersubmit').hide();
// When copy is clicked, "click" the original
$('#new-submit').click(function(){
$('#registersubmit').click();
});
$("#edit-field-registrierung-als-und").change(function() {
if ( this.value == "2") {
$("#new-submit").val("Kostenpflichtig registrieren");
}
else {
$("#new-submit").val("Jetzt registrieren");
}
});
});
}(jQuery));
Vielen Dank für die Hilfe!