Anker-tag als submit-button?

Ich bin in den Prozess der Konvertierung einer bestehenden website für die Verwendung von MVC und Entity Framework.

Layout /styling ist alle sollen die gleichen bleiben, und um die Folgen, die Leitlinie muss ich meine login-Formular mit einem <a> tag, denn es hat ein benutzerdefiniertes Bild für die Schaltfläche.

Hier mein form:

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    <label>
        <span>Username
        </span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password
        </span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" onclick="login();" class="login-button"></a>
    </div>
}

Wie Sie sehen können, die <a> tag früher eingereichten Anmeldung info, mit javascript. Dies ist nicht das, was ich bin auf der Suche zu erreichen.

Wie kann ich das ändern, dass tag, um meine form für meine controller-action?

  • Hat deine Skillung ausdrücklich sagen, Sie können nicht ändern, in ein Anker-tag um einen button-tag? Weil ich meine, Knöpfe ermöglichen die Bilder, auch. Es wäre wahrscheinlich kleinere änderungen an der css statt benötigen, um mit javascript ein Formular Absenden.
  • Es muss nur gleich Aussehen, wie zuvor. Ich habe versucht über einen button mit einem Bild, aber es sah so aus. Wenn er angeklickt wird, das Bild würde sinken in die Seite, und das ist nicht, wie der Knopf wurde entwickelt, um Aussehen. Ich brauche eine Schaltfläche, die erscheint, NUR weil mein Bild und KEINE animation, wenn geklickt wird.
InformationsquelleAutor Kehlan Krumme | 2013-06-13
  1. 10

    Ich habe kleine änderungen

    HTML

    <form action="test.aspx" type="POST">
    <label>
        <span>Username</span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" class="login-button">Login</a>
    </div>
</form>

    jquery

    $(document).ready(function(){
   $(document).on("click",".login-button",function(){
     var form = $(this).closest("form");
     //console.log(form);
     form.submit();
   });
});

    JSFiddle

    • I ended up styling meiner eigenen button für dieses Projekt, aber das ist immer noch der beste Weg zu gehen. Danke.
    InformationsquelleAutor Gökhan Girgin
  2. 6

    In der Regel Sie nicht wollen, eine Menge von javascript in html-tags, aber wenn dies erfolgt nur, wenn in Ihrer Lösung wird es in Ordnung sein. Wenn jedoch, es gibt Anker-tags über die post müssen mit Gokan Lösung würde funktionieren besser mit einen marker der Klasse und einige von javascript in einem gemeinsamen Ort.

    Ändern Sie Ihren Anker-tag für mehr wie folgt Aussehen:

    <a href="javascript:$('form').submit();" class="login-button"></a>
    • Einfachste Lösung, vielen Dank.
    • Danke! In der Regel Sie nicht wollen, eine Menge von javascript in html-tags, aber wenn dies erfolgt nur, wenn in Ihrer Lösung wird es in Ordnung sein. Wenn jedoch, es gibt Anker-tags über die post müssen mit Gokan Lösung würde funktionieren besser mit einen marker der Klasse und einige von javascript in einem gemeinsamen Ort.
    • Ich bin mir bewusst, danke. Dies ist der einzige Ort in diesem Abschnitt meiner Website, die verlangen, dass Sie diese Problemumgehung, also wird es kein Problem sein. Vertrauen Sie mir, ich würde mich weit mehr konventionelle darüber, wenn ich nicht im wesentlichen die Erhaltung der Website über frameworks/design-patterns.
    • -1: Das ist die Schlimmste mögliche Art und Weise zu befestigen JavaScript-basierte Verhalten bis zu einem tag.
    • Vielleicht könnten Sie erarbeiten, auch empfehlen was anderes, wenn man so stark eine Herausforderung für diese Lösung.
    • Ich bin nicht einverstanden. Mit separaten code laufen alle über dem Platz für eine einzelne Ecke Fall können verursachen mehr Probleme als Ihren Wert. Auch wenn es vielleicht nicht die meisten "akzeptierten" Weg, manchmal einfachste ist den meisten wartbar. Aber wenn Sie eine andere Lösung haben bitte zurück, konstruktiv sein und nicht einfach sagen, das ist schrecklich.
    • Mit JavaScript vermischt mit HTML ist die am meisten wartbaren Art und Weise man sich vorstellen kann. Und das ist in einem Fall, wenn Sie eigentlich verpflichtet den code zu einem onclick - Attribut, anstelle des hässlichen Greuel in den href.

    InformationsquelleAutor Jay
  3. 0

    Brauchen nur zu ändern Einzige Zeile, Für Optimization ich denke, das ist eine beste Weg.

    @using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    //your HTML code
    <div class="spacer">
        <a href="" onclick='$("#login").submit()' class="login-button"></a>
    </div>
}
    InformationsquelleAutor Smit Patel
Schreibe einen Kommentar