Ich habe derzeit mehrere Links, die als Schaltflächen fungieren, und jeder Link hat eine andere Form mit einem versteckten Wert, in dem die ID gespeichert ist. Das Problem ist, dass ich Bootstrap verwende und das Styling durcheinander bringt. Der einzige Ausweg scheint darin zu bestehen, einen einzigen versteckten Wert zu haben, der mit der ausgewählten ID aktualisiert wird, sobald auf einen Link geklickt wird.

Ich habe derzeit <a href="javascript:;" class="list-group-item list-group-item-default" onclick="parentNode.submit();"> als Link und habe mich nach einer Möglichkeit umgesehen, auch einen Wert zu bearbeiten. Leider scheint jeder ernsthaft zu empfehlen, nicht die Javascript-Route zu gehen und stattdessen jQuery zu verwenden, aber ich bin mir nicht ganz sicher, wie ich die beiden verbinden würde.

Ich habe diesen Link gefunden, der ein gutes Beispiel dafür enthält, wie die jQuery zum Ändern von Werten ausgeführt wird. Ich könnte jedoch ein bisschen Hilfe beim Zusammenstellen gebrauchen, da ich nicht sicher bin, ob es möglich ist, den jQuery-Code auch zum Senden des Formulars zu verwenden, oder ob ich eine separate Javascript-Funktion zum Ausführen der jQuery erstellen sollte, um den zu senden bilden.

Wenn an der Javascript-Route eigentlich nichts auszusetzen ist, sieht es so aus, als ob this würde den Job erledigen, möchte nur zuerst überprüfen.

2
Peter 10 Aug. 2015 im 19:38

3 Antworten

Beste Antwort

Zunächst ist jQuery tatsächlich Javascript, es ist lediglich eine Erweiterung - wenn Sie jQuery verwenden, schreiben Sie Javascript. jQuery ist gerade so populär geworden, dass einige Leute dies verwechseln.

Sie können das Formular, das Sie als Parameter senden möchten, wie folgt an die Funktion übergeben:

function handleClickAction(formElement) {
    // change values
    formElement.submit();
}

Mit Ihrem gegebenen Markup könnten Sie es so nennen:

<a href="javascript:;" class="list-group-item list-group-item-default" onclick="handleClickAction(parentNode);">

Natürlich können Sie dem Funktionsaufruf weitere Parameter hinzufügen, wenn Sie wissen möchten, welcher Wert geändert werden soll und / oder wie.

Im Allgemeinen ist die von Ihnen verwendete Lösung nicht sehr elegant und redundant. Wenn Sie jedoch mit Inline-Code arbeiten möchten, ist dies möglicherweise ein geeigneter Weg :)

1
Patches 10 Aug. 2015 im 19:04

Die Plugins von Bootstrap basieren auf jQuery, um zu funktionieren. In diesem Fall erhalten Sie eine größere Funktionalität (über das reine CSS-Design hinaus), wenn Sie einem Bootstrap-Design jQuery hinzufügen. In diesem Fall ist hier eine jQuery-Version, die genau das tut, wonach Sie fragen:

HINWEIS: Überarbeitet, um nachfolgende Fragen in den Kommentaren zu beantworten. Verwendet jetzt den Index des angeklickten Elements anstelle der ID, die im ursprünglichen Beitrag angefordert wurde, da den Links kein ID-Attribut zugewiesen ist.

jQuery(function($) {
    $('#form_of_forms a.list-group-item').click(function(e) {
        e.preventDefault();
        $('#dynamic_form_id').val($(this).index()+1);
        $('#form_of_forms').submit();
    });
});

Ersetzen Sie außerdem href="javascript:;" durch href="#" und entfernen Sie das Attribut onclick="..." vollständig aus jedem Link.

1
B2K 10 Aug. 2015 im 19:21

Machen Sie es also in einer Zeile, wenn Sie Online-Events durchführen

onclick="document.formName.elementName.value='foo';this.form.submit();"
1
epascarello 10 Aug. 2015 im 16:45