Formulaire ASP.NET MVC Soumettre avec un lien au lieu du bouton

Question

Je voudrais avoir un simple formulaire de connexion (ou n'importe quel formulaire) et pouvoir le poster, non avec un bouton, mais avec un lien.

Donc non input, mais a.

J'ai vu beaucoup de solutions pour ce type de question, et j'ai essayé beaucoup d'options différentes, et à chaque fois, rien ne se passe. J'ai dépouillé tous les JQuery de ce que j'ai, donc c'est la situation de base: qu'est-ce qui manque pour le faire soumettre le formulaire?

<% using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm" })) 
    { %> 
     <%= Html.TextBoxFor(x => x.UserName)%><br/> 
     <%= Html.TextBoxFor(x => x.Password)%><br/> 
     <a href="#" id="submit-link" class="button">Log In</a> 
<%}%> 

Answer 1

La seule façon d'y arriver est en utilisant javascript:

<form id="fooForm" action="/foo" method="post"> 
    <a href="#" id="submit_link" class="button">Log In</a> 
</form> 

et javascript:

$(function() { 
    $('a#submit_link').click(function() { 
     $('form#fooForm').submit(); 
    }); 
}); 

Bien que je vous suggère de l'aide d'un bouton d'envoi:

<button type="submit"> 
    <a href="#" id="submit_link" class="button">Log In</a> 
</button> 

Et essayez de style it pour ressembler à une ancre. Ma suggestion est de toujours utiliser les boutons de soumission pour soumettre des formulaires. Ceci est plus sémantiquement correct, vous trouverez également que des choses comme appuyer sur la touche Enter lors de la modification d'un champ de texte soumettra le formulaire qui est un peu natif. Donc, faites ce qui est sémantiquement correct et faites le style en CSS.

Answer 2

Vous pouvez ajouter un click handler pour le faire comme ceci:

$(function() { 
    $("#submit-link").click(function() { 
    $("#loginForm").submit(); 
    }); 
}); 

Ou pour le rendre plus réutilisable, donner le lien à la place une classe, comme ceci:

<a href="#" class="submit-link button">Log In</a> 

ensuite référencer que chemin:

$(".submit-link").click(function() { 
    $(this).closest("form").submit(); 
}); 

Cela rend tout travail <elem class="submit-link"> de soumettre le <form> c'est dans.

Answer 3

Ne pouvez-vous pas simplement mettre un événement onclick à ce sujet?

<a href="#" id="submit-link" class="button" onclick="submitForm()">Log In</a> 

<script type="text/javascript"> 
    function submitForm() 
     { 
      document.forms.item(0).submit(); 
     } 
</script> 

Answer 4

Si la seule raison pour laquelle vous souhaitez utiliser un lien au lieu d'un bouton est de rendre un aspect différent (tout en conservant la même functionalty), pourquoi ne pas le style simplement sur le bouton pour ressembler à un lien ...

<input type="submit" value="Submit the form" class="fakeLink"/> 

<style type="text/css"> 

.fakeLink{ 
    border: 0px; 
    background-color: transparent; 
    color: blue; 
    cursor: hand; 
} 
.fakelink:hover{ 
    text-decoration: underline; 
} 

</style> 

Malheureusement, le style 'hover' ne fonctionne pas avec IE, mais avec Firefox.

Je ne suis pas complètement convaincu que faire un bouton de soumission ressembler à un lien est une bonne idée, mais je suis sûr que je l'ai vu déjà fait.

Answer 5

La seule chose que je changerais dans votre solution que je voudrais ajouter l'événement onclick à votre lien afin de soumettre le formulaire:

<% using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm" })) 
    { %> 
     <%= Html.TextBoxFor(x => x.UserName)%><br/> 
     <%= Html.TextBoxFor(x => x.Password)%><br/> 
     <a href="#" id="submit-link" class="button" onclick="loginForm.submit();">Log In</a> 
<%}%>