Haben Sie zwei Formulare, in denen sich die gleiche Optionsfeldgruppe befindet?

Question

Meine erste Frage ist dies, obwohl ich bezweifle, ob es möglich ist. Aber wenn es ist, wird es mein Leben viel einfacher machen.

Können Sie eine Optionsfeldgruppe mit 2 Formularen haben? Was ich meine ist, dass die selbe Optionsfeldgruppe sowohl in form1 als auch in form2 gefunden wird.

Der Grund, warum ich das brauche ist, dass, wenn ich auf die ersten beiden Optionsfelder klicke, die Formularaktion auf eine Seite erfolgt, während ich auf die letzten beiden Optionsfelder klicke .

Wenn dies nicht möglich ist, würde ich ein Formular verwenden und muss die Formularaktion je nachdem, welches Optionsfeld ich auswähle, ändern. Ich werde den ersten beiden Radiobuttons eine Klasse und den anderen zwei Radioknöpfen eine Klasse zuweisen.

Wenn mich jemand wissen lassen kann, welche Methode besser ist und wie man sie in jQuery implementiert, wäre das großartig.

Vielen Dank im Voraus

Answer 1

Ich habe die richtige Lösung mit etwas Hilfe von Zipfel umgesetzt. Hier ist mein Code:

$(function() { 
    $('input:radio').click(function() { 
     var $rb = $(this); 

     if ($rb.hasClass('class1')){ 
      $("#myForm").attr("action", "link1.php"); 
     }else if($rb.hasClass('class2')){ 
      $rb.closest('form').attr("action", "link2.php"); 
     } 
    }); 

    $('#btnProceed').click(function(){ 
     $('#myForm').submit(); 
    }); 
}); 

Answer 2

Sie können nicht eine einzige Gruppe von Formelementen Teil aus zwei getrennten Formen sein. Es ist einfach nicht möglich, ein solches gültiges Dokument zu erstellen.

Javascript, das dynamisch aktualisiert die URL in der Eigenschaft "Aktion" des übergeordneten <form> sollte nicht zu schwer zu tun sein. Wie Sie vorgeschlagen haben, kann das Attribut "class" der Optionsfeldelemente verwendet werden, um den Code zu leiten, was es ziemlich flexibel macht, wenn Sie später eine oder mehrere Schaltflächen hinzufügen müssen.

Da Sie die jQuery-Tag enthalten:

$(function() { 
    var actionMap = { 
    key1: 'http://yoursite.com/some/action/1', 
    key2: 'http://yoursite.com/some/action/2', 
    /* ... */ 
    }; 

    $('input:radio').click(function() { 
    var $rb = $(this); 
    for (var key in actionMap) { 
     if ($rb.hasClass(key)) 
     $rb.closest('form').attr('action', actionMap[key]); 
    } 
    }); 
}); 

oder so etwas. Sie können auch ein "Data" -Attribut im HTML5-Stil verwenden, um die URLs direkt auf den Optionsfeldelementen oder einem Schlüsselfragment der URL zu speichern. (Vielleicht möchten Sie auch das Ereignis "change" auf die gleiche Weise behandeln, etc.)

Answer 3

Die eine Form, alternative Aktion Seiten scheint der Weg zu sein. Wenn Sie Klassen für die Optionsschaltflächen verwenden möchten, würde so etwas funktionieren.

Live example

JavaScript

// override the action page based on which radio button is checked 
$('#someForm').submit(function(e) { 
    if($('.useDefault:checked').length == 1) this.action = 'http://www.google.com'; 
    else this.action = 'http://wikipedia.org'; 
}); 

HTML

<form id="someForm" action="#"> 
    <input name="rad" type="radio" value="default0" class="useDefault" /><label>default0</label> 
    <br /> 
    <input name="rad" type="radio" value="default1" class="useDefault" /><label>default1</label> 
    <br /> 
    <input name="rad" type="radio" value="alternate0" class="useAlternate" /><label>useAlternate0</label> 
    <br /> 
    <input name="rad" type="radio" value="alternate1" class="useAlternate" /><label>useAlternate1</label> 
    <br /> 
    <input type="submit" value="submit"/> 
</form>