Change text in submit button in Miniform depending on selection

[astricia]

Ein Kunde hat auf seiner Seite ein Kontaktformular (Modul Miniform) für die Teilnahme an einem Seminar, in dem unter anderem ein Auswahlfeld mit den Optionen "Anmeldung zum Seminar", "Bitte um Angebot" und "Bitte um mehr Informationen" enthalten ist. Er möchte nun, dass sich der Submit-Button je nach Auswahl dieses Feldes ändert - also bei der Auswahl "Anmeldung zum Seminar" soll dort (gesetzeskonform) "Kostenpflichtig bestellen" stehen, bei den anderen beiden Optionen nur "Anfrage senden".

Das müsste man doch vermutlich mit PHP lösen, oder? Hat da jemand ne Lösung? Das Formular-Template ist ja .htt - kann ich da PHP mit einbauen?

---

A client has a contact form (with module Miniform) on his website where ppl can participate in a workshop. One of the fields of this form is a field with the options "Registration", "Please send offer" and "Please send more information". Now he wants to change the submit button depending on the selection of this field - if somebody chooses "Registration", there should be a different text "register with costs" and in the other two cases only "send request".

This is probably a case of PHP, right? Does somebody have a solution? The form template is .htt - can PHP be included here?

Danke - thanks,
Astrid

[astricia]

Hat da niemand eine Idee zu, ob das möglich ist?

Falls nicht, bleibt mir nur die Möglichkeit, da zwei Formulare draus zu machen... der Kunde hätte das aber halt gerne in einem Formular, weil das bei seiner bisherigen (statischen) Website auch so funktioniert hat...

[jacobi22]

mit PHP wird es nicht gehen, weil es dann erst ein Nachladen benötigt wird. Ich denke, mit Ajax/JQuery oder allg Javascript kommst du in diese Richtung.
Beste Vorlage sollte da die statische Seite sein, denn diese muß ja solche Technik benutzen. Ein Inline-Javascript auf der Seite und/oder eine eingebundene JS-Datei, in diese Richtung muß das gehen

Allerdings bin ich bei MiniForm raus, ich benutze dieses Modul nicht. Hat man aber das System der Originalseite erkannt, sollte es sich auch - die entsprechenden Ergänzungen vorausgesetzt - auf MiniForm übertragen lassen.

[CodeALot]

Hat da niemand eine Idee zu, ob das möglich ist?

Falls nicht, bleibt mir nur die Möglichkeit, da zwei Formulare draus zu machen... der Kunde hätte das aber halt gerne in einem Formular, weil das bei seiner bisherigen (statischen) Website auch so funktioniert hat...

You can't change a button text using PHP.
PHP is a processor that generates your page. Once it's there, it's static. For "on the fly" changes you will need javascript.

A nice example on how to do this can be found on: https://stackoverflow.com/questions/36798114/change-submit-button-text-based-on-radio-button-value

[astricia]

Also, ich habe mir jetzt mal die Lösung auf der statischen Seite näher angeguckt.

Der Quellcode des Formulars lautet in der betreffenden Zeile:

Code: [Select]


            <span>Gew&uuml;nschte Aktion: *</span>
            <select class="select" type="text" name="aktion" value="" onchange="changeSubmitButtonLabel(this.value)">
<option value="">- bitte ausw&auml;hlen -</option>
<option value='Anmeldung'>Anmeldung</option>
<option value='Bitte um Angebot'>Bitte um Angebot</option>
<option value='Bitte um weitere Infos'>Bitte um weitere Infos</option>
            </select>

Und der Button selbst ist wie folgt aufgebaut:

Code: [Select]

  <input id="sendenbutton" class="button3" type="submit" name="submit" value="senden" onclick="javascript: document.forms[0].elements['doAction'].value = 'submit';"/>

Wenn ich das jetzt richtig sehe, muss ich die ganzen Javascript-Dateien nach einer Funktion für changeSubmitButtonL abel(this.value) durchsuchen? Das finde ich nämlich nicht ...

Bin doch echt kein Programmierer.... wie mache ich das?

[jacobi22]

suche im Projekt bzw in den auf dieser Seite eingebundenen JS-Dateien oder im Inline-Script nach der Funktion changeSubmitButtonL abel()

Ich würde zuerst im Quelltext schauen, dann mit STRG + F die Browser-Suche einschalten, Funktionsname eingeben
der wird einmal im von dir gepostetem Code stehen und ggf ein zweites Mal zwischen <script> und </script>
Findest du es nur einmal, ist es in extra eingebundenen JS-Dateien.

Diese Funktion kopierst du dann am einfachsten in eine Datei frontend.js

[dbs]

Wir können es auch nicht finden
Aber falls du es gefunden hast, kannst du auch den Code in dein miniForm Template einfach unten drunter setzen innerhalb <script></script>.
Oder so wie Uwe schrieb.

[astricia]

OK, den Code habe ich gefunden - der stand mitten in der Tabelle....

sieht so aus:

Code: [Select]

<script>
function changeSubmitButtonLabel(value) {
if (value == "Anmeldung") {
document.getElementById('sendenbutton').value = 'kostenpflichtig anmelden';
}
else {
document.getElementById('sendenbutton').value = 'senden';
}
                }
</script>
Ok, ich habe den nun auch eingebunden auf der Seite. Und habe in Miniform das

Code: [Select]

onchange="changeSubmitButtonLabel(this.value)"in das entsprechende <select> gesetzt.

Passiert aber nichts. Muss ich noch was machen, damit es das übernimmt?

[jacobi22]

Hast du die jeweiligen ID's kontrolliert? z.b. muß der Sendebutton  auch zwingend die id="sendebutton" haben oder du mußt das JS anpassen

gibt es an gleicher Stelle noch eine Funktion oder ein anderes Element mit Namen doAction?

[astricia]

IDs habe ich kontrolliert.

Bei mir sieht die Zeile momentan so aus:

Code: [Select]

                    <select required="required" class="{AKTION_ERROR}" id="aktion" name="mf_r_aktion"  onchange="changeSubmitButtonLabel(this.value)">
                        <option value="">Bitte auswählen</option>
                        <option {AKTION_SELECTED_ANMELDUNG} value="Anmeldung">Anmeldung</option>
                        <option {AKTION_SELECTED_BITTE_UM_ANGEBOT} value="Bitte um Angebot">Bitte um Angebot</option>
                        <option {AKTION_SELECTED_BITTE_UM_WEITERE_INFOS} value="Bitte um weitere Infos">Bitte um weitere Infos</option>
                    </select>
Der Senden-Button wie folgt:

Code: [Select]

<button id="sendenbutton" class="submit" name="Submit" type="submit"  onclick="javascript: document.forms[0].elements['doAction'].value = 'submit';">Senden</button>
Und das JS genau wie vorhin beschrieben.

Was ist daran falsch? Muss ich "doAction" auch noch als Script einbinden?

[astricia]

Das wäre das hier?

Code: [Select]

function doSubmitAction(tform) {
    var result = true;

    if (tform.elements["doAction"].value == "submit") {
        result = doValidForm(tform);
    }

    return result;
}


[jacobi22]

ja

[astricia]

Nee, das war es nicht.

Der Button war falsch - da fehlte ein <input> zwischen den <button></button>.

sieht jetzt so aus:

Code: [Select]

                <button class="submit" name="Submit" type="submit">
                <input id="sendenbutton" type="submit" name="submit" value="Senden" onclick="javascript: document.forms[0].elements['doAction'].value = 'submit';"/>
                </button>und funktioniert. Muss jetzt nur ein wenig mit CSS gestylt werden, weil das halt anders aussieht als nur Text innerhalb eines Buttons... aber das dürfte ich hinkriegen.

Das zweite Script habe ich nicht gebraucht - hat trotzdem geklappt!