Balise d'ancrage en tant que bouton soumettre?

Je suis dans le processus de conversion d'un site web existant pour utiliser MVC et Entity Framework.

La mise en page /style est tous censé rester le même, et afin de suivre cette ligne directrice que je dois soumettre mon formulaire de connexion à l'aide d'un <a> tag, parce qu'il a une image personnalisée pour le bouton.

Voici mon formulaire:

@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>
}

Comme vous pouvez le voir, le <a> tag anciennement soumis les informations de connexion à l'aide de javascript. Ce n'est pas ce que je cherche à accomplir.

Comment puis-je changer cette balise pour soumettre mon formulaire pour mon contrôleur de l'action?

Est-ce que votre spec spécifiquement de l'état, vous ne pouvez pas modifier une balise d'ancrage à un bouton de la balise? Parce que je veux dire, des boutons permettent d'images, trop. Il serait probablement un mineur tweak pour le css plutôt que de devoir utiliser javascript pour soumettre un formulaire.
Il suffit de regarder la même façon qu'avant. Je l'ai fait essayer à l'aide d'un bouton avec une image, mais c'était loin. Lorsque l'utilisateur clique dessus, l'image s'enfoncerait dans la page, et ce n'est pas la façon dont le bouton a été conçu pour ressembler. J'aurais besoin d'un bouton, qui apparaît SEULEMENT comme mon image et n'a PAS d'animation quand on clique dessus.

InformationsquelleAutor Kehlan Krumme | 2013-06-13

J'ai fait de petits changements

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

J'ai fini le style de ma propre bouton pour ce projet en particulier, mais c'est encore la meilleure façon d'aller. Merci.

InformationsquelleAutor Gökhan Girgin

6

En général, vous ne voulez pas mettre beaucoup de javascript dans les balises html, mais si cela ne se produit qu'une fois dans votre solution, il sera très bien. Si toutefois, il y a des balises d'ancrage de plus que tous les besoin de l'aide de Gokan la solution fonctionnerait mieux avec un marqueur de classe et un peu de javascript dans un endroit commun.

Changer votre balise d'ancrage pour ressembler à ceci:
```
<a href="javascript:$('form').submit();" class="login-button"></a>
```
- La plus simple solution, merci.
- Merci! En général, vous ne voulez pas mettre beaucoup de javascript dans les balises html, mais si cela ne se produit qu'une fois dans votre solution, il sera très bien. Si toutefois, il y a des balises d'ancrage de plus que tous les besoin de l'aide de Gokan la solution fonctionnerait mieux avec un marqueur de classe et un peu de javascript dans un endroit commun.
- Je suis conscient de cela, je vous remercie. C'est le seul endroit dans cette section de mon site qui va nécessiter de cette solution de contournement, de sorte qu'il ne sera pas un problème. Faites-moi confiance, je serais beaucoup plus conventionnel si je n'étais pas essentiellement la préservation du site dans les cadres/patrons de conception.
- -1: C'est la pire façon possible de joindre JavaScript basée sur le comportement de la balise.
- Peut-être que vous pourriez préciser, même vous recommander quelque chose d'autre, si vous si fortement défi de cette solution.
- Je suis en désaccord. Avoir disjoint de code à l'exécution de tous les plus de la place pour un seul cas de coin peut causer plus de problèmes que de sa valeur. Même si cela peut ne pas être le plus "accepté" façon, parfois la plus simple est la plus facile à gérer. Mais si vous avez une autre solution merci de le sauvegarder, être constructif et de ne pas dire son terrible.
- Avoir JavaScript mélangé avec de l'HTML est le plus difficile à maintenir les moyens imaginables. Et c'est dans un cas, si vous avez réellement lié le code pour un onclick attribut, au lieu de cette horrible abomination dans le href.
InformationsquelleAutor Jay

Juste besoin de changer Seule ligne, Pour Optimization je pense que c'est une meilleure façon.

@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

Vous devez vous connecter pour publier un commentaire.