✔ Mit Radiobutton Form Action ändern

[CreativPur]

Hallo,

ich habe ein Formular, welches auf 3 verschiedene Seiten per Radiobutton weiter geleitet werden soll.
Über die Radiobutton sollen die ACTION des Formulars verändert werden.

Eine Version für 2 Radiobutton habe ich bereits hin bekommen..
Leider fehlen mir die Kenntnisse, diese Funktion mit 3 Button zu realisieren..

Version mit 2 Radiobutton:

Radiobutton:

<div class="radio">
<label style="color:green;">
<input type="radio" name="Radios_Reise_Auswahl" id="einfache_fahrt" value="einfache_fahrt">
Einfache Fahrt (nur Hinfahrt)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<label style="color:green;">
<input type="radio" name="Radios_Reise_Auswahl" id="hin_zurueck_fahrt" value="hin_zurueck_fahrt">
Hin,- und Rückfahrt (inkl. Abholung)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
</div>

Script:

<script>
jQuery(document).ready(function($)
{ var form = $('form[name="f1"]'),
radio = $('input[name="Radios_Reise_Auswahl"]'),
choice = '';
radio.change(function(e)
{ choice = this.value; if (choice === 'einfache_fahrt')
{ form.attr('action', 'berechnung_reise_hin.php'); }
else
{
form.attr('action', 'berechnung_reise_zurueck.php');
}
});
  });
</script>

Wie bekomme ich nun einen 3. Radiobutton in dieses Script ?

Weiterer Radiobutton:

<label style="color:green;">
<input type="radio" name="Radios_Reise_Auswahl" id="fahrt_zeit" value="fahrt_zeit">
Pauschalreservierung nach Zeit
</label>

 

[goto;]

Hallo CreativPur,

das Thema ist zwar bereits als erledigt markiert, jedoch möchte ich einen Lösungsansatz präsentieren.

Das Lösungswort lautet hier Switch-Case:

jQuery(document).ready(function ($)
{
    var form = $('form[name="f1"]'),
            radio = $('input[name="Radios_Reise_Auswahl"]'),
            choice = '';
    radio.change(function (e){
        choice = this.value;
        switch(choise){
            case 'einfache_fahrt':
                form.attr('action', 'berechnung_reise_hin.php');
                break;
            case 'loremipsum':
                form.attr('action', 'berechnung_reise_hin.php');
                break;
            case 'loremipsum2':
                form.attr('action', 'berechnung_reise_hin.php');
                break;
        }
    });
});

Viele Grüße

 

[CreativPur]

Danke für die Antwort..

Leider funktioniert es nicht.. Die Funktion ACTION wird nicht ausgeführt..

Folgendes habe ich ausprobiert..

Form Action:

<form action="#" method="post" name="f1">

Radio-Button:

<div class="radio">
<label style="color:green;">
<input type="radio" name="Radios_Reise_Auswahl" id="einfache_fahrt" value="einfache_fahrt">
Einfache Fahrt (nur Hinfahrt)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<label style="color:green;">
<input type="radio" name="Radios_Reise_Auswahl" id="hin_zurueck_fahrt" value="hin_zurueck_fahrt">
Hin,- und Rückfahrt (inkl. Abholung)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<label style="color:green;">
<input type="radio" name="Radios_Reise_Auswahl" id="fahrt_zeit" value="fahrt_zeit">
Pauschalreservierung nach Zeit
</label>
</div>

Script:

jQuery(document).ready(function ($)
{
    var form = $('form[name="f1"]'),
            radio = $('input[name="Radios_Reise_Auswahl"]'),
            choice = '';
    radio.change(function (e){
        choice = this.value;
        switch(choise){
            case 'einfache_fahrt':
                form.attr('action', 'berechnung_reise_hin.php');
                break;
            case 'hin_zurueck_fahrt':
                form.attr('action', 'berechnung_reise_zurueck.php');
                break;
            case 'fahrt_zeit':
                form.attr('action', 'berechnung_reise_zeit.php');
                break;
        }
    });
});

Hab ich da was übersehen oder falsch übernommen ?

 

[goto;]

Hallo CreativPur,

getestet:

var form = $('form[name="f1"]'),
   radio = $('input[name="Radios_Reise_Auswahl"]'),
   choice = '';
radio.change(function(e) {

   choice = $(this).val();
   switch (choice) {
     case 'einfache_fahrt':
       form.attr('action', 'berechnung_reise_hin.php');
       break;
     case 'hin_zurueck_fahrt':
       form.attr('action', 'berechnung_reise_zurueck.php');
       break;
     case 'fahrt_zeit':
       form.attr('action', 'berechnung_reise_zeit.php');
       break;
   }
});

 

[CreativPur]

Ich habe jetzt eine Testseite angelegt und selbst da funktioniert es nicht.. Komisch..
Ich bekomme in der Adress-Zeile bezüglich des

<form action="#" method="post" name="f1">

nur eine # angehängt...

Ansonsten habe ich alles so übernommen ..
Woran kann das liegen, dass es bei mir nicht funktioniert ?

Hier nochmals der Test:

<script>
jQuery(document).ready(function ($)
{
var form = $('form[name="f1"]'),
   radio = $('input[name="Radios_Reise_Auswahl"]'),
   choice = '';
radio.change(function(e) {
   choice = $(this).val();
   switch (choice) {
     case 'einfache_fahrt':
       form.attr('action', 'berechnung_reise_hin.php');
       break;
     case 'hin_zurueck_fahrt':
       form.attr('action', 'berechnung_reise_zurueck.php');
       break;
     case 'fahrt_zeit':
       form.attr('action', 'berechnung_reise_zeit.php');
       break;
   }
});
});
</script>
<form action="#" method="post" name="f1">
    <hr />
    <div class="radio">
    <label style="color:green;">
    <input type="radio" name="Radios_Reise_Auswahl" id="einfache_fahrt" value="einfache_fahrt">
    Einfache Fahrt (nur Hinfahrt)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </label>
    <label style="color:green;">
    <input type="radio" name="Radios_Reise_Auswahl" id="hin_zurueck_fahrt" value="hin_zurueck_fahrt">
    Hin,- und Rückfahrt (inkl. Abholung)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </label>
    <label style="color:green;">
    <input type="radio" name="Radios_Reise_Auswahl" id="fahrt_zeit" value="fahrt_zeit">
    Pauschalreservierung nach Zeit
    </label>
    </div>
    <hr />
    <input type="submit" value="Weiter" class="btn btn-success">
</form>

 

[goto;]

Bekommst Du eine Fehlermeldung in der Konsole?

 

[goto;]

Da fehlt das Framwork (auf der Testseite)

Damit Du jQuery nutzen kannst, musst Du es auch zur Verfügung stellen.

Füg das in den <head>-Bereich deiner Seite ein.
<script src="https://code.jquery.com/jquery-2.1.4.min.js" ></script>

Viele Grüße

 

[CreativPur]

Ohjeee..... Ich hatte ein jQuery drin, aber irgendwie raus genommen..

Vielen Dank.. Jetzt läuft es bestens...

Schönen Tag noch ..

Gruß
Creativpur